diff --git a/1.3/CNAME b/1.3/CNAME
new file mode 100644
index 000000000..6df57ef93
--- /dev/null
+++ b/1.3/CNAME
@@ -0,0 +1 @@
+element.eleme.io
diff --git a/1.3/docs.130412a.js b/1.3/docs.130412a.js
new file mode 100644
index 000000000..f46bcaaba
--- /dev/null
+++ b/1.3/docs.130412a.js
@@ -0,0 +1,115 @@
+webpackJsonp([0,2],[function(s,t,a){s.exports=a(1)},function(s,t,a){(function(s){"use strict";function t(s){return s&&s.__esModule?s:{default:s}}var l=a(2),n=t(l),e=a(3),i=t(e),v=a(22),_=t(v),c=a(23),r=t(c),p=a(598),o=t(p);a(985);var h=a(990),d=t(h),C=a(996),j=t(C),u=a(1002),g=t(u),m=a(1009),b=t(m),f=a(1014),y=t(f),w=a(1019),k=t(w);n.default.use(o.default),n.default.use(_.default),n.default.component("demo-block",d.default),n.default.component("main-footer",j.default),n.default.component("main-header",g.default),n.default.component("side-nav",b.default),n.default.component("footer-nav",y.default);var x=new _.default({mode:"hash",base:s,routes:r.default});x.afterEach(function(s){var t=k.default[s.meta.lang];for(var a in t)if(new RegExp("^"+a,"g").test(s.name))return void(document.title=t[a]);document.title="Element"}),new n.default({render:function(s){return s(i.default)},router:x}).$mount("#app")}).call(t,"/")},,function(s,t,a){function l(s){a(4)}var n=a(13)(a(14),a(21),l,null,null);s.exports=n.exports},function(s,t){},,,,,,,,,,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},e=a(15),i=a(16),v=l(i),_=a(20),c=l(_);(0,e.use)(location.href.indexOf("zh-CN")>-1?v.default:c.default),t.default={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"}},watch:{lang:function(){this.localize()}},methods:{localize:function(){(0,e.use)("zh-CN"===this.lang?v.default:c.default)},renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a"),t=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var a=s.getAttribute("href");s.href=t+a})}},goAnchor:function(){if(location.href.match(/#/g).length>1){var s=function(){var s=location.href.match(/#[^#]+$/g);if(!s)return{v:void 0};var t=document.querySelector(s[0]);return t?void setTimeout(function(s){document.documentElement.scrollTop=document.body.scrollTop=t.offsetTop+120},50):{v:void 0}}();if("object"===("undefined"==typeof s?"undefined":n(s)))return s.v}}},mounted:function(){this.localize(),this.renderAnchorHref(),this.goAnchor()},created:function(){var s=this;window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})}}},,,,,,function(s,t){"use strict";t.__esModule=!0,t.default={el:{colorpicker:{confirm:"OK",clear:"Clear"},datepicker:{now:"Now",today:"Today",cancel:"Cancel",clear:"Clear",confirm:"OK",selectDate:"Select date",selectTime:"Select time",startDate:"Start Date",startTime:"Start Time",endDate:"End Date",endTime:"End Time",year:"",month1:"Jan",month2:"Feb",month3:"Mar",month4:"Apr",month5:"May",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Oct",month11:"Nov",month12:"Dec",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{jan:"Jan",feb:"Feb",mar:"Mar",apr:"Apr",may:"May",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Dec"}},select:{loading:"Loading",noMatch:"No matching data",noData:"No data",placeholder:"Select"},cascader:{noMatch:"No matching data",placeholder:"Select"},pagination:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{title:"Message",confirm:"OK",cancel:"Cancel",error:"Illegal input"},upload:{delete:"Delete",preview:"Preview",continue:"Continue"},table:{emptyText:"No Data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All",sumText:"Sum"},tree:{emptyText:"No Data"},transfer:{noMatch:"No matching data",noData:"No data",titles:["List 1","List 2"],filterPlaceholder:"Enter keyword",noCheckedFormat:"{total} items",hasCheckedFormat:"{checked}/{total} checked"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{attrs:{id:"app"}},["play"!==s.lang?a("main-header"):s._e(),a("div",{staticClass:"main-cnt"},[a("router-view")],1),"play"!==s.lang?a("main-footer"):s._e()],1)},staticRenderFns:[]}},function(s,t){s.exports=VueRouter},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(25),v=l(i),_=function(s){function t(s,t,n){var e="/changelog"===s.path?a(38)("./"+t+"/changelog.vue"):a(55)("./"+t+s.path+".md"),i={path:s.path.slice(1),meta:{title:s.title||s.name,description:s.description,lang:t},name:"component-"+(s.title||s.name),component:e.default||e};l[n].children.push(i)}var l=[];return Object.keys(s).forEach(function(n,e){var i=s[n];l.push({path:"/"+n+"/component",redirect:"/"+n+"/component/installation",component:a(26)("./"+n+"/component.vue"),children:[]}),i.forEach(function(s){s.groups?s.groups.forEach(function(s){s.list.forEach(function(s){t(s,n,e)})}):s.children?s.children.forEach(function(s){t(s,n,e)}):t(s,n,e)})}),l},c=_(e.default),r=function(s){var t={path:"/"+s+"/guide",redirect:"/"+s+"/guide/design",component:a(521)("./"+s+"/guide.vue"),children:[{path:"design",name:"guide-design"+s,meta:{lang:s},component:a(532)("./"+s+"/design.vue")},{path:"nav",name:"guide-nav"+s,meta:{lang:s},component:a(545)("./"+s+"/nav.vue")}]},l={path:"/"+s+"/resource",meta:{lang:s},name:"resource"+s,component:a(560)("./"+s+"/resource.vue")},n={path:"/"+s,meta:{lang:s},name:"home"+s,component:a(572)("./"+s+"/index.vue")};return[t,l,n]};v.default.forEach(function(s){c=c.concat(r(s.lang))}),c.push({path:"/play",name:"play",component:a(590)});var p=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",o="/en-US";p.indexOf("zh-")!==-1&&(o="/zh-CN"),c=c.concat([{path:"/",redirect:o},{path:"*",redirect:o}]),t.default=c},function(s,t){s.exports={"zh-CN":[{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"},{path:"/transition",name:"内置过渡动画"}]},{name:"更新日志",path:"/changelog"},{name:"基础组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{path:"/icon",title:"Icon 图标"},{path:"/button",title:"Button 按钮"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio 单选框"},{path:"/checkbox",title:"Checkbox 多选框"},{path:"/input",title:"Input 输入框"},{path:"/input-number",title:"InputNumber 计数器"},{path:"/select",title:"Select 选择器"},{path:"/cascader",title:"Cascader 级联选择器"},{path:"/switch",title:"Switch 开关"},{path:"/slider",title:"Slider 滑块"},{path:"/time-picker",title:"TimePicker 时间选择器"},{path:"/date-picker",title:"DatePicker 日期选择器"},{path:"/datetime-picker",title:"DateTimePicker 日期时间选择器"},{path:"/upload",title:"Upload 上传"},{path:"/rate",title:"Rate 评分"},{path:"/color-picker",title:"ColorPicker 颜色选择器"},{path:"/transfer",title:"Transfer 穿梭框"},{path:"/form",title:"Form 表单"}]},{groupName:"Data",list:[{path:"/table",title:"Table 表格"},{path:"/tag",title:"Tag 标签"},{path:"/progress",title:"Progress 进度条"},{path:"/tree",title:"Tree 树形控件"},{path:"/pagination",title:"Pagination 分页"},{path:"/badge",title:"Badge 标记"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert 警告"},{path:"/loading",title:"Loading 加载"},{path:"/message",title:"Message 消息提示"},{path:"/message-box",title:"MessageBox 弹框"},{path:"/notification",title:"Notification 通知"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu 导航菜单"},{path:"/tabs",title:"Tabs 标签页"},{path:"/breadcrumb",title:"Breadcrumb 面包屑"},{path:"/dropdown",title:"Dropdown 下拉菜单"},{path:"/steps",title:"Steps 步骤条"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog 对话框"},{path:"/tooltip",title:"Tooltip 文字提示"},{path:"/popover",title:"Popover 弹出框"},{path:"/card",title:"Card 卡片"},{path:"/carousel",title:"Carousel 走马灯"},{path:"/collapse",title:"Collapse 折叠面板"}]}]}],"en-US":[{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Changelog",path:"/changelog"},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"}]}]}]}},function(s,t){s.exports=[{lang:"zh-CN"},{lang:"en-US"}]},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/component.vue":27,"./zh-CN/component.vue":33};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=26},function(s,t,a){function l(s){a(28)}var n=a(13)(a(30),a(32),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(31),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:e.default,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=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(34)}var n=a(13)(a(36),a(37),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(31),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:e.default,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=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/changelog.vue":39,"./zh-CN/changelog.vue":47};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=38},function(s,t,a){function l(s){a(40)}var n=a(13)(a(42),a(46),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(43),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){var v=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(44)},function(s,t,a){var l=a(13)(null,a(45),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"1-3-0-beta-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beta-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0-beta.1")]),a("p",[a("em",[s._v("2017-04-28")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("New component: Transfer")]),a("li",[s._v("Now you can use our pre-defined transitions")]),a("li",[s._v("Vertical mode for Slider, can be activated by the "),a("code",[s._v("vertical")]),s._v(" attribute, #4410 (by @devange)")]),a("li",[s._v("Button style for CheckboxGroup, #3697 (by @mdartic)")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("setCurrentRow")]),s._v(" method, #4390")]),a("li",[s._v("Added summary row, with three attributes: "),a("code",[s._v("show-summary")]),s._v(", "),a("code",[s._v("sum-text")]),s._v(" and "),a("code",[s._v("summary-method")]),s._v(", #4484")])])]),a("li",[s._v("Dialog now has a "),a("code",[s._v("before-close")]),s._v(" hook, #4432")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #4473")]),a("li",[a("code",[s._v("on-change")]),s._v(" now also triggers when a file is added, #4447")])])]),a("li",[s._v("Switch now supports "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(", so that you can customize its values, #4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("default-value")]),s._v(" attribute for initially displayed date in the dropdown, #4222 (by @wacky6)")]),a("li",[a("code",[s._v("type")]),s._v(" now supports dynamic updates, #4417 (by @coffeedeveloper)")])])])]),a("h4",{attrs:{id:"fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Compatibility issues of Select and Table with Vue 2.3.x, #4518")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" of DatePicker having no effect on typed value in the input box, #4309")]),a("li",[s._v("An issue when the key of a Tree node is number 0, #4415")]),a("li",[s._v("TimePicker number not align when picked, #4425 (by @pengchongfu)")]),a("li",[s._v("Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)")]),a("li",[s._v("Upload not able to select the same file multiple times, #4461")]),a("li",[s._v("Style bug of RadioGroup when nested in a FormItem, #4336")])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.3.0+")])]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("Fixed RadioButton not working properly when some texts on the page are selected, #4217")]),a("li",[s._v("Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)")]),a("li",[s._v("Fixed Cascader clear button not working, #4167 (by @pengchongfu)")]),a("li",[s._v("Fixed router switching error when the page has a Table with Tooltips, #4085")]),a("li",[s._v("Fixed Upload not able to remove selected files, #4233")]),a("li",[s._v("Added "),a("code",[s._v("onClick")]),s._v(" attribute for Notification, #4221 (by @amouillard)")]),a("li",[s._v("Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)")]),a("li",[s._v("Fixed style error of ColorPicker when nested in a FormItem, #4303")]),a("li",[s._v("Added "),a("code",[s._v("enterable")]),s._v(" attribute for Tooltip, #4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("resetFields")]),s._v(" of Form reassigning form items, #3840 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("max")]),s._v(" and "),a("code",[s._v("min")]),s._v(" attributes for CheckboxGroup, #3700 (by @mdartic)")]),a("li",[s._v("Fixed DatePicker adding one to picked month in some specific days, #3935")]),a("li",[s._v("Added "),a("code",[s._v("closeAll")]),s._v(" method for Message, #3966 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("format-tooltip")]),s._v(" attribute for Slider, #3657 (by @liyanlong)")]),a("li",[s._v("Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)")]),a("li",[s._v("Fixed single Select unable to create new items in Vue 2.2.x, #3984")]),a("li",[s._v("Fixed Row disappearing in all breakpoints if its "),a("code",[s._v("span")]),s._v(" is set to 0 in some breakpoints, #4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("Fixed Select not compatible with Vue 2.2.6, #3797")]),a("li",[s._v("Improve performance for rendering tooltip in Table, #3478")]),a("li",[s._v("Add "),a("code",[s._v("tooltip-effect")]),s._v(" property for Table")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("Fixed Switch compatible with SSR, #3752")]),a("li",[s._v("Fixed the time of TimePicker calculating incorrectly, #3479")]),a("li",[s._v("Fixed the week of DatePicker formatting incorrectly, #2774")]),a("li",[s._v("Fixed the week of DatePicker initializing incorrectly, #3058")]),a("li",[s._v("Fixed the events of Popover destroying incorrectly, #3555")]),a("li",[s._v("Fixed InputNumber setInterval, #3514 (by @pengchongfu)")]),a("li",[s._v("Fixed RadioButton css files, #3276")]),a("li",[s._v("Fixed hover style on striped Table, #3696 (by @nicoeg)")]),a("li",[s._v("Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)")]),a("li",[s._v("Added "),a("code",[s._v("delete-tag")]),s._v(" event for Select, #3663 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("onPick")]),s._v(" option for DatePicker, #2921")]),a("li",[s._v("Added "),a("code",[s._v("status")]),s._v(" for Step, #3722")]),a("li",[s._v("Added full example for on-demand importing, #3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("show-tooltip")]),s._v(" property for Slider, #3430 (by @gabrielboliveira)")]),a("li",[s._v("Fixed Slider precision not updating when "),a("code",[s._v("step")]),s._v(" is updated, #3475 (by @gabrielboliveira)")]),a("li",[s._v("Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549")]),a("li",[s._v("Fixed Table automatically shrinking vertically in some conditions, #3539")]),a("li",[s._v("Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)")]),a("li",[s._v("Now Col will hide itself if its "),a("code",[s._v("xs")]),s._v(", "),a("code",[s._v("sm")]),s._v(", "),a("code",[s._v("md")]),s._v(" or "),a("code",[s._v("lg")]),s._v(" is set to 0, #3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("Fixed Carousel not responding to dynamic data updates, #3159")]),a("li",[s._v("Fixed "),a("code",[s._v("cell-dblclick")]),s._v(" of Table not firing issue, #3305")]),a("li",[s._v("Fixed disabled Cascader not displaying initial value, #3297")]),a("li",[s._v("Fixed Slider not correctly displaying initial value when "),a("code",[s._v("show-input")]),s._v(" is true, #3281")]),a("li",[s._v("Fixed Tooltip error in server-side rendering, #3214")]),a("li",[s._v("Fixed "),a("code",[s._v("range-separator")]),s._v(" of DatePicker not working issue, #3378")]),a("li",[s._v("Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)")]),a("li",[s._v("Added "),a("code",[s._v("http-request")]),s._v(" attribute for Upload, #3387")]),a("li",[s._v("Added support for hiding col if its "),a("code",[s._v("span")]),s._v(" is 0, #3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("Fixed Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097")]),a("li",[s._v("Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035")]),a("li",[s._v("Fixed incorrect parameter of "),a("code",[s._v("change")]),s._v(" event of Cascader, #3014")]),a("li",[s._v("Add "),a("code",[s._v("change")]),s._v(" event for ColorPicker, #3049 (by @nicoeg)")]),a("li",[s._v("Fixed "),a("code",[s._v("setCheckedKeys")]),s._v(" method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)")]),a("li",[s._v("Fixed Tooltip not compatible with "),a("code",[s._v("router-link")]),s._v(", #3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("Fixed SSR regression in version 1.2.0, #2982")]),a("li",[s._v("Fixed horizontal scroll buttons not showing in Tabs, #2974")]),a("li",[s._v("Fixed wrong calculation of height after the "),a("code",[s._v("height")]),s._v(" attribute is updated dynamically in Table, #2979")]),a("li",[s._v("Added "),a("code",[s._v("cell-dblclick")]),s._v(" and "),a("code",[s._v("header-dragend")]),s._v(" events for Table, #2983 #2988")]),a("li",[s._v("Fixed form items showing a left padding inside an inline Form with a specified "),a("code",[s._v("label-width")]),s._v(", #2990")]),a("li",[s._v("Fixed Cascader's dropdown misplaces in some conditions, #2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Cascader and ColorPicker")]),a("li",[s._v("New attributes "),a("code",[s._v("editable")]),s._v(" and "),a("code",[s._v("addable")]),s._v(", and new events "),a("code",[s._v("tab-add")]),s._v(" and "),a("code",[s._v("edit")]),s._v(" for Tabs")]),a("li",[s._v("Language config files in UMD format")]),a("li",[s._v("New events "),a("code",[s._v("node-expand")]),s._v(" and "),a("code",[s._v("node-collapse")]),s._v(" for Tree, #2507 (by @masterzhang)")]),a("li",[s._v("New attribute "),a("code",[s._v("indent")]),s._v(" for Tree, #2713")]),a("li",[s._v("Dialog's title now supports named slot, #2657")]),a("li",[s._v("New attribute "),a("code",[s._v("range")]),s._v(" for Slider, #2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Attribute "),a("code",[s._v("auto-upload")]),s._v(" that controls if files are uploaded immediately after selecting, and its default value is "),a("code",[s._v("true")])]),a("li",[s._v("Event "),a("code",[s._v("on-change")]),s._v(" that fires when file status changes")]),a("li",[s._v("Attribute "),a("code",[s._v("list-type")]),s._v(" that configures the appearance of file list")])])]),a("li",[s._v("Scroll bars in Autocomplete are made prettier")])]),a("h4",{attrs:{id:"fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Carousel not responding to contents' update, #2775")]),a("li",[s._v("Numbers in TimePicker not align in some conditions, #2948")]),a("li",[s._v("TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)")]),a("li",[s._v("Tabs' display order error when tab-pane is dynamically changed, #2898")]),a("li",[s._v("Menu highlighting menu-item when "),a("code",[s._v("default-active")]),s._v(" is assigned to an non-existent item")]),a("li",[s._v("Collapse's style issue when nested")])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459")]),a("li",[s._v("The backdrop of Dialog now inserts to body element by default, #2556")]),a("li",[s._v("Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567")]),a("li",[s._v("Upload is refactored\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" renamed to "),a("code",[s._v("file-list")]),s._v(", and "),a("code",[s._v("show-upload-list")]),s._v(" renamed to "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" removed")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("customClass")]),s._v(" of MessageBox affecting follow-up instances, #2472")]),a("li",[s._v("Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466")]),a("li",[s._v("Fixed style missing issue for some components when imported on demand")]),a("li",[s._v("Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540")]),a("li",[s._v("Restored returning to original sorting in sortable Table columns, #2491")]),a("li",[s._v("Added "),a("code",[s._v("reset.css")]),s._v(" in "),a("code",[s._v("theme-default")]),s._v(", #2378")]),a("li",[s._v("Added "),a("code",[s._v("range-separator")]),s._v(" attribute for DatePicker, #2579")]),a("li",[s._v("Published individual component packages: Table, DatePicker, Loading, Upload and Carousel")]),a("li",[s._v("Add Finnish (@groenroos)")])]),a("h3",{attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("Fixed Menu not activating corresponding menu item after router switching in router mode, #2451")]),a("li",[s._v("Fixed "),a("code",[s._v("value")]),s._v(" attribute of Collapse not supporting "),a("code",[s._v("Number")]),s._v(" typed value, #2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("Fixed Input Number triggering "),a("code",[s._v("change")]),s._v(" event when bound value is changed programmatically, #2329")]),a("li",[s._v("Fixed Menu not responding to "),a("code",[s._v("$router")]),s._v(" changing in router mode, #2391")]),a("li",[s._v("Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically")]),a("li",[s._v("Added "),a("code",[s._v("on-icon-click")]),s._v(" attribute for Input, #2414")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Radio Group, #2411")]),a("li",[s._v("Added "),a("code",[s._v("accordion")]),s._v(" attribute for Tree, #2408")]),a("li",[s._v("Added "),a("code",[s._v("show-message")]),s._v(" attribute for Form, #2356")]),a("li",[s._v("Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)")]),a("li",[s._v("Fixed "),a("code",[s._v("firstDayOfWeek")]),s._v(" not working in ranged typed of DatePicker, #2353")]),a("li",[s._v("Fixed DatePicker displaying 1970 when initial value is null, #2388")]),a("li",[s._v("Fixed "),a("code",[s._v("filteredValue")]),s._v(" attribute for Table, #2348")]),a("li",[s._v("Fixed scrollable Table's style with empty data, #2396")]),a("li",[s._v("Added "),a("code",[s._v("beforeClose")]),s._v(" attribute for MessageBox, #2204")]),a("li",[s._v("Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389")])]),a("p",[s._v("Breaking change")]),a("ul",[a("li",[s._v("The "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes added in 1.1.3 are now merged into an object-typed attribute")])]),a("h3",{
+attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167")]),a("li",[s._v("Fixed DatePicker year calculating error when choosing the next year, #2152")]),a("li",[s._v("Added "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes for Table, #2182 (by @njleonzhang)")]),a("li",[s._v("Fixed filterable Select filtering other options with initial value, #2196")]),a("li",[s._v("Added custom i18n processing, making Element compatible with i18n plugins other than "),a("code",[s._v("vue-i18n")]),s._v(", #2129")]),a("li",[s._v("Added "),a("code",[s._v("resize")]),s._v(" attribute for Input, #2263 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown when blurred, #2247")]),a("li",[s._v("Fixed style issues with nested Tabs, #2212 (by @Kingwl)")]),a("li",[s._v("Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("sortable")]),s._v(" and "),a("code",[s._v("fixed")]),s._v(" attribute of Table not working in Vue 2.1.7+")]),a("li",[s._v("Fixed Input Number not resetting on blur when input with illegal values, #2098")]),a("li",[s._v("Removed "),a("code",[s._v("title")]),s._v(" scoped slot of Collapse, and added "),a("code",[s._v("title")]),s._v(" named slot, #2100")]),a("li",[s._v("Fixed range selection in TimePicker not working issue")]),a("li",[s._v("Fixed Tabs' active tab switching when a non-active tab is removed, #2106")]),a("li",[s._v("Fixed console error reporting when navigating Select with arrow keys, #2120")]),a("li",[s._v("Fixed incorrect validation timing of filterable Select in Form, #2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("Fixed compatibility issue with latest Vue due to compilation")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Carousel and Collapse")]),a("li",[s._v("SSR supported")]),a("li",[s._v("Scrollbars' style inside components is upgraded")]),a("li",[s._v("Table now supports custom templates via "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v("; the good old "),a("code",[s._v("inline-template")]),s._v(" is still compatible, but it's no longer recommended and is likely to be removed in the future")]),a("li",[s._v("Table now supports expandable rows")]),a("li",[s._v("DatePicker now supports specifying the first day of week")]),a("li",[s._v("TimeSelect now supports "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete now supports "),a("code",[s._v("popper-class")])]),a("li",[s._v("To customize template of Tab-Pane, now you can use the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("label")])])]),a("h4",{attrs:{id:"fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[a("code",[s._v("change")]),s._v(" event of DatePicker incorrectly triggering multiple times, #2070")]),a("li",[s._v("Width shaking of tab-pane while initializing, #1883")])]),a("h4",{attrs:{id:"breaking-changes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.1.6 and beyond")]),a("li",[s._v("Parameters of Form validateField() methods are updated")]),a("li",[s._v("Alert's render-content attribute is removed, and now you can pass your custom template via default slot")]),a("li",[s._v("The box models of Input and Select are updated from "),a("code",[s._v("block")]),s._v(" to "),a("code",[s._v("inline-block")])]),a("li",[s._v("The box model of Tabs is updated from "),a("code",[s._v("inline-block")]),s._v(" to "),a("code",[s._v("block")]),s._v(", and Tab-Pane's "),a("code",[s._v("label-content")]),s._v(" attribute is removed")]),a("li",[s._v("The dropdown of Autocomplete now inserts directly to "),a("code",[s._v("<body>")]),s._v(", not "),a("code",[s._v("<el-autocomplete>")]),s._v(" any more")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("Fixed DatePicker incorrectly triggering input event, #1834")]),a("li",[s._v("Fixed Tree reporting "),a("code",[s._v("event is undefined")]),s._v(" error in Firefox, #1945")]),a("li",[s._v("Added "),a("code",[s._v("change")]),s._v(" event for DatePicker, whose parameter is the formatted value, #1841")]),a("li",[s._v("Added "),a("code",[s._v("header-align")]),s._v(" attribute for Table, #1424")]),a("li",[s._v("Fixed single select Table's highlight style not removing when data is removed, #1890")]),a("li",[s._v("Fixed filterable Select lagging issue with more options, #1933")]),a("li",[s._v("Fixed multiple disabled Select not disabling removing selected options issue, #2001")]),a("li",[s._v("Fixed Col style not working in "),a("code",[s._v("xs")]),s._v(", #2011")]),a("li",[s._v("Added "),a("code",[s._v("value")]),s._v(" attribute for Tab, #2008")]),a("li",[s._v("Fixed InputNumber "),a("code",[s._v("change")]),s._v(" event incorrectly firing multiple times in some conditions, #1999")]),a("li",[s._v("Added "),a("code",[s._v("clearable")]),s._v(" attribute for DatePicker, #1994")]),a("li",[s._v("Fixed Form always passing validation in async mode, #1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("Fixed nested Popup from event bubbling, #1677")]),a("li",[s._v("Fixed the issue that datetimerange-typed DatePicker can not select time, #1758")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event not firing correctly of Slider, #1809")]),a("li",[s._v("Fixed Loading's spinner splitting while animating in some conditions, #1786")]),a("li",[s._v("Added "),a("code",[s._v("loading-text")]),s._v(", "),a("code",[s._v("no-data-text")]),s._v(", "),a("code",[s._v("no-match-text")]),s._v(" properties and "),a("code",[s._v("visible-change")]),s._v(" event for Select, #1849")]),a("li",[s._v("Added "),a("code",[s._v("popper-class")]),s._v(" property for DatePicker, Select and Tooltip, #1806")]),a("li",[s._v("Added "),a("code",[s._v("expand-on-click-node")]),s._v(", "),a("code",[s._v("current-node-key")]),s._v(" properties and "),a("code",[s._v("current-change")]),s._v(" event for Tree, #1805 #1807")]),a("li",[s._v("Added the third parameter "),a("code",[s._v("column")]),s._v(" for Table's "),a("code",[s._v("row-click")]),s._v(" event, #1808")]),a("li",[s._v("Fixed an error when pages with Checkbox switching routes due to "),a("code",[s._v("computed")]),s._v(" property being cached, #1860")]),a("li",[s._v("Added the tab instance as a parameter for TabPanel's "),a("code",[s._v("label-content")]),s._v(" render function, #1857")]),a("li",[s._v("Added infinite submenus support for NavMenu in vertical mode, #1851")]),a("li",[s._v("Updated Checkbox so that it works without a binding value, #1818")]),a("li",[s._v("Added "),a("code",[s._v("onProgress")]),s._v(" hook for Progress, #1782")]),a("li",[s._v("Fixed Tab not updating active bar with dynamic label, #1761")]),a("li",[s._v("Added "),a("code",[s._v("filter-change")]),s._v(" event for Table, and "),a("code",[s._v("column-key")]),s._v(" property for TableColumn, #1876")]),a("li",[s._v("Added "),a("code",[s._v("hide-on-click")]),s._v(" property for Dropdown, #1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("Fixed DatePicker dropdown appears when hovering on the clear button")]),a("li",[s._v("Fixed DatePicker displays a wrong date when its initial value is null")]),a("li",[s._v("Added "),a("code",[s._v("row-contextmenu")]),s._v(" event and "),a("code",[s._v("max-height")]),s._v(" attribute for Table, #1663 #1674")]),a("li",[s._v("Added "),a("code",[s._v("customClass")]),s._v(" attribute for MessageBox, #1707")]),a("li",[s._v("Added "),a("code",[s._v("iconClass")]),s._v(" and "),a("code",[s._v("customClass")]),s._v(" attributes for Message and Notification, #1671")]),a("li",[s._v("Added empty slot for Table, #1737")]),a("li",[s._v("Added old value as a second parameter in change event for InputNumber")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Tabs, #1620")]),a("li",[s._v("Added "),a("code",[s._v("size")]),s._v(" attribute for DatePicker input, #1440")]),a("li",[s._v("Fixed "),a("code",[s._v("datetimerange")]),s._v(" DatePicker's panel not showing correct date if initial value is present, #1129")]),a("li",[s._v("Fixed DatePicker display error when switching year, #1607")]),a("li",[s._v("Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604")]),a("li",[s._v("Fixed TimePicker not refreshing value after clicking the clear button, #1583")]),a("li",[s._v("Fixed remote filterable Select display error when its value is an object, #1593")]),a("li",[s._v("Fixed Select's clear button still working bug when it's "),a("code",[s._v("disabled")]),s._v(", #1619")]),a("li",[s._v("Fixed Switch's background color error when its "),a("code",[s._v("disabled")]),s._v(" attribute is dynamically changed, #1627")]),a("li",[s._v("Fixed some style bugs of Table")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("Fixed Select with async options and binding value displaying value instead of label, #1537")]),a("li",[s._v("Fixed Select reports an error when initial binding value is an empty object, #1533")]),a("li",[s._v("Fixed remote filtering Select not showing dropdown in some conditions, #1531")]),a("li",[s._v("Fixed Slider sometimes drifting a small distance after releasing dragging, #1546")]),a("li",[s._v("Fixed Steps style in IE9, #1543")]),a("li",[s._v("Added Upload generating URL for all file types, #1530")]),a("li",[s._v("Fixed TimeSelect style, removed flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("controls")]),s._v(" attribute for Input Number, #1473")]),a("li",[s._v("Fixed Checkbox Group and Radio Group async issue, #1511 #1514")]),a("li",[s._v("Added "),a("code",[s._v("offset")]),s._v(" attribute for Notification, #1419")]),a("li",[s._v("Fixed Slider's value not accurate issue when dragging rapidly, #1458")]),a("li",[s._v("Fixed Slider incorrectly showing multiple decimal digits issue, #1450")]),a("li",[s._v("Fixed Select's binding value and displayed value not in sync in some conditions")]),a("li",[s._v("Added "),a("code",[s._v("multiple-limit")]),s._v(" and "),a("code",[s._v("allow-create")]),s._v(" attributes for Select")]),a("li",[s._v("Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438")]),a("li",[s._v("Fixed Tree's view not updating issue after fetching child nodes' data, #1439")]),a("li",[s._v("Fixed some Table's style issues in windows system, #1464 #1507")]),a("li",[s._v("Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451")]),a("li",[s._v("Added "),a("code",[s._v("row-dblclick")]),s._v(" event for Table, #1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("currentPage")]),s._v(" of Pagination not working in some cases, #1336")]),a("li",[s._v("Fixed "),a("code",[s._v("month")]),s._v(" and "),a("code",[s._v("disabledDate")]),s._v(" DatePicker's view not refreshing issue when switching year, #1158")]),a("li",[s._v("Fixed "),a("code",[s._v("readonly")]),s._v(" DatePicker clear button not disabled issue, #1238")]),a("li",[s._v("Fixed Slider not working when binding value is "),a("code",[s._v("NaN")]),s._v(" or "),a("code",[s._v("step")]),s._v(" is smaller than 1, #1239 #1282")]),a("li",[s._v("Added multi-header for Table, #1312")]),a("li",[s._v("Added "),a("code",[s._v("rowStyle")]),s._v(" for Table, #1348")]),a("li",[s._v("Fixed some attributes of TableColumn can not dynamically assigned issue, #1314")]),a("li",[s._v("Added "),a("code",[s._v("filter-node-method")]),s._v(" attribute and "),a("code",[s._v("filter")]),s._v(" method for Tree, #1257")]),a("li",[s._v("Added "),a("code",[s._v("getCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedKeys")]),s._v(" methods for Tree, #1254")]),a("li",[s._v("Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152")]),a("li",[s._v("Fixed Popper not triggering destroy issue when keep-alive, #1359")]),a("li",[s._v("Added object deep validation for Form, #1363")]),a("li",[s._v("Added "),a("code",[s._v("append")]),s._v(" and "),a("code",[s._v("prepend")]),s._v(" for Autocomplete, #1369")]),a("li",[s._v("Added dynamic "),a("code",[s._v("pageSizes")]),s._v(" support for Pagination, #1372")]),a("li",[s._v("Added custom style API for checked buttons in Radio Button, #1380")]),a("li",[s._v("Added assigning title via slot for Menu Group, #1382")]),a("li",[s._v("Fixed DatePicker year switching bug, #1385")]),a("li",[s._v("Added uploaded file list API for Upload, #1393")]),a("li",[s._v("Added multi-type support for "),a("code",[s._v("label")]),s._v(" attribute of Checkbox, #1400")]),a("li",[s._v("Added "),a("code",[s._v("setChecked")]),s._v(" method for Tree, #1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("context")]),s._v(" for Table to specify which context to access inside of table columns, #1161")]),a("li",[s._v("Added multiple languages")]),a("li",[s._v("Fixed language's dynamic switching issue, #1160")]),a("li",[s._v("Added "),a("code",[s._v("render-content")]),s._v(" for Alert, #568")]),a("li",[s._v("Added styles for focused Button, #982")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" triggering timing in Switch, #1162")]),a("li",[s._v("Fixed TimeSelect being disabled when start time is set to "),a("code",[s._v("00:00")]),s._v(", #676")]),a("li",[s._v("Added "),a("code",[s._v("show-header")]),s._v(" attribute and "),a("code",[s._v("header-click")]),s._v(" method for Table, #1195")]),a("li",[s._v("Improved "),a("code",[s._v("height")]),s._v(" attribute for Table when set to a string, #1195")]),a("li",[s._v("Fixed "),a("code",[s._v("selection-change")]),s._v(" of Table not triggering in some cases, #1198")]),a("li",[s._v("Fixed Table's fixed columns not disappear when "),a("code",[s._v("fixed")]),s._v(" attribute is dynamically changed, #1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" and "),a("code",[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",[s._v("nodeKey")]),s._v(", "),a("code",[s._v("emptyText")]),s._v(", "),a("code",[s._v("checkStrictly")]),s._v(", "),a("code",[s._v("defaultExpandAll")]),s._v(", "),a("code",[s._v("autoExpandParent")]),s._v(", "),a("code",[s._v("defaultCheckedKeys")]),s._v(", "),a("code",[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("p",[s._v("Element 1.0.0 released.")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n    Changelog\n  ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(48)}var n=a(13)(a(50),a(54),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(51),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){var v=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(52)},function(s,t,a){var l=a(13)(null,a(53),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"geng-xin-ri-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更新日志")]),a("h3",{attrs:{id:"1-3-0-beta-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beta-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0-beta.1")]),a("p",[a("em",[s._v("2017-04-28")])]),a("h4",{attrs:{id:"xin-te-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Transfer 组件")]),a("li",[s._v("新增 transition 的文档，现在用户可以使用内置 transition 了")]),a("li",[s._v("Slider 新增垂直模式，使用 "),a("code",[s._v("vertical")]),s._v(" 属性即可打开，#4410（by @devange）")]),a("li",[s._v("CheckboxGroup 新增按钮模式，#3697（by @mdartic）")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("setCurrentRow")]),s._v(" 方法，#4390")]),a("li",[s._v("新增表尾合计行的功能，提供 "),a("code",[s._v("show-summary")]),s._v("、"),a("code",[s._v("sum-text")]),s._v(" 和 "),a("code",[s._v("summary-method")]),s._v("，#4484")])])]),a("li",[s._v("Dialog 新增 "),a("code",[s._v("before-close")]),s._v(" 属性，#4432")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("disabled")]),s._v(" 属性，#4473")]),a("li",[a("code",[s._v("on-change")]),s._v(" 事件现在也会在添加文件后触发，#4447")])])]),a("li",[s._v("Switch 新增 "),a("code",[s._v("on-value")]),s._v(" 和 "),a("code",[s._v("off-value")]),s._v(" 属性，支持自定义两种状态的值，#4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("default-value")]),s._v(" 属性，用于设定下拉框初次弹出时显示的日期，#4222（by @wacky6）")]),a("li",[s._v("支持动态改变 "),a("code",[s._v("type")]),s._v("，#4417（by @coffeedeveloper）")])])])]),a("h4",{attrs:{id:"xiu-fu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("Select 和 Table 的某些功能与 Vue 2.3.x 不兼容的问题，#4518")]),a("li",[s._v("DatePicker 的 "),a("code",[s._v("disabledDate")]),s._v(" 对手动在输入框中输入的值无效的问题，#4309")]),a("li",[s._v("Tree 的树节点 ID 为数字 0 时的一些问题，#4415")]),a("li",[s._v("TimePicker 在完成选择后数字不居中显示的问题，#4425（by @pengchongfu）")]),a("li",[s._v("Autocomplete 在输入中文时频繁触发搜索方法的问题，#4393（by @qazbnm456）")]),a("li",[s._v("Upload 不能选择同一个文件的问题，#4461")]),a("li",[s._v("嵌套在 FormItem 中的按钮样式的 RadioGroup 的样式问题，#4336")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新:")]),a("ul",[a("li",[s._v("最低兼容 Vue 2.3.0")])]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("修复在有文本选中的情况下，RadioButton 需要多次点击才能生效的问题，#4217")]),a("li",[s._v("修复 Tree 的多选框在某些浏览器下不能全选的问题，#4107（by @pengchongfu）")]),a("li",[s._v("修复可清空的 Cascader 清空按钮无效的问题，#4167（by @pengchongfu）")]),a("li",[s._v("修复带有 Tooltip 的 Table 在路由切换时有时会报错的问题，#4085")]),a("li",[s._v("修复 Upload 无法移除待上传的文件的问题，#4233")]),a("li",[s._v("新增 Notification 的 "),a("code",[s._v("onClick")]),s._v(" 属性，#4221（by @amouillard）")]),a("li",[s._v("修复 DatePicker 在清空后值变为 undefined 的问题，#4186（by @pengchongfu）")]),a("li",[s._v("修复 FormItem 中 ColorPicker 的样式错误，#4303")]),a("li",[s._v("新增 Tooltip 的 "),a("code",[s._v("enterable")]),s._v(" 属性，#4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("修复 Form 的 "),a("code",[s._v("resetFields")]),s._v(" 会给表单项重新赋值的问题，#3840（by @pengchongfu）")]),a("li",[s._v("新增 CheckboxGroup 的 "),a("code",[s._v("max")]),s._v(" 和 "),a("code",[s._v("min")]),s._v(" 属性，#3700（by @mdartic）")]),a("li",[s._v("修复 DatePicker 在一些特定的日期会导致月份 +1 的问题，#3935")]),a("li",[s._v("新增 Message 的 "),a("code",[s._v("closeAll")]),s._v(" 方法，#3966（by @pengchongfu）")]),a("li",[s._v("新增 Slider 的 "),a("code",[s._v("format-tooltip")]),s._v(" 属性，#3657（by @liyanlong）")]),a("li",[s._v("修复内嵌于 Dialog 中的 Table 的筛选面板被遮挡的问题，#4023（by @liyanlong）")]),a("li",[s._v("修复单选的 Select 在 Vue 2.2.x 下无法创建条目的问题，#3984")]),a("li",[s._v("修复某些断点下 "),a("code",[s._v("span")]),s._v(" 为 0 的 Row 在其他断点下也会消失的问题，#4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("修复 Select 不兼容 Vue 2.2.6 的问题，#3797")]),a("li",[s._v("优化 Table 的 Tooltip 渲染性能，#3478")]),a("li",[s._v("新增 Table "),a("code",[s._v("tooltip-effect")]),s._v(" 属性")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("修复 Switch 样式不兼容 vue SSR，#3752")]),a("li",[s._v("修复 TimePicker 日期计算错误，#3479")]),a("li",[s._v("修复 DatePicker 格式化 week 类型错误，#2774")]),a("li",[s._v("修复 DatePicker 周选择器默认值，#3058")]),a("li",[s._v("修复 Popover 销毁时未正确清除事件，#3555")]),a("li",[s._v("修复 InputNumber 鼠标左右键一起按下会导致值一直自增加，#3514（by @pengchongfu）")]),a("li",[s._v("修复 RadioButton 样式文件引入但无样式，#3276")]),a("li",[s._v("修复 Table 的 hover 样式，#3696（by @nicoeg）")]),a("li",[s._v("修复 Slider 跳动问题，#3664（by @gabrielboliveira）")]),a("li",[s._v("新增 Select "),a("code",[s._v("delete-tag")]),s._v(" 事件 #3663（by @pengchongfu）")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("onPick")]),s._v(" 选项，#2921")]),a("li",[s._v("新增 Steps 可分别设置 step 的状态（status）和样式调整，#3722")]),a("li",[s._v("新增完整的按需引入组件的文档，#3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("新增 Slider 的 "),a("code",[s._v("show-tooltip")]),s._v(" 属性，#3430（by @gabrielboliveira）")]),a("li",[s._v("修复动态改变 Slider "),a("code",[s._v("step")]),s._v(" 的精度时，其值的精度不随之改变的问题，#3475（by @gabrielboliveira）")]),a("li",[s._v("修复含有 Tooltip 的 Table 在当前窗口高度临界于出现滚动条时，弹出 Tooltip 会导致 Table 宽度抖动的问题，#3549")]),a("li",[s._v("修复 Table 在某些情况下高度自动往复变小的问题，#3539")]),a("li",[s._v("修复 Popover 中的弹出类组件在点击 Popover 的空白区域时不隐藏的问题，#3451（by @nicoeg）")]),a("li",[s._v("现在 "),a("code",[s._v("xs")]),s._v("、"),a("code",[s._v("sm")]),s._v("、"),a("code",[s._v("md")]),s._v("、"),a("code",[s._v("lg")]),s._v(" 值为 0 的 Col 会被正确隐藏，#3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("修复 Carousel 有时不响应数据动态更新的问题，#3159")]),a("li",[s._v("修复 Table 的 "),a("code",[s._v("cell-dblclick")]),s._v(" 事件无法触发的问题，#3305")]),a("li",[s._v("修复禁用的 Cascader 不显示默认值的问题，#3297")]),a("li",[s._v("修复 Slider 在 "),a("code",[s._v("show-input")]),s._v(" 时初始值不正确的问题，#3281")]),a("li",[s._v("修复 Tooltip 在服务端渲染时报错的问题，#3214")]),a("li",[s._v("修复 DatePicker 的 "),a("code",[s._v("range-separator")]),s._v(" 属性有时无效的问题，#3378")]),a("li",[s._v("新增指令式调用 Loading 时响应动态加载文案的功能，#3345（by @imyzf）")]),a("li",[s._v("新增 Upload 的 "),a("code",[s._v("http-request")]),s._v(" 参数，用于实现覆盖默认的上传行为，#3387")]),a("li",[s._v("新增 Col 支持将 "),a("code",[s._v("span")]),s._v(" 值设为 0 时隐藏该列的功能，#3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("修复 Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("修复若干组件与 Vue 2.2 不兼容的问题，#3002 #3067 #3097")]),a("li",[s._v("修复嵌套在 Dialog 内的 Cascader 下拉框有时出现在 Dialog 之后的问题，#3035")]),a("li",[s._v("修复 Cascader 的 "),a("code",[s._v("change")]),s._v(" 事件参数在某些情况下不正确的问题，#3014")]),a("li",[s._v("新增 ColorPicker 的 "),a("code",[s._v("change")]),s._v(" 事件，#3049（by @nicoeg）")]),a("li",[s._v("修复 Tree 的 "),a("code",[s._v("setCheckedKeys")]),s._v(" 方法对非叶子节点无效的问题，#2967（by @rainyLeo）")]),a("li",[s._v("修复 Tooltip 和 "),a("code",[s._v("router-link")]),s._v(" 共用报错的问题，#3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("修复用于 SSR 时报错的问题，#2982")]),a("li",[s._v("修复 Tabs 左右滚动按钮无法出现的问题，#2974")]),a("li",[s._v("修复 Table 在动态改变 "),a("code",[s._v("height")]),s._v(" 属性后高度计算错误的问题，#2979")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("cell-dblclick")]),s._v(" 和 "),a("code",[s._v("header-dragend")]),s._v(" 事件，#2983 #2988")]),a("li",[s._v("修复行内表单在指定 "),a("code",[s._v("label-width")]),s._v(" 时表单元素出现左边距的问题，#2990")]),a("li",[s._v("修复 Cascader 在某些情况下弹出框位置不正确的问题，#2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"xin-te-xing-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Cascader、ColorPicker 组件")]),a("li",[s._v("Tabs 新增 "),a("code",[s._v("editable")]),s._v(" 和 "),a("code",[s._v("addable")]),s._v(" 属性以及 "),a("code",[s._v("tab-add")]),s._v(" 和 "),a("code",[s._v("edit")]),s._v(" 事件")]),a("li",[s._v("新增 UMD 格式的语言包文件")]),a("li",[s._v("Tree 新增 "),a("code",[s._v("node-expand")]),s._v(" 和 "),a("code",[s._v("node-collapse")]),s._v(" 事件，#2507（by @masterzhang）")]),a("li",[s._v("Tree 新增 "),a("code",[s._v("indent")]),s._v(" 属性，#2713")]),a("li",[s._v("Dialog 的标题支持以具名 slot 的方式传入，#2657")]),a("li",[s._v("Slider 新增 "),a("code",[s._v("range")]),s._v(" 属性，支持范围选择，#2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("auto-upload")]),s._v(" 属性，用以控制是否在选择图片后自动上传，默认为开启")]),a("li",[s._v("新增 "),a("code",[s._v("on-change")]),s._v(" 钩子函数在文件状态改变时会调用")]),a("li",[s._v("新增 "),a("code",[s._v("list-type")]),s._v(" 设置文件列表展示外观")])])]),a("li",[s._v("Autocomplete 滚动条使用 el-scrollbar")])]),a("h4",{attrs:{id:"xiu-fu-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("Carousel 不响应内容动态更新的问题，#2775")]),a("li",[s._v("TimePicker 在某些情况下数字位置不居中的问题，#2948")]),a("li",[s._v("TimePicker 在某些情况下范围选择时仅响应偶数次点击的问题，#2884（by @k55k32）")]),a("li",[s._v("Tab 修复 tab-pane 动态显示时插入顺序问题, #2898")]),a("li",[s._v("Menu 修复将 "),a("code",[s._v("default-active")]),s._v(" 设置为不存在的 index 时 menu-item 还会高亮的问题")]),a("li",[s._v("Collapse 修复嵌套使用时的样式问题")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新:")]),a("ul",[a("li",[s._v("重构 Tooltip，不再生成额外的 HTML 标签，确保被 tooltip 包裹的组件的结构不变，#2459")]),a("li",[s._v("Dialog 的遮罩层现在默认插入至 body 元素上，#2556")]),a("li",[s._v("Tabs 现在内部不再维护 tab 实例，需要在外部通过相关事件去处理, #2567")]),a("li",[s._v("Upload 重构升级\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" 属性更名为 "),a("code",[s._v("file-list")]),s._v(", "),a("code",[s._v("show-upload-list")]),s._v(" 属性更名为 "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" 属性被移除")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("修复 MessageBox 的 "),a("code",[s._v("customClass")]),s._v(" 会影响后续实例的问题，#2472")]),a("li",[s._v("修复位于 Tabs 非默认激活页中的 Select 在激活后样式不正确的问题，#2466")]),a("li",[s._v("修复一些组件在单独引入时样式缺失的问题")]),a("li",[s._v("修复被禁用的可搜索多选 Select 点击特定区域仍能打开下拉框的问题，#2540")]),a("li",[s._v("修复 Table 排序支持返回原始顺序，#2491")]),a("li",[s._v("新增 "),a("code",[s._v("reset.css")]),s._v(" 在 "),a("code",[s._v("theme-default")]),s._v(" 内，#2378")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("range-separator")]),s._v(" 属性，#2579")]),a("li",[s._v("发布单独组件包：Table，DatePicker，Loading，Upload，Carousel")]),a("li",[s._v("新增芬兰语（@groenroos）")])]),a("h3",{
+attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("修复 Menu 在启用 router 模式下点击菜单跳转后没有激活对应菜单项的问题，#2451")]),a("li",[s._v("新增 Collapse "),a("code",[s._v("value")]),s._v(" 属性增加对 "),a("code",[s._v("Number")]),s._v(" 类型的支持，#2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("修复 Input Number 在主动改变绑定值时也会触发 change 事件的问题，#2329")]),a("li",[s._v("修复 Menu 在启用 router 模式后没有对 "),a("code",[s._v("$route")]),s._v(" 变化进行响应的问题，#2391")]),a("li",[s._v("修复 Menu、Tree 在快速点击时出现展开状态错误的问题，#2354")]),a("li",[s._v("修复 Input Number 和 Checkbox Group 的 change 事件触发时机，现在主动改变绑定值时不触发该事件。")]),a("li",[s._v("新增 Input 增加点击图标后的钩子函数属性，#2414")]),a("li",[s._v("新增 Radio Group 的 "),a("code",[s._v("disabled")]),s._v(" 属性，#2411")]),a("li",[s._v("新增 Tree 增加 "),a("code",[s._v("accordion")]),s._v(" 属性，#2408")]),a("li",[s._v("新增 Form 增加 "),a("code",[s._v("show-message")]),s._v(" 属性，#2356")]),a("li",[s._v("修复 Table 排序点击区域，调整默认排序的 API，#2309 #2405（by @njleonzhang）")]),a("li",[s._v("修复 DatePicker firstDayOfWeek 在范围类型中无法使用，#2353")]),a("li",[s._v("修复 DatePicker 初始值为 null 显示 1970，#2388")]),a("li",[s._v("修复 Table 缺少 filteredValue 属性，#2348")]),a("li",[s._v("修复 Table 空数据时且存在滚动条时的样式，#2396")]),a("li",[s._v("新增 MessageBox 的 "),a("code",[s._v("beforeClose")]),s._v(" 属性，#2204")]),a("li",[s._v("修复可过滤的 Select 点击三角图标不显示下拉框的问题，#2389")])]),a("p",[s._v("非兼容性更新")]),a("ul",[a("li",[s._v("1.1.3 新增的 "),a("code",[s._v("default-sort-prop")]),s._v(" 和 "),a("code",[s._v("default-sort-order")]),s._v(" 属性现在合并为一个对象类型属性")])]),a("h3",{attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("修复 DatePicker 页面加载后首次清空不会触发 "),a("code",[s._v("change")]),s._v(" 事件，#2167")]),a("li",[s._v("修复 DatePicker 选择下一年时，年份计算错误，#2152")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("default-sort-prop")]),s._v(" 和 "),a("code",[s._v("default-sort-order")]),s._v(" 属性，#2182（by @njleonzhang）")]),a("li",[s._v("修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196")]),a("li",[s._v("新增自定义 i18n 处理方法，方便和除了 "),a("code",[s._v("vue-i18n")]),s._v(" 之外的插件使用，#2129")]),a("li",[s._v("新增 Input "),a("code",[s._v("resize")]),s._v(" 属性，#2263（by @Kingwl）")]),a("li",[s._v("修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247")]),a("li",[s._v("修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl）")]),a("li",[s._v("修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("修复 Vue 2.1.7 升级导致的 Table "),a("code",[s._v("sortable")]),s._v(" 和 "),a("code",[s._v("fixed")]),s._v(" 无法使用的问题")]),a("li",[s._v("修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098")]),a("li",[s._v("移除 Collapse 的 "),a("code",[s._v("title")]),s._v(" scoped slot, 并新增 "),a("code",[s._v("title")]),s._v(" named slot，#2100")]),a("li",[s._v("修复 TimePicker 范围选择无法使用的问题")]),a("li",[s._v("修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106")]),a("li",[s._v("修复 Select 在使用方向键导航时控制台报错的问题，#2120")]),a("li",[s._v("修复 Form 中可搜索的 Select 验证时机错误的问题，#2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("修复由于编译而出现的不兼容新版 Vue 的问题")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"xin-te-xing-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Carousel、Collapse 组件")]),a("li",[s._v("支持 SSR")]),a("li",[s._v("组件内的滚动条样式优化")]),a("li",[s._v("Table 支持通过 "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped Slots")]),s._v(" 传入模板；原来的 "),a("code",[s._v("inline-template")]),s._v(" 仍然兼容，但是不再推荐使用，未来可能会被移除")]),a("li",[s._v("Table 支持展开行功能(Expandable rows)")]),a("li",[s._v("DatePicker 支持指定周起始日(first day of week)")]),a("li",[s._v("TimeSelect 支持设置 "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete 新增 "),a("code",[s._v("popper-class")]),s._v("属性")]),a("li",[s._v("Tab-Pane 新增 name 为 label 的具名 "),a("code",[s._v("slot")]),s._v("，用于实现自定义标签内容")])]),a("h4",{attrs:{id:"xiu-fu-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("DatePicker 的 "),a("code",[s._v("change")]),s._v(" 事件错误地触发多次的问题，#2070")]),a("li",[s._v("Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新：")]),a("ul",[a("li",[s._v("最低兼容 Vue 2.1.6")]),a("li",[s._v("Form validateField() 方法回调的参数更新")]),a("li",[s._v("Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入")]),a("li",[s._v("Input 和 Select 盒模型从 "),a("code",[s._v("block")]),s._v(" 修改为 "),a("code",[s._v("inline-block")])]),a("li",[s._v("Tabs 盒模型从 "),a("code",[s._v("inline-block")]),s._v(" 修改为 "),a("code",[s._v("block")]),s._v("，Tab-Pane 移除 "),a("code",[s._v("label-content")]),s._v(" 属性")]),a("li",[s._v("Autocomplete 下拉列表现在直接插入到 "),a("code",[s._v("<body>")]),s._v(" 标签下，而不是 "),a("code",[s._v("<el-autocomplete>")]),s._v(" 下")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834")]),a("li",[s._v("修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("change")]),s._v(" 事件，返回和输入框一致的格式化后的值，#1841")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("header-align")]),s._v(" 属性，#1424")]),a("li",[s._v("修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890")]),a("li",[s._v("修复可搜索的 Select 在选项较多时的卡顿问题，#1933")]),a("li",[s._v("修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001")]),a("li",[s._v("修复 Col "),a("code",[s._v("xs")]),s._v(" 分辨率下样式无效的问题，#2011")]),a("li",[s._v("新增 Tab 组件的 "),a("code",[s._v("value")]),s._v(" 属性并支持 "),a("code",[s._v("v-model")]),s._v(" 用法，#2008")]),a("li",[s._v("修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("clearable")]),s._v(" 属性，#1994")]),a("li",[s._v("修复 Form 异步验证时某些条件下总是验证通过的问题，#1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("修复 Popup 在叠加使用时阻止事件冒泡，#1677")]),a("li",[s._v("修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758")]),a("li",[s._v("修复 Slider 的 "),a("code",[s._v("change")]),s._v(" 事件不能正确触发的问题，#1809")]),a("li",[s._v("修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786")]),a("li",[s._v("新增 Select 的 "),a("code",[s._v("loading-text")]),s._v("、"),a("code",[s._v("no-data-text")]),s._v("、"),a("code",[s._v("no-match-text")]),s._v(" 属性和 "),a("code",[s._v("visible-change")]),s._v(" 事件，#1849")]),a("li",[s._v("新增 DatePicker、Select 和 Tooltip 的 "),a("code",[s._v("popper-class")]),s._v(" 属性，#1806")]),a("li",[s._v("新增 Tree 的 "),a("code",[s._v("expand-on-click-node")]),s._v("、"),a("code",[s._v("current-node-key")]),s._v(" 属性和 "),a("code",[s._v("current-change")]),s._v(" 事件，#1805 #1807")]),a("li",[s._v("新增 Table "),a("code",[s._v("row-click")]),s._v(" 事件的第三个参数 "),a("code",[s._v("column")]),s._v("，#1808")]),a("li",[s._v("修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860")]),a("li",[s._v("新增 TabPanel "),a("code",[s._v("label-content")]),s._v(" 渲染钩子方法中增加 tab 实例的参数，#1857")]),a("li",[s._v("新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851")]),a("li",[s._v("新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818")]),a("li",[s._v("新增 Progress 的 "),a("code",[s._v("onProgress")]),s._v(" 钩子函数，#1782")]),a("li",[s._v("修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("filter-change")]),s._v(" 事件和 TableColumn 的 "),a("code",[s._v("column-key")]),s._v(" 属性，#1876")]),a("li",[s._v("新增 Dropdown "),a("code",[s._v("hide-on-click")]),s._v(" 属性，#1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框")]),a("li",[s._v("修复 DatePicker 设置默认值为 null 会错误地显示时间值")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("row-contextmenu")]),s._v(" 事件和 "),a("code",[s._v("max-height")]),s._v(" 属性，#1663 #1674")]),a("li",[s._v("新增 MessageBox 的 "),a("code",[s._v("customClass")]),s._v(" 属性，#1707")]),a("li",[s._v("新增 Message 和 Notification 的 "),a("code",[s._v("iconClass")]),s._v(" 和 "),a("code",[s._v("customClass")]),s._v(" 属性，#1671")]),a("li",[s._v("新增 Table 支持 empty slot，#1737")]),a("li",[s._v("改进 InputNumber change 事件增加 old value 的参数")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("新增 Tabs 组件的 "),a("code",[s._v("disabled")]),s._v(" 属性，#1620")]),a("li",[s._v("新增 DatePicker 的 input 支持 "),a("code",[s._v("size")]),s._v("，#1440")]),a("li",[s._v("修复 DatePicker 为 "),a("code",[s._v("datetimerange")]),s._v(" 类型并设置初始值时，面板未显示正确日期的问题，#1129")]),a("li",[s._v("修复 DatePicker 切换年份时显示异常的问题，#1607")]),a("li",[s._v("修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604")]),a("li",[s._v("修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583")]),a("li",[s._v("修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593")]),a("li",[s._v("修复 Select 为 "),a("code",[s._v("disabled")]),s._v(" 时，"),a("code",[s._v("clearable")]),s._v(" 仍然可以工作的问题，#1619")]),a("li",[s._v("修复 自定义背景颜色的 Switch 在动态切换 "),a("code",[s._v("disabled")]),s._v(" 时，背景颜色错误的问题，#1627")]),a("li",[s._v("修复 Table 的一些样式问题")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537")]),a("li",[s._v("修复 Select 的初始值为一个空对象时会报错的问题，#1533")]),a("li",[s._v("修复 Select 远程搜索有时不显示下拉框的问题，#1531")]),a("li",[s._v("修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546")]),a("li",[s._v("修复 IE9 下 Steps 的样式问题，#1543")]),a("li",[s._v("新增 Upload 对所有文件类型生成 URL 的功能，#1530")]),a("li",[s._v("修复 TimeSelect 的样式，移除 flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("新增 Input Number 的 "),a("code",[s._v("controls")]),s._v(" 属性，#1473")]),a("li",[s._v("修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514")]),a("li",[s._v("增加 Notification 的 "),a("code",[s._v("offset")]),s._v(" 属性，#1419")]),a("li",[s._v("修复 Slider 在快速拖动时取值不准确的问题，#1458")]),a("li",[s._v("修复 Slider 在某些情况下绑定值为多位小数的问题，#1450")]),a("li",[s._v("修复 Select 在某些情况下绑定值和显示值不同步的问题")]),a("li",[s._v("新增 Select 的 "),a("code",[s._v("multiple-limit")]),s._v(" 和 "),a("code",[s._v("allow-create")]),s._v(" 属性")]),a("li",[s._v("修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438")]),a("li",[s._v("修复 Tree 有时在获取子级数据后视图不更新的问题，#1439")]),a("li",[s._v("修复 Table 在 windows 系统下的若干样式问题，#1464 #1507")]),a("li",[s._v("修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("row-dblclick")]),s._v(" 事件，#1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("修复 Pagination 的 "),a("code",[s._v("currentPage")]),s._v(" 在某些情况下设置无效的情况，#1336")]),a("li",[s._v("修复 DatePicker 为 "),a("code",[s._v("month")]),s._v(" 且设置了 "),a("code",[s._v("disabledDate")]),s._v(" 的情况下切换年份时界面未更新的问题，#1158")]),a("li",[s._v("修复 DatePicker readonly 时未禁用清除按钮的问题，#1238")]),a("li",[s._v("修复 Slider 绑定值为 "),a("code",[s._v("NaN")]),s._v(" 以及 "),a("code",[s._v("step")]),s._v(" 小于 1 时无法正常工作的问题，#1239 #1282")]),a("li",[s._v("增加 Table 的多表头功能，#1312")]),a("li",[s._v("增加 Table 的 "),a("code",[s._v("rowStyle")]),s._v(" 属性，#1348")]),a("li",[s._v("修复 TableColumn 的某些属性无法动态设置的问题，#1314")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("filter-node-method")]),s._v(" 属性和 "),a("code",[s._v("filter")]),s._v(" 方法，#1257")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("getCheckedKeys")]),s._v(" 和 "),a("code",[s._v("setCheckedKeys")]),s._v(" 方法，#1254")]),a("li",[s._v("重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152")]),a("li",[s._v("修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359")]),a("li",[s._v("增加 Form 中深对象验证的支持，#1363")]),a("li",[s._v("增加 Autocomplete 里的 "),a("code",[s._v("append")]),s._v(" 和 "),a("code",[s._v("prepend")]),s._v(" API，#1369")]),a("li",[s._v("增加 Pagination "),a("code",[s._v("pageSizes")]),s._v(" 属性的动态支持，#1372")]),a("li",[s._v("增加 Radio Button 自定义选中按钮样式的 API，#1380")]),a("li",[s._v("增加 Menu Group 支持通过 slot 来设置 title，#1382")]),a("li",[s._v("修复 DatePicker 选择年的 bug，#1385")]),a("li",[s._v("新增 Upload 默认已上传的文件列表 API，#1393")]),a("li",[s._v("增加 Checkbox "),a("code",[s._v("label")]),s._v(" 属性绑定的多类型支持，#1400")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("setChecked")]),s._v(" 方法，#1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("新增 Table "),a("code",[s._v("context")]),s._v(" 属性，可以指定自定义 column 内部可获取的上下文，#1161")]),a("li",[s._v("新增 多种语言支持")]),a("li",[s._v("修复 没有正确动态渲染语言的问题，#1160")]),a("li",[s._v("新增 Alert 的 "),a("code",[s._v("render-content")]),s._v(" 属性，#568")]),a("li",[s._v("新增 Button 的 focus 样式，#982")]),a("li",[s._v("修复 Switch 的 "),a("code",[s._v("change")]),s._v(" 事件触发时机错误的问题，#1162")]),a("li",[s._v("修复 TimeSelect 开始时间设置 "),a("code",[s._v("00:00")]),s._v(" 后会被禁用的问题，#676")]),a("li",[s._v("新增 Table "),a("code",[s._v("show-header")]),s._v(" 属性，"),a("code",[s._v("header-click")]),s._v(" 事件。#1195")]),a("li",[s._v("完善 Table 的 "),a("code",[s._v("height")]),s._v(" 属性，当 "),a("code",[s._v("height")]),s._v(" 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195")]),a("li",[s._v("修复 Table 的 "),a("code",[s._v("selection-change")]),s._v(" 在某些情况下不触发的问题，#1198")]),a("li",[s._v("修复 Table 动态修改 "),a("code",[s._v("fixed")]),s._v(" 属性可能会造成锁定列不消失的问题，#1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("修复 Pagination 错误地多次触发 "),a("code",[s._v("current-change")]),s._v(" 事件的问题")]),a("li",[s._v("修复 Switch 在 Form 中的样式错误，#967")]),a("li",[s._v("修复 Loading 在某些情况下错误地锁定 "),a("code",[s._v("body")]),s._v(" 滚动的问题，#968")]),a("li",[s._v("Col 组件的 "),a("code",[s._v("span")]),s._v(" 属性不再是必填属性，在省略的情况下其默认值为 "),a("code",[s._v("24")])]),a("li",[s._v("新增 DatePicker "),a("code",[s._v("disabled")]),s._v(" 和 "),a("code",[s._v("editable")]),s._v(" 属性，#976")]),a("li",[s._v("修复 DatePicker 的 "),a("code",[s._v("readonly")]),s._v(" 与原生行为一致，现在通过设置 editable=false 禁止输入但是可通过弹框选日期，#976")]),a("li",[s._v("新增 Message 和 Notification 的 "),a("code",[s._v("close")]),s._v(" 方法，用于手动关闭实例")]),a("li",[s._v("新增 DatePicker 清除功能，#759")]),a("li",[s._v("修复 Form 重置日期报错，#937")]),a("li",[s._v("修复 Tab 设置active-name不是首个tab时的样式问题，#1034")]),a("li",[s._v("修复 Table 的 inline-template 在 vue-loader 9.9.0 渲染报错")]),a("li",[s._v("新增 Step 支持内容居中对齐，#994")]),a("li",[s._v("修复 Upload 单独引入时提示 Progress 组件不存在，#1013")]),a("li",[s._v("Layout 支持响应式布局")]),a("li",[s._v("新增 Dialog "),a("code",[s._v("show-close")]),s._v(" 属性")]),a("li",[s._v("修复 和 "),a("code",[s._v("vue-i18n")]),s._v(" 一起使用时，未初始化 i18n 会报错，#973")]),a("li",[s._v("修复 DatePicker 设置初始值后界面未更新 #1050")]),a("li",[s._v("修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070")]),a("li",[s._v("新增 $loading 服务，用以调用 Loading")]),a("li",[s._v("新增 Popover 可手动控制显示隐藏，将 trigger 设置为 "),a("code",[s._v("manual")])]),a("li",[s._v("新增 Tree 的 "),a("code",[s._v("nodeKey")]),s._v("、"),a("code",[s._v("emptyText")]),s._v("、"),a("code",[s._v("checkStrictly")]),s._v("、"),a("code",[s._v("defaultExpandAll")]),s._v("、"),a("code",[s._v("autoExpandParent")]),s._v("、"),a("code",[s._v("defaultCheckedKeys")]),s._v("、"),a("code",[s._v("defaultExpandedKeys")]),s._v(" 属性，"),a("code",[s._v("setCheckedNodes")]),s._v(" 方法。")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("ul",[a("li",[s._v("修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894")]),a("li",[s._v("修复结合 "),a("code",[s._v("vue-i18n")]),s._v(" 使用时会提示不能覆盖 "),a("code",[s._v("$t")]),s._v(" 方法的问题")]),a("li",[s._v("新增 Loading 自定义加载文案的功能，并优化了视觉表现")]),a("li",[s._v("修复 Input blur 事件的参数不是 event 对象的问题")]),a("li",[a("code",[s._v("window.ELEMENT.locale.use")]),s._v(" 改成 "),a("code",[s._v("window.ELEMENT.locale")])])]),a("h3",{attrs:{id:"1-0-0-rc-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.9")]),a("p",[a("em",[s._v("2016-11-07")])]),a("ul",[a("li",[s._v("新增 MessageBox 确定按钮自动获取焦点, #721")]),a("li",[s._v("修复 Popover focus 失效, #734")]),a("li",[s._v("修复 Clickoutside 报错, #729")]),a("li",[s._v("修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错")]),a("li",[s._v("更新 TimePicker 滚动条在 IE10+ 下隐藏")]),a("li",[s._v("新增 Dropdown 的 command api #432")]),a("li",[s._v("修复 Slider 在 Form 中的显示问题")]),a("li",[s._v("修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题")]),a("li",[s._v("改善 tabs 现在支持动态更新")]),a("li",[s._v("Table 新增 highlightCurrentRow 属性、新增 current-change 事件")]),a("li",[s._v("TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）")]),a("li",[s._v("TableColumn 新增属性 render-header")]),a("li",[s._v("Pagination 新增属性 pageCount")]),a("li",[s._v("DatePicker 修复重置 value 后默认选中日期没有重置, #878")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)")])]),a("h3",{attrs:{id:"1-0-0-rc-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.8")]),a("p",[a("em",[s._v("2016-10-28")])]),a("ul",[a("li",[s._v("修复 Form reset method 对日期控件不起效的问题")]),a("li",[s._v("修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误")]),a("li",[s._v("修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题")]),a("li",[s._v("修复 Autocomplete 的弹出框不会消失 #439")]),a("li",[s._v("新增 Input 图标的点击事件 #444")]),a("li",[s._v("修复 Loading 关闭后有几率滚动失效的问题")]),a("li",[s._v("修复 远程搜索的 Select 不能正确渲染默认初始值的问题")]),a("li",[s._v("修复 Switch 的 width 属性无效的问题")]),a("li",[s._v("Table 增加 rowClassName 属性")]),a("li",[s._v("TableColumn 增加 fixed 属性，可选值：true, false, left, right")]),a("li",[s._v("TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue")]),a("li",[s._v('TableColumn[type="selection"] 增加 selectable 属性')]),a("li",[s._v("修复 Input textarea 在动态赋值时 autosize 没有触发的问题")]),a("li",[s._v("修复 Input Number min max 属性设置后点击加减出现的崩溃的bug")]),a("li",[s._v("优化 TimePicker/DatePicker 输入日期行为")]),a("li",[s._v("修复 DatePicker 输入禁用状态的日期却生效的问题 #484")]),a("li",[s._v("新增 Slider 的 disabled 属性")]),a("li",[s._v("新增 Menu 的 menu-trigger 属性")]),a("li",[s._v("新增 i18n 的支持")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例")]),a("li",[s._v("全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 "),a("code",[s._v("lock")]),s._v(" 修饰符")]),a("li",[s._v("Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode")]),a("li",[s._v("Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。")]),a("li",[s._v("Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change")])]),a("h3",{attrs:{id:"1-0-0-rc-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.7")]),a("p",[a("em",[s._v("2016-10-13")])]),a("ul",[a("li",[s._v("Upload 新增 Data 属性支持额外数据的传输")]),a("li",[s._v("DatePicker 修复 "),a("code",[s._v("$t")]),s._v(" 报错")]),a("li",[s._v("Popper 重构 vue-popper")]),a("li",[s._v("Pagination 修复输入后再点击切换，输入框的值不更新")]),a("li",[s._v("Step: 修复自定义 icon 的样式")]),a("li",[s._v("修复 Tree 组件 checkbox 点击失效的问题")]),a("li",[s._v("Breadcrumb 增加路由跳转的功能")]),a("li",[s._v("修复 可清空的 Select 中清空按钮的不恰当动画")]),a("li",[s._v("DatePicker 修复使用 Tab 键切换时弹出框未隐藏")])]),a("h3",{attrs:{id:"1-0-0-rc-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.6")]),a("p",[a("em",[s._v("2016-10-11")])]),a("ul",[a("li",[s._v("修复 Tabs 切换后 Tab-panel 被销毁的问题")]),a("li",[s._v("修复 TimePicker 错误的隐藏面板")]),a("li",[s._v("修复 Table Cell 的样式, #204")]),a("li",[s._v("修复 Menu default-active 属性不能为空的问题, #200")]),a("li",[s._v("修复 Menu unique-opened 开启后无法展开子菜单的问题, #200")]),a("li",[s._v("为 Notification 和 Message 的不同 type 添加独立的调用方法")]),a("li",[s._v("为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定")]),a("li",[s._v("新增 Input textarea 类型的 rows, autosize 属性")]),a("li",[s._v("为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调")]),a("li",[s._v("新增 DatePicker 禁用日期功能 #253")]),a("li",[s._v("修复 多选可搜索的 Select 下拉选项自动展开的问题")]),a("li",[s._v("为 Dialog 添加 top 属性")]),a("li",[s._v("修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295")]),a("li",[s._v("Checkbox change 事件现在只能被人为的交互操作所触发")]),a("li",[s._v("新增 Checkbox checked 属性")]),a("li",[s._v("修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式")])]),a("h3",{attrs:{id:"1-0-0-rc-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.5")]),a("p",[a("em",[s._v("2016-09-30")])]),a("ul",[a("li",[s._v("修复 Table 头部不同步的问题")]),a("li",[s._v("修复 Menu 组件 default-active 绑定动态值无法更新的问题")]),a("li",[s._v("新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单")]),a("li",[s._v("修复 vue-popper 引入 popper 路径错误")]),a("li",[s._v("修复 DatePicker 初始值是合法时间类型但无法设置成功的问题")]),a("li",[s._v("修复 Pagination 的图标没有正确切换样式, #163")]),a("li",[s._v("修复 Row 组件 align 属性不生效的问题")]),a("li",[s._v("修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题")]),a("li",[s._v("新增 Menu 组件中 MenuItem 的 route 属性")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Menu 组件的 "),a("code",[s._v("unique-opend")]),s._v(" 属性修正为 "),a("code",[s._v("unique-opened")])])]),a("h3",{attrs:{id:"1-0-0-rc-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.4")]),a("p",[a("em",[s._v("2016-09-21")])]),a("ul",[a("li",[s._v("修复 Select 多选时选项变为空数组后 placeholder 不出现的问题")]),a("li",[s._v("修复 Time Picker 时间选择可滚动")]),a("li",[s._v("修复 Tooltip 有时会错位的问题")]),a("li",[s._v("修复 丢失的组件 css 文件")]),a("li",[s._v("修复 Table 在 Safari 下边框没对齐")]),a("li",[s._v("修复 TimePicker 图标样式被默认图标样式覆盖")]),a("li",[s._v("修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题")]),a("li",[s._v("修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题")]),a("li",[s._v("修复 Table 初次渲染时宽度重新计算 #78")]),a("li",[s._v("新增 时间、日期选择器增加 align 属性，可设置对齐方式")]),a("li",[s._v("新增 TableColumn 的 align 属性")]),a("li",[s._v("新增 autocomplete 的 select 事件")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Select 组件样式的 "),a("code",[s._v("display")]),s._v(" 属性默认值修改为 "),a("code",[s._v("block")])])]),a("h3",{attrs:{id:"1-0-0-rc-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.3")]),a("p",[a("em",[s._v("2016-09-09")])]),a("ul",[a("li",[s._v("修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题")]),a("li",[s._v("修复 Steps 样式")]),a("li",[s._v("修复 无法安装的问题")])]),a("h3",{attrs:{id:"1-0-0-rc-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.2")]),a("p",[a("em",[s._v("2016-09-09")])]),a("ul",[a("li",[s._v("修复 Upload 上传的问题，并增加上传成功和失败的钩子函数")]),a("li",[s._v("Button 组件增加 "),a("code",[s._v("nativeType")]),s._v(" 属性，用于组件内 "),a("code",[s._v("<button>")]),s._v(" 标签的原生 "),a("code",[s._v("type")]),s._v(" 属性，默认值为 "),a("code",[s._v("button")])]),a("li",[s._v("修复 Table 自定义模板中渲染静态数据错误")]),a("li",[s._v("修复 Table 中被固定列的高度不与其他列的高度协调的问题")]),a("li",[s._v("修复 Time Picker 的 "),a("code",[s._v("picker-options")]),s._v(" 属性")]),a("li",[s._v("修复一些组件图标丢失的问题")]),a("li",[s._v("修复 远程搜索的 Select 在 Form 中的显示问题")]),a("li",[s._v("修复 Input Number 输入小数和非数字值时的问题")]),a("li",[s._v("修复 Select 选中 value 为 0 的值时绑定值不更新的问题")]),a("li",[s._v("修复 Tree 取消选择某节点后，其同级节点均被取消的问题")]),a("li",[s._v("修复 Upload 的 headers 属性设置无效")]),a("li",[s._v("修复 Pagination 包含 sizes 子组件时 page-size 无效的问题")]),a("li",[s._v("优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Menu 组件 "),a("code",[s._v("mode")]),s._v(" 属性默认值修改为 "),a("code",[s._v("vertical")])]),a("li",[s._v("Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档")]),a("li",[s._v("Popover 现在可以通过 slot 指定 reference")])]),a("h3",{attrs:{id:"1-0-0-rc-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.1")]),a("p",[a("em",[s._v("2016-08-30")])]),a("p",[s._v("Element 1.0.0-rc.1 发布")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n    更新日志\n  ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/alert.md":56,"./en-US/badge.md":60,"./en-US/breadcrumb.md":65,"./en-US/button.md":68,"./en-US/card.md":73,"./en-US/carousel.md":81,"./en-US/cascader.md":85,"./en-US/checkbox.md":89,"./en-US/collapse.md":93,"./en-US/color-picker.md":97,"./en-US/color.md":101,"./en-US/custom-theme.md":104,"./en-US/date-picker.md":107,"./en-US/datetime-picker.md":111,"./en-US/dialog.md":115,"./en-US/dropdown.md":119,"./en-US/form.md":123,"./en-US/home.md":129,"./en-US/i18n.md":134,"./en-US/icon.md":137,"./en-US/input-number.md":142,"./en-US/input.md":146,"./en-US/installation.md":152,"./en-US/layout.md":155,"./en-US/loading.md":158,"./en-US/menu.md":162,"./en-US/message-box.md":166,"./en-US/message.md":170,"./en-US/notification.md":174,"./en-US/pagination.md":178,"./en-US/popover.md":182,"./en-US/progress.md":186,"./en-US/quickstart.md":189,"./en-US/radio.md":192,"./en-US/rate.md":196,"./en-US/select.md":200,"./en-US/slider.md":204,"./en-US/steps.md":208,"./en-US/switch.md":212,"./en-US/table.md":216,"./en-US/tabs.md":220,"./en-US/tag.md":224,"./en-US/time-picker.md":228,"./en-US/tooltip.md":232,"./en-US/transfer.md":238,"./en-US/transition.md":242,"./en-US/tree.md":246,"./en-US/typography.md":250,"./en-US/upload.md":253,"./zh-CN/alert.md":257,"./zh-CN/badge.md":263,"./zh-CN/breadcrumb.md":270,"./zh-CN/button.md":273,"./zh-CN/card.md":279,"./zh-CN/carousel.md":285,"./zh-CN/cascader.md":291,"./zh-CN/checkbox.md":297,"./zh-CN/collapse.md":303,"./zh-CN/color-picker.md":309,"./zh-CN/color.md":315,"./zh-CN/custom-theme.md":320,"./zh-CN/date-picker.md":323,"./zh-CN/datetime-picker.md":329,"./zh-CN/dialog.md":335,"./zh-CN/dropdown.md":341,"./zh-CN/form.md":347,"./zh-CN/home.md":353,"./zh-CN/i18n.md":357,"./zh-CN/icon.md":362,"./zh-CN/input-number.md":368,"./zh-CN/input.md":374,"./zh-CN/installation.md":380,"./zh-CN/layout.md":383,"./zh-CN/loading.md":388,"./zh-CN/menu.md":394,"./zh-CN/message-box.md":400,"./zh-CN/message.md":404,"./zh-CN/notification.md":408,"./zh-CN/pagination.md":412,"./zh-CN/popover.md":418,"./zh-CN/progress.md":424,"./zh-CN/quickstart.md":429,"./zh-CN/radio.md":432,"./zh-CN/rate.md":436,"./zh-CN/select.md":442,"./zh-CN/slider.md":448,"./zh-CN/steps.md":454,"./zh-CN/switch.md":458,"./zh-CN/table.md":464,"./zh-CN/tabs.md":470,"./zh-CN/tag.md":474,"./zh-CN/time-picker.md":480,"./zh-CN/tooltip.md":486,"./zh-CN/transfer.md":492,"./zh-CN/transition.md":498,"./zh-CN/tree.md":504,"./zh-CN/typography.md":510,"./zh-CN/upload.md":515};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=55},function(s,t,a){s.exports=a(57)},function(s,t,a){var l=a(13)(a(58),a(59),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{
+staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("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() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"unclosable alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"customized close-text"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"alert with callback"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      hello() {\n        alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Description includes a message with more detailed information.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"with description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"This is a description."')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(61)},function(s,t,a){function l(s){a(62)}var n=a(13)(null,a(64),l,"data-v-01b04186",null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      comments\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      replies\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      comments\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      replies\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(66)},function(s,t,a){var l=a(13)(null,a(67),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",[s._v("to")]),s._v(" of "),a("code",[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(69)},function(s,t,a){var l=a(13)(a(70),a(72),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={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"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("Default Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text"}},[s._v("Text Button")])],1),a("p",[s._v("Button provides 7 themes defined by the "),a("code",[s._v("type")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Different colors represent different meanings.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hover to display color")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("Success")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("Info")])],1)])]),a("p",[s._v("Use "),a("code",[s._v("plain")]),s._v(" attribute to create a plain button, and it accepts a "),a("code",[s._v("Boolean")]),s._v(" value. You can assign different "),a("code",[s._v("type")]),s._v(" to a plain button as mentioned above. "),a("strong",[s._v("Note")]),s._v(": When using the plain button, you still can set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("text")]),s._v(", but it makes no difference. A plain button will be styled like a "),a("code",[s._v("text button")]),s._v(" by default.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hover to display color"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),a("code",[s._v("<i>")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("<el-button-group>")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">Loading</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("Large Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("Small Button")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("Mini Button")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("Large Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Small Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("Mini Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("disableds")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"color-indication"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-indication","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color Indication")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary/success/warning/danger/info/text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("button icon, accepts an icon name of Element icon component")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button/submit/reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(74)},function(s,t,a){function l(s){a(75)}var n=a(13)(a(77),a(79),l,"data-v-10f2e1a8",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(78),e=l(n);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("Integrate information in a card container.")]),s._m(1),l("p",[s._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",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("Card name")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("Operation button")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("List item "+t)+"\n  ")])})],2)],1),l("p",[s._v("Card is made up of "),l("code",[s._v("header")]),s._v(" and "),l("code",[s._v("body")]),s._v(". "),l("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("Card name"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Operation button"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._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",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("List item "+t)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._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() {\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",slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{key:t,attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(80)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("The "),l("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),l("code",[s._v("body")]),s._v(". This example also uses "),l("code",[s._v("el-col")]),s._v(" for layout.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},function(s,t,a){s.exports=a(82)},function(s,t,a){var l=a(13)(a(83),a(84),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._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",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{
+staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._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",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",[s._v("name")]),s._v(" of corresponding "),a("code",[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(86)},function(s,t,a){var l=a(13)(a(87),a(88),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("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() {\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(value) {\n        console.log(value);\n      }\n    }\n  };\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("Assigning the "),a("code",[s._v("options")]),s._v(" attribute to an array of options renders a Cascader. The "),a("code",[s._v("expand-trigger")]),s._v(" attribute defines how child options are expanded. This example also demonstrates the "),a("code",[s._v("change")]),s._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n  export default {\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("In this example, the first item in "),a("code",[s._v("options")]),s._v(" array has a "),a("code",[s._v("disabled: true")]),s._v(" field, so it is disabled. By default, Cascader checks the "),a("code",[s._v("disabled")]),s._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 "),a("code",[s._v("props")]),s._v(" attribute (see the API table below for details). And of course, field name "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("children")]),s._v(" can also be customized in the same way.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("The "),a("code",[s._v("show-all-levels")]),s._v(" attribute defines if all levels are displayed. If it is "),a("code",[s._v("false")]),s._v(", only the last level is displayed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Parent options can also be selected.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("By default only the options in the last level can be selected. By assigning "),a("code",[s._v("change-on-select")]),s._v(" to "),a("code",[s._v("true")]),s._v(", options in parent levels can also be selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Load child options when their parent option is clicked or hovered over.")]),a("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() {\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(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("In this example, the options array does not have data of cities when initialized. With the "),a("code",[s._v("active-item-change")]),s._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),a("code",[s._v("props")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n        }\n      };\n    },\n    \n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleItemChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v("\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Orlando'")]),s._v("\n            }];\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Search and select options with a keyword.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-cascader")]),s._v(" enables filtering")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"display-only-the-last-level"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[s._v("¶")]),s._v(" Display only the last level")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" With default value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dynamically-load-child-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dynamically load child options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("data of the options")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("selected value")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Cascader's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("input placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Cascader is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether selected value can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("trigger mode of expanding current item")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("whether to display all levels of the selected value in the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether the options can be searched")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing filter keyword, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of option object is used as the option's child options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of option object indicates if the option is disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("triggers when active option changes, only works when "),a("code",[s._v("change-on-select")]),s._v(" is "),a("code",[s._v("false")])]),a("td",[s._v("an array of active options")])])])])}]}},function(s,t,a){s.exports=a(90)},function(s,t,a){var l=a(13)(a(91),a(92),null,null,null);s.exports=l.exports},function(s,t){"use strict";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){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t<this.cities.length}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A group of options for multiple choices.")]),s._m(1),a("p",[s._v("Checkbox can be used alone to switch between two states.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <!-- `checked` should be true or false -->\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",slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected. Content inside the "),a("code",[s._v("el-checkbox")]),s._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` should be true or false -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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",slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("Option")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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",slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},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",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option B"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'Option A'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._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  const 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(event) {\n        this.checkedCities = event.target.checked ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let 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",slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Check all"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n        "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckAllChange(event) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      handleCheckedCitiesChange(value) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._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  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['Shanghai'],\n        checkboxGroup2: ['Beijing'],\n        checkboxGroup3: ['Guangzhou'],\n        cities: cityOptions\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Shenzhen"===t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"large",fill:"#324057","text-color":"#a4aebd",min:1,max:3},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("p",[s._v("You just need to change "),a("code",[s._v("<el-checkbox>")]),s._v(" element into "),a("code",[s._v("<el-checkbox-button>")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === 'Shenzhen'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("fill")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#324057"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#a4aebd"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("min")]),s._v(" and "),a("code",[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",[s._v("checkbox-group")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("if the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of checkbox buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("Event object")])])])])}]}},function(s,t,a){s.exports=a(94)},function(s,t,a){var l=a(13)(a(95),a(96),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("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() {\n      return {\n        activeNames: ['1']\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{
+staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("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() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[s._v("\n      Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n      Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",[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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(98)},function(s,t,a){var l=a(13)(a(99),a(100),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("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() {\n      return {\n        color1: '#20a0ff',\n        color2: null\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])])])])}]}},function(s,t,a){s.exports=a(102)},function(s,t,a){var l=a(13)(null,a(103),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}]}},function(s,t,a){s.exports=a(105)},function(s,t,a){var l=a(13)(null,a(106),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._v("Element 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.")]),a("h2",{attrs:{id:"changing-theme-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),a("p",[s._v("If you just want to change the theme color of Element, the "),a("a",{attrs:{href:"https://elementui.github.io/theme-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended.")]),a("p",[s._v("The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),a("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).")]),a("h2",{attrs:{id:"more-customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" More customizations")]),a("p",[s._v("If you need more customization than just changing the theme color, please follow these steps:")]),a("h3",{attrs:{id:"install-related-tool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" Install related tool")]),a("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.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the default theme from npm or GitHub.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("In "),a("code",[s._v("element-variables.css")]),s._v(" you can find all the variables we used to style Element and they are defined in CSS4 style:")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n  "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n  -------------------------- */")]),s._v("\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"modify-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modify variables")]),a("p",[s._v("Just edit "),a("code",[s._v("element-variables.css")]),s._v(", e.g. changing the theme color to red:")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"build-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Build theme")]),a("p",[s._v("After saving the variable file, use "),a("code",[s._v("et")]),s._v(" to build your theme. You can activate "),a("code",[s._v("watch")]),s._v(" mode by adding a parameter "),a("code",[s._v("-w")]),s._v(". And if you customized the variable file's output, you need to add a parameter "),a("code",[s._v("-c")]),s._v(" and variable file's name:")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),a("p",[s._v("By default the build theme file is placed inside "),a("code",[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",[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:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),a("p",[s._v("If you are using "),a("code",[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",[s._v(".babelrc")]),s._v(" and specify "),a("code",[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",[s._v(".babelrc")]),s._v(". Note that "),a("code",[s._v("~")]),s._v(" is required:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",[s._v("element-theme")]),s._v(".")])])}]}},function(s,t,a){s.exports=a(108)},function(s,t,a){var l=a(13)(a(109),a(110),null,null,null);s.exports=l.exports},function(s,t){"use strict";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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("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() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const 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(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("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() {\n      return {\n        value3: '',\n        value4: '',\n        value5: ''\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Week WW"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("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() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"daterange",placeholder:"Pick a range"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"Pick a range","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional default time of the picker")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",[s._v("new Date()")])]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the seleted date is changed. Only for "),a("code",[s._v("daterange")]),s._v(" and "),a("code",[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(112)},function(s,t,a){var l=a(13)(a(113),a(114),null,null,null);s.exports=l.exports},function(s,t){"use strict";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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),a("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() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const 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(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetimerange",placeholder:"Select time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"Select time range",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(116)},function(s,t,a){var l=a(13)(a(117),a(118),null,null,null);s.exports=l.exports},function(s,t){"use strict";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:{openDialog:function(){this.$refs.dialogBind.open()},handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("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" v-model="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() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure to close this dialog?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{attrs:{title:"Tips",size:"tiny","before-close":s.handleClose},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("v-model")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. This example explicitly changes the value of "),a("code",[s._v("v-model")]),s._v(" to toggle Dialog. In addition, we also provide "),a("code",[s._v("open")]),s._v(" and "),a("code",[s._v("close")]),s._v(" method, which you can call to open/close the Dialog. Finally, this example demonstrates how "),a("code",[s._v("before-close")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(done) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n          .then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n            done();\n          })\n          .catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {});\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="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<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address"},model:{value:s.dialogTableVisible,callback:function(t){s.dialogTableVisible=t},expression:"dialogTableVisible"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address"},model:{value:s.dialogFormVisible,callback:function(t){s.dialogFormVisible=t},expression:"dialogFormVisible"}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- Table -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- Form -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zones"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",[s._v("top")]),s._v(" of Dialog CSS, works when "),a("code",[s._v("size")]),s._v(" is not "),a("code",[s._v("full")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),a("td",[s._v("function(done)，done is used to close the Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Each "),a("code",[s._v("el-dialog")]),s._v(" instance has the following methods that can be used to open/close the instance without explicitly changing the value of "),a("code",[s._v("v-model")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("open the current instance")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the current instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(120)},function(s,t,a){var l=a(13)(a(121),a(122),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n  Dropdown List\n  "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("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 "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n  Dropdown List\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{
+staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("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(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu button size, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("component size, refer to "),a("code",[s._v("Button")]),s._v(" component")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("horizontal alignment")]),a("td",[s._v("string")]),a("td",[s._v("start/end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(124)},function(s,t,a){function l(s){a(125)}var n=a(13)(a(127),a(128),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3):a(new Error("Please input the age"))},a=function(t,a,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()};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:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,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){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("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() {\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() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(t){s.form.date1=t},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.form.date2=t},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.form.delivery=t},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.form.type=t},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.form.resource=t},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.form.desc=t},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsor"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("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() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(t){s.formInline.user=t},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(t){s.formInline.region=t},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),a("p",[s._v("Set the "),a("code",[s._v("inline")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the form will be inline.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("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() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.formLabelAlign.name=t},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.formLabelAlign.region=t},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.formLabelAlign.type=t},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("Left"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("Right"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("Top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Form component allows you to verify your data, helping you find and correct errors.")]),a("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() {\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(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.ruleForm.name=t},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(t){s.ruleForm.region=t},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.ruleForm.date1,callback:function(t){s.ruleForm.date1=t},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(t){s.ruleForm.date2=t},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.ruleForm.delivery,callback:function(t){s.ruleForm.delivery=t},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.ruleForm.type=t},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.ruleForm.resource=t},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.ruleForm.desc=t},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("Create")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Just add the "),a("code",[s._v("rule")]),s._v(" attribute for "),a("code",[s._v("Form")]),s._v(" component, pass validation rules, and set "),a("code",[s._v("prop")]),s._v(" attribute for "),a("code",[s._v("Form-Item")]),s._v(" as a specific key that needs to be validated. See more information at "),a("a",{
+attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsorship"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input Activity name'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Length should be 3 to 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select Activity zone'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a time'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select at least one activity type'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select activity resource'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input activity form'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Please input the age'));\n        }\n        setTimeout(() => {\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 validaePass = (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 validaePass2 = (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: validaePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validaePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.ruleForm2.pass=t},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.ruleForm2.checkPass=t},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.ruleForm2.age=s._n(t)},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Confirm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the age'")]),s._v("));\n        }\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input digits'")]),s._v("));\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Age must be greater than 18'")]),s._v("));\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password again'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("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() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[a("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"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.dynamicValidateForm.email=t},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+l,prop:"domains."+l+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(s){t.value=s},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("Delete")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: 'Please input email address', trigger: 'blur' },\n      { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Domain' + index\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      required: true, message: 'domain can not be null', trigger: 'blur'\n    }\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n          }],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n        }\n      },\n      addDomain() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now(),\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("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() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.numberValidateForm.age=s._n(t)},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Number Validate need a "),a("code",[s._v(".number")]),s._v(" modifier added on the input "),a("code",[s._v("v-model")]),s._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: 'age is required'},\n      { type: 'number', message: 'age must be a number'}\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("radio")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("radio")]),s._v(" and "),a("code",[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left/right/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all form items will inherit from "),a("code",[s._v("Form")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",[s._v("model")])]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(130)},function(s,t,a){var l=a(13)(a(131),a(133),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(132);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},l=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},n=t.removeClass=function(s,t){if(a(s,t)){var l=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(l," ")}};t.toggleClass=function(s,t){a(s,t)?n(s,t):l(s,t)}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("Components Document")])])}]}},function(s,t,a){s.exports=a(135)},function(s,t,a){var l=a(13)(null,a(136),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._v("The default language of Element 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 Element entirely:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n  }\n})\n")])]),a("h2",{attrs:{id:"compatible-with-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@6.x")])]),a("p",[s._v("You need to manually handle it for compatibility with "),a("code",[s._v("6.x")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n    ...enLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n    ...zhLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n  }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n  messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("key")]),s._v(" =>")]),s._v(" i18n.vm._t(key)\n})\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",[s._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cz)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}]}},function(s,t,a){s.exports=a(138)},function(s,t,a){var l=a(13)(a(139),a(141),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(140);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports=["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._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",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"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n      "+s._s("el-icon-"+t)+"\n    ")])])}))],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])}]}},function(s,t,a){s.exports=a(143)},function(s,t,a){var l=a(13)(a(144),a(145),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("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() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("<el-input-number>")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value)\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        num2: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("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() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{size:"large"},model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"
+}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Additional "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(" sizes of the input box are available")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])])])])}]}},function(s,t,a){s.exports=a(147)},function(s,t,a){function l(s){a(148)}var n=a(13)(a(150),a(151),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(2),e=l(n);e.default.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}}}),t.default={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,l=s?a.filter(this.createStateFilter(s)):a;t(l)},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(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("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() {\n    return {\n      input: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n    return {\n      input1: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add an icon to indicate input type.")]),a("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() {\n    return {\n      input2: ''\n    }\n  },\n  methods: {\n    handleIconClick(ev) {\n      console.log(ev);\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Pick a date",icon:"search","on-icon-click":s.handleIconClick},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}})],1),a("p",[s._v("You can add an icon at the end of Input by setting the "),a("code",[s._v("icon")]),s._v(" attribute and use "),a("code",[s._v("on-icon-click")]),s._v(" hook to complete some work after clicking the icon.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n    handleIconClick(ev) {\n      "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n    return {\n      textarea: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("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() {\n    return {\n      textarea2: '',\n      textarea3: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Restaurant"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Order No."')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tel"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("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() {\n    return {\n      input6: '',\n      input7: '',\n      input8: '',\n      input9: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{size:"large",placeholder:"Please Input"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("Add "),a("code",[s._v("size")]),s._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{
+staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("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() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(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(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\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(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return suggestions")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("Customize how suggestions are displayed.")]),a("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() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(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(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\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(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-en",placeholder:"Please input",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-en"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-en'")]),s._v(", {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'value'")]),s._v(" } }, [item.value]),\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'link'")]),s._v(" } }, [item.link])\n      ]);\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n    }\n  });\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? link.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return recommended data")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      },\n      handleIconClick(ev) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Search data from server-side.")]),a("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() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\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(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(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"
+},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n        clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),a("code",[s._v('type="textarea"')]),s._v(" to change "),a("code",[s._v("input")]),s._v(" into native "),a("code",[s._v("textarea")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autosize-textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Setting the "),a("code",[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 "),a("code",[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("Same as the "),a("code",[s._v("type")]),s._v(" attribute of native input, except that it can be "),a("code",[s._v("textarea")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("triggers when the icon inside Input is clicked")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when the icon inside Input is blur")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when the icon inside Input is focus")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the icon inside Input value change")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("the placeholder of Autocomplete")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Autocomplete is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("custom-item")]),a("td",[s._v("component name of your customized suggestion list item")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),a("code",[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for autocomplete's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("whether show suggestions when input focus")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when a suggestion is clicked")]),a("td",[s._v("suggestion being clicked")])])])])}]}},function(s,t,a){s.exports=a(153)},function(s,t,a){var l=a(13)(null,a(154),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),a("p",[s._v("Installing with npm is recommended and it works seamlessly with "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("Get the latest version from "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- import CSS -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import JavaScript -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("If you are using CDN, a hello-world page is easy with Element. "),a("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},[s._v("Online Demo")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("<!DOCTYPE html>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import CSS -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import Vue before Element -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import JavaScript -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n      el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n      data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n      }\n    })\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}]}},function(s,t,a){s.exports=a(156)},function(s,t,a){var l=a(13)(null,a(157),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can specify the number of column offset by setting the value of "),a("code",[s._v("offset")]),s._v(" attribute of Col.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can enable flex layout by setting "),a("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),a("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(159)},function(s,t,a){var l=a(13)(a(160),a(161),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("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 "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{
+staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize a text message.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Loading..."')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("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() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 3000);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("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),a("p",[s._v("Add the "),a("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 "),a("code",[s._v("lock")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n    Full screen loading for 3 seconds\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      openFullScreen() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("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 "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(163)},function(s,t,a){var l=a(13)(a(164),a(165),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1"}},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)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("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() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelect(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("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(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("With icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Without icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Groups")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Three")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Four")])],1)],1)],1)],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("With icons"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Without icons"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Groups"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("menu display mode")]),a("td",[s._v("string")]),a("td",[s._v("horizontal/vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("theme color")]),a("td",[s._v("string")]),a("td",[s._v("light/dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("index of currently active menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("array that contains keys of currently active sub-menus")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("whether only one sub-menu can be active")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("how sub-menus are triggered, only works when "),a("code",[s._v("mode")]),s._v(" is 'horizontal'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("whether "),a("code",[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("callback function when menu is activated")]),a("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("callback function when sub-menu expands")]),a("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("callback function when sub-menu collapses")]),a("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("callback function when menu-item is clicked")]),a("td",[s._v("el: menu-item instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router object")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("group title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(167)},function(s,t,a){var l=a(13)(a(168),a(169),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this;this.$msgbox({title:"Message",message:"This is a message",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()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Alert interrupts user operation until the user confirms.")]),a("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() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Open an alert by calling the "),a("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),a("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),a("code",[s._v("message")]),s._v(" and "),a("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),a("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),a("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("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() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._v("string")]),s._v(", and if it is an "),a("code",[s._v("object")]),s._v(", it will be handled as the attribute "),a("code",[s._v("options")]),s._v(". Here we use "),a("code",[s._v("Promise")]),s._v(" to handle further processing.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete completed'")]),s._v("\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete canceled'")]),s._v("\n          });          \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Prompt is used when user input is required.")]),a("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() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(value => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),a("code",[s._v("prompt")]),s._v(". You can use "),a("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),a("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),a("code",[s._v("Boolean")]),s._v(" or "),a("code",[s._v("String")]),s._v(". Returning "),a("code",[s._v("false")]),s._v(" or "),a("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),a("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),a("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'Please input your e-mail'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tip'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Invalid Email'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Your email is:'")]),s._v(" + value\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input canceled'")]),s._v("\n          });       \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can be customized to show various content.")]),a("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() {\n        this.$msgbox({\n          title: 'Message',\n          message: 'This is a message',\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("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 "),a("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: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n              instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n              instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'Loading...'")]),s._v(";\n              setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                done();\n                setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                  instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n                }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n              }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              done();\n            }\n          }\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n          });\n        });\n      },\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added the following global methods for Vue.prototype: "),a("code",[s._v("$msgbox")]),s._v(", "),a("code",[s._v("$alert")]),s._v(", "),a("code",[s._v("$confirm")]),s._v(" and "),a("code",[s._v("$prompt")]),s._v(". So in a vue instance you can call "),a("code",[s._v("MessageBox")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("MessageBox")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The corresponding methods are: "),a("code",[s._v("MessageBox")]),s._v(", "),a("code",[s._v("MessageBox.alert")]),s._v(", "),a("code",[s._v("MessageBox.confirm")]),s._v(" and "),a("code",[s._v("MessageBox.prompt")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("content of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type, used for icon display")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),a("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),a("td",[s._v("function(action, instance, done), where "),a("code",[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),a("code",[s._v("done")]),s._v(" is for closing the instance")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("whether to lock body scroll when MessageBox prompts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("whether to show a cancel button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with confirm and prompt)")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("whether to show a confirm button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("text content of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Cancel")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("text content of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OK")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("custom class name of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("custom class name of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("whether MessageBox can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("whether to show an input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with prompt)")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("placeholder of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("initial value of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("regexp for the input")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("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")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("error message when validation fails")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Illegal input")])])])]);
+}]}},function(s,t,a){s.exports=a(171)},function(s,t,a){var l=a(13)(a(172),a(173),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},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"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">Show message</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")])]],2),a("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. Element has registered a "),a("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string as parameter, and it will be shown as the main body.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),a("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() {\n        this.$message('This is a message.');\n      },\n      open2() {\n        this.$message({\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('Oops, this is a error message.');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("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 "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n      },\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("A close button can be added.")]),a("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() {\n        this.$message({\n          showClose: true,\n          message: 'This is a message.'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: 'Oops, this is a error message.',\n          type: 'error'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),a("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),a("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),a("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Message.success(options)")]),s._v(".\nYou can call "),a("code",[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Message")]),s._v(" and "),a("code",[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}]}},function(s,t,a){s.exports=a(175)},function(s,t,a){var l=a(13)(a(176),a(177),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("p",{style:"color: red"},"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")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at the upper right corner of the page.")]),s._m(1),a("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() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('p', { style: 'color: red' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n    Closes automatically\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n    Won't close automatically\n    ")])]],2),a("p",[s._v("Element has registered the "),a("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),a("code",[s._v("title")]),s._v(" field and the"),a("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 "),a("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),a("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),a("code",[s._v("duration")]),s._v(" receives a "),a("code",[s._v("Number")]),s._v(" in milliseconds.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("\n    Closes automatically\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n    Won't close automatically\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: red'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'This is a reminder'")]),s._v(")\n        });\n      },\n\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Prompt'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message that does not automatically close'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("We provide four types: success, warning, info and error.")]),a("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() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n    Success\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n    Warning\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n    Info\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n    Error\n  ")])]],2),a("p",[s._v("Element provides four notification types: "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("error")]),s._v(". They are set by the "),a("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 "),a("code",[s._v("open5")]),s._v(" and "),a("code",[s._v("open6")]),s._v(" without passing a "),a("code",[s._v("type")]),s._v(" field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n    Success\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n    Warning\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n    Info\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n    Error\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"
+},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an info message'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Error'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Customize Notification's offset from the top edge of the screen")]),a("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() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    Notification with offset\n  ")])]],2),a("p",[s._v("Set the "),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    Notification with offset\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Notification")]),s._v(" and "),a("code",[s._v("this.$notify")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}]}},function(s,t,a){s.exports=a(179)},function(s,t,a){var l=a(13)(a(180),a(181),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){this.currentPage=s,console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use small pagination in the case of limited space.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add more modules based on your scenario.")]),a("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="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="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="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="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(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        this.currentPage = val;\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSizeChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentPage = val;\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`current page: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",[s._v("total")]),s._v(" or "),a("code",[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",[s._v("page-sizes")]),s._v(", "),a("code",[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",[s._v("slot")]),s._v(" in "),a("code",[s._v("layout")])])])])])}]}},function(s,t,a){s.exports=a(183)},function(s,t,a){var l=a(13)(a(184),a(185),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("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() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("triggers when popover shows")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("triggers when popover hides")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(187)},function(s,t,a){var l=a(13)(null,a(188),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Use "),a("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),a("strong",[s._v("required")]),s._v(" and must be between "),a("code",[s._v("0-100")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In this case the percentage takes no additional space.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[a("code",[s._v("stroke-width")]),s._v(" attribute decides the "),a("code",[s._v("width")]),s._v(" of progress bar, and use "),a("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"
+},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("You can specify "),a("code",[s._v("type")]),s._v(" attribute to "),a("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),a("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("the width of progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("whether to place the percentage inside progress bar, only works when "),a("code",[s._v("type")]),s._v(" is 'line'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("the current status of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("the canvas width of circle progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to show percentage")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(190)},function(s,t,a){var l=a(13)(null,a(191),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"quick-start"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),a("p",[s._v("This part walks you through the process of using Element in a webpack project.")]),a("h3",{attrs:{id:"use-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),a("p",[s._v("We provide a general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("project template")]),s._v(" for you. For those who are familiar with "),a("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" or "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("Laravel")]),s._v(", we also provide corresponding templates, and you can download and use them as well.")]),a("p",[s._v("If you prefer not to use them, please read the following.")]),a("h3",{attrs:{id:"config-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Config files")]),a("p",[s._v("Create a new project, and its structure should be")]),a("pre",[a("code",{staticClass:"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")])]),a("p",[s._v("Typical configurations for these config files are:")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-starter"')]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^2.1.6"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-es2015"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.13.2"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n  }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n    "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n        }\n      }\n    ]\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n      "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n      }\n    }),\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    })\n  ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("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.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ],\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-default"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("Next, if you need Button and Select, edit main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("Full example (Component list reference "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(")")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"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} "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-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")])]),a("h3",{attrs:{id:"start-coding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),a("p",[s._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# visit localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("Build:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}]}},function(s,t,a){s.exports=a(193)},function(s,t,a){var l=a(13)(a(194),a(195),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("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 () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{staticClass:"radio",attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionA")]),a("el-radio",{staticClass:"radio",attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionB")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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 () {\n      return {\n        radio1: 'selected and disabled'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionA")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionB")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("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 () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("optionA")]),a("el-radio",{attrs:{label:6}},[s._v("optionB")]),a("el-radio",{attrs:{label:9}},[s._v("optionC")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("<el-radio-group>")]),s._v(" with "),a("code",[s._v("<el-radio>")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("<el-radio-group>")]),s._v(" element and set label value in "),a("code",[s._v("<el-radio>")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("optionC"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("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 () {\n      return {\n        radio3: 'New York',\n        radio4: 'New York',\n        radio5: 'New York'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:!0}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("p",[s._v("You just need to change "),a("code",[s._v("<el-radio>")]),s._v(" element into "),a("code",[s._v("<el-radio-button>")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number/boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(197)},function(s,t,a){var l=a(13)(a(198),a(199),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("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() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._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 "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("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() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("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() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("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:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("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() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value} points"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-text")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("text-template")]),s._v(" to provide a text template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("text template when the component is read-only")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(201)},function(s,t,a){var l=a(13)(a(202),a(203),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  \n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("multiple")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" to enable multiple mode. In this case, the value of "),a("code",[s._v("v-model")]),s._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("Insert customized HTML templates into the slot of "),a("code",[s._v("el-option")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("Use "),a("code",[s._v("el-option-group")]),s._v(" to group the options, and its "),a("code",[s._v("label")]),s._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popular cities'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'City name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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" :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() {\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",slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-select")]),s._v(" enables filtering. By default, Select will find all the options whose "),a("code",[s._v("label")]),s._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[s._v("filter-method")]),s._v(". "),a("code",[s._v("filter-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._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() {\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() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("filterable")]),s._v(" and "),a("code",[s._v("remote")]),s._v(" with "),a("code",[s._v("true")]),s._v(" to enable remote search, and you should pass the "),a("code",[s._v("remote-method")]),s._v(". "),a("code",[s._v("remote-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[s._v("el-option")]),s._v(" is rendered with the "),a("code",[s._v("v-for")]),s._v(" directive, you should add the "),a("code",[s._v("key")]),s._v(" attribute for "),a("code",[s._v("el-option")]),s._v(". Its value needs to be unique, such as "),a("code",[s._v("item.value")]),s._v(" in the following example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please enter a keyword"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n        "),a("span",{
+staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n      });\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      remoteMethod(query) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n          setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n            });\n          }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("By using the "),a("code",[s._v("allow-create")]),s._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[s._v("allow-create")]),s._v(" to work, "),a("code",[s._v("filterable")]),s._v(" must be "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether multiple-select is activated")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Select is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether single select can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("maximum number of options user can select when "),a("code",[s._v("multiple")]),s._v(" is "),a("code",[s._v("true")]),s._v(". No limit when set to 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("the name attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Select is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("whether creating new items is allowed. To use this, "),a("code",[s._v("filterable")]),s._v(" must be true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("whether options are loaded from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("custom remote search method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("whether Select is loading data from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("displayed text while loading data from server")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Loading")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("displayed text when no data matches the filtering query")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No matching data")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("displayed text when there is no options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No data")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the selected value changes")]),a("td",[s._v("current selected value")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("triggers when a tag is removed in multiple mode")]),a("td",[s._v("removed tag value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("name of the group")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable all options in this group")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of option")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label of option, same as "),a("code",[s._v("value")]),s._v(" if omitted")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether option is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(205)},function(s,t,a){var l=a(13)(a(206),a(207),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Drag the slider within a fixed range.")]),s._m(1),a("p",[s._v("The current value is displayed when the slider is being dragged.")]),a("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() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default value")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Disabled")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("Customize the initial value of the slider by setting the binding value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatTooltip(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("Set step size with the "),a("code",[s._v("step")]),s._v(" attribute. You can display breakpoints by setting the "),a("code",[s._v("show-stops")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"
+},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Set value via a input box.")]),a("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() {\n      return {\n        value8: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("Set the "),a("code",[s._v("show-input")]),s._v(" attribute to display an input box on the right.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Selecting a range of values is supported.")]),a("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() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("range")]),s._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\n      return {\n        value10: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("vertical")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" enables vertical mode. In vertical mode, the "),a("code",[s._v("height")]),s._v(" attribute is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"discrete-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[s._v("¶")]),s._v(" Discrete values")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slider-with-input-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider with input box")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"range-selection"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[s._v("¶")]),s._v(" Range selection")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Slider is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("step size")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("whether to display an input box, works when "),a("code",[s._v("range")]),s._v(" is false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("whether to display control buttons when "),a("code",[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("whether to display breakpoints")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("whether to display tooltip value")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("format to display tooltip value")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("whether to select a range")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("vertical mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider height, required in vertical mode")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(209)},function(s,t,a){var l=a(13)(a(210),a(211),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Simple step bar.")]),a("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() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      next() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Shows the status of the step for each step.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),a("el-step",{attrs:{title:"Processing"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("Use "),a("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),a("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Done"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Processing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("There is description for each step.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("A variety of custom icons can be used in the step bar.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"Step 1",icon:"edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"picture"}})],1)],1),a("p",[s._v("The icon is set by the "),a("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 "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Vertical step bars.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("whether step description is centered")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("center whole "),a("code",[s._v("Steps")]),s._v(" component")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}]}},function(s,t,a){s.exports=a(213)},function(s,t,a){var l=a(13)(a(214),a(215),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:"100",value4:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("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() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. You can add "),a("code",[s._v("on-text")]),s._v(" or "),a("code",[s._v("off-text")]),s._v(" attribute to show texts when the component is "),a("code",[s._v("on")]),s._v(" or "),a("code",[s._v("off")]),s._v(", respectively. The "),a("code",[s._v("on-color")]),s._v(" and "),a("code",[s._v("off-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        value3: '100'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value3,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1)],1),a("p",[s._v("You can set "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" attributes. They both receive a "),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(" typed value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Switch value: ' + value3\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'100'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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() {\n      return {\n        value4: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":"",disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"extended-value-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Extended value types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58 (with text) / 46 (no text)")])]),a("tr",[a("td",[s._v("on-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("on")]),s._v(" state, overrides "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("off")]),s._v(" state, overrides "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("background color when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("background color when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(217)},function(s,t,a){var l=a(13)(a(218),a(219),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="Total Cost");var n=a.map(function(t){return Number(t[s.property])});n.every(function(s){return isNaN(s)})?l[t]="N/A":l[t]="$ "+n.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$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)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v("  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n      data() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Striped table makes it easier to distinguish different rows.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("stripe")]),s._v(" accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", table will be striped.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),a("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(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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Use "),a("code",[s._v("row-class-name")]),s._v(" in "),a("code",[s._v("el-table")]),s._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      tableRowClassName(row, index) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(":  [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("When there are too many columns, you can fix some of them.")]),a("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 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() {\n        console.log('click');\n      }\n    },\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detail")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("Edit")])]}]])})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("fixed")]),s._v(" is used in "),a("code",[s._v("el-table-column")]),s._v(", it accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"
+},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'click'")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),a("p",[s._v("Fix columns and header at the same time by combining the above two examples.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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.")]),a("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 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(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n          Remove\n        ")])]}]])})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("max-height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"
+},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n          Remove\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      deleteRow(index, rows) {\n        rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{label:"Delivery Info"}},[a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{label:"Address Info"}},[a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Delivery Info"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address Info"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Single row selection is supported.")]),a("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() {\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(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("Select second row")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Table supports single row selection. You can activate it by adding the "),a("code",[s._v("highlight-current-row")]),s._v(" attribute. An event called "),a("code",[s._v("current-change")]),s._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),a("code",[s._v("currentRow")]),s._v(" and "),a("code",[s._v("oldCurrentRow")]),s._v(". If you need to display row index, you can add a new "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" attribute assigned to "),a("code",[s._v("index")]),s._v(", and you will see the index starting from 1.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"singleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"
+},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current-row")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"index"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("Select second row"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent()"')]),s._v(">")]),s._v("Clear selection"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      setCurrent(row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can also select multiple rows.")]),a("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 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() {\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(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:s._u([["default",function(t){return[s._v(s._s(t.row.date))]}]])}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("Toggle selection status of second and third rows")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Activating multiple selection is easy: simply add an "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" set to "),a("code",[s._v("selection")]),s._v(". Apart from multiple selection, this example also uses "),a("code",[s._v("show-overflow-tooltip")]),s._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 "),a("code",[s._v("show-overflow-tooltip")]),s._v(", which accepts a "),a("code",[s._v("Boolean")]),s._v(" value. When set "),a("code",[s._v("true")]),s._v(", the extra content will show in tooltip when hover on the cell.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"multipleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selection"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"55"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("Toggle selection status of second and third rows"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("Clear selection"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleSelection(rows) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (rows) {\n          rows.forEach("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("row")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n          });\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Sort the data to find or compare data quickly.")]),a("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() {\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(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})],1)]],2),a("p",[s._v("Set table attribute "),a("code",[s._v("default-sort")]),s._v(" to determine default sort column and order. Set attribute "),a("code",[s._v("sortable")]),s._v(" in a certain column to sort the data based on this column. It accepts "),a("code",[s._v("Boolean")]),s._v(" with a default value "),a("code",[s._v("false")]),s._v(". In this example we use another attribute named "),a("code",[s._v("formatter")]),s._v(" to format the value of certain columns. It accepts a function which has two parameters: "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(". You can handle it according to your own needs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Filter the table to find desired data.")]),a("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">\n      <template 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() {\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(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag},scopedSlots:s._u([["default",function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}]])})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("filters")]),s._v(" and "),a("code",[s._v("filter-method")]),s._v(" in "),a("code",[s._v("el-table-column")]),s._v(" makes this column filterable. "),a("code",[s._v("filters")]),s._v(" is an array, and "),a("code",[s._v("filter-method")]),s._v(" is a function deciding which rows are displayed. It has two parameters: "),a("code",[s._v("value")]),s._v(" and "),a("code",[s._v("row")]),s._v(".")]),a("div",{
+staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("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 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 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 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() {\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(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}]])}),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("Name: "+s._s(t.row.name))]),a("p",[s._v("Addr: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}]])}),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}]])})],1)]],2),a("p",[s._v("You have access to the following data: row, column, $index and store (state management of Table) by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(". (Scoped slots is supported from "),a("code",[s._v("1.1")]),s._v(", "),a("code",[s._v("inline-template")]),s._v(" still works, but it's not recommended).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Name: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Addr: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._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.")]),a("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 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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([["default",function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}]])}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._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 '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("State: "),a("span",[s._v("{{")]),s._v(" props.row.state "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("City: "),a("span",[s._v("{{")]),s._v(" props.row.city "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Address: "),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Zip: "),a("span",[s._v("{{")]),s._v(" props.row.zip "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),a("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() {\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(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = 'Total Cost';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = '$ ' + values.reduce((prev, curr) => {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),a("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),a("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2),a("p",[s._v("You can add the summary row by setting "),a("code",[s._v("show-summary")]),s._v(" to "),a("code",[s._v("true")]),s._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 "),a("code",[s._v("sum-text")]),s._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 "),a("code",[s._v("summary-method")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  \n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":summary-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getSummaries"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 1 ($)"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 2 ($)"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 3 ($)"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData6")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'234'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'3.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'165'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.43'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987124'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'324'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1.9'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'621'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("17")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'539'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getSummaries(param) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { columns, data } = param;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" sums = [];\n        columns.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'Total Cost'")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(";\n          }\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" values = data.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(item[column.property]));\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!values.every("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value))) {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'$ '")]),s._v(" + values.reduce("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" value = "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(curr);\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value)) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev + curr;\n              } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev;\n              }\n            }, "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'N/A'")]),s._v(";\n          }\n        });\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" sums;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"striped-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Striped Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with border")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"summary-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Summary row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[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")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether table has vertical border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("whether table header is visible")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("whether current row is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("key of current row, a set only prop")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("function that returns custom style for a row,  or a string assigning custom style for every row")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("key of row data, used for optimizing rendering. Required if "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("Displayed text when data is empty. You can customize this area with "),a("code",[s._v('slot="empty"')])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("No Data")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("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")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("set the default sort column and order. property "),a("code",[s._v("prop")]),s._v(" is used to set default sort column, property "),a("code",[s._v("order")]),s._v(" is used to set default sort order")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("if "),a("code",[s._v("prop")]),s._v(" is set, and "),a("code",[s._v("order")]),s._v(" is not set, then "),a("code",[s._v("order")]),s._v(" is default to ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" property")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("whether to display a summary row")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("displayed text for the first column of summary row")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("Sum")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("custom summary method")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when user clicks the checkbox in a row")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("triggers when user clicks the checkbox in table header")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("triggers when selection changes")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("triggers when hovering into a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("triggers when hovering out of a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("triggers when clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("triggers when double clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("triggers when clicking a row")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("triggers when user right clicks on a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("triggers when double clicking a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("triggers when clicking a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("triggers when Table's sorting changes")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("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")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current row changes")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("triggers when finish dragging header")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("triggers when user expands or collapses a row")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("used in multiple selection Table, clear selection, might be useful when "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("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")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),a("td",[s._v("row")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("Contents to be inserted after the last row. It is still nested inside the "),a("code",[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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the column. If set to "),a("code",[s._v("selection")]),s._v(", the column will display checkbox. If set to "),a("code",[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),a("code",[s._v("expand")]),s._v(", the column will display expand icon.")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("column label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("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")]),a("td",[s._v("string")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("field name. You can also use its alias: "),a("code",[s._v("property")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("column width")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("column minimum width. Columns with "),a("code",[s._v("width")]),s._v(" has a fixed width, while columns with "),a("code",[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),a("code",[s._v("true")])]),a("td",[s._v("string/boolean")]),a("td",[s._v("true/left/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("render function for table header of this column")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("whether column can be sorted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("sorting method, works when "),a("code",[s._v("sortable")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("whether column width can be resized, works when "),a("code",[s._v("border")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("function that formats content")]),a("td",[s._v("Function(row, column)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("string")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("alignment of the table header. If omitted, the value of the above "),a("code",[s._v("align")]),s._v(" attribute will be applied")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("class name of cells in the column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("class name of the label of this column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("function that determines if a certain row can be selected, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("whether to reserve selection after data refreshing, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("an array of data filtering options. For each element in this array, "),a("code",[s._v("text")]),s._v(" and "),a("code",[s._v("value")]),s._v(" are required")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("whether data filtering supports multiple options")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("data filtering method. If "),a("code",[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 "),a("code",[s._v("true")])]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),a("code",[s._v("render-header")])]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(221)},function(s,t,a){var l=a(13)(a(222),a(223),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("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() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._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 "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Tabs styled as cards.")]),a("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() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" can get a card-styled tab.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Border card tabs.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n    Route\n  ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    Route\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("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() {\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(targetName, action) {\n        if (action === 'add') {\n          let 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          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let 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(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"
+},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleTabsEdit(targetName, action) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n          });\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n            tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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() {\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(targetName) {\n        let 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(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let 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(tab => tab.name !== targetName);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n    add tab\n  ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n  >")]),s._v("\n    add tab\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(225)},function(s,t,a){var l=a(13)(a(226),a(227),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"gray"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"primary"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Five")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Six")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("Tag Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Tag Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Tag Four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Tag Five"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Tag Six"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("close-transition")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.name"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 4'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 6'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let 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}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13)?void s.handleInputConfirm(t):null}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(tag) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      },\n\n      showInput() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("whether the removal animation is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tab is removed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(229)},function(s,t,a){var l=a(13)(a(230),a(231),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("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() {\n      return {\n        value1: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("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() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("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() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("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() {\n      return {\n        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"",placeholder:"Pick a time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time range"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("date for Time Picker, and string for Time Select")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(233)},function(s,t,a){function l(s){a(234)}var n=a(13)(a(236),a(237),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to "),a("span",[s._v("{{")]),s._v("disabled ? 'active' : 'close'"),a("span",[s._v("}}")]),s._v(" tooltip function"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" ease;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-leave-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{staticClass:"hljs-selector-class"},[s._v(".expand-fade-leave-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",[s._v("dark")]),s._v(" and "),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._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,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",[s._v("tooltip")]),s._v(". You just need set it to "),a("code",[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("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,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",[s._v("mouseenter")]),s._v(" and "),a("code",[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(239)},function(s,t,a){var l=a(13)(a(240),a(241),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4===0});return t},t=function(s){var t=[],a=["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "],l=["CA","IL","MD","TX","FL","CO","CT"];return a.forEach(function(s,a){t.push({label:s,key:a,initial:l[a]})}),t},a=function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4===0});return t};return{data:s(),data2:t(),data3:a(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("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() {\n      const generateData = _ => {\n        const data = [];\n        for (let 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Data is passed to Transfer via the "),a("code",[s._v("data")]),s._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),a("code",[s._v("key")]),s._v(" being the identification of the data item, "),a("code",[s._v("label")]),s._v(" being the displayed text, and "),a("code",[s._v("disabled")]),s._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),a("code",[s._v("v-model")]),s._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 "),a("code",[s._v("v-model")]),s._v(" with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"
+},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can search and filter data items.")]),a("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() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Set the "),a("code",[s._v("filterable")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to enable filter mode. By default, if the data item "),a("code",[s._v("label")]),s._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),a("code",[s._v("filter-method")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State Abbreviations"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData2 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" states = ["),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Illinois'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Maryland'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Texas'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Colorado'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Connecticut '")]),s._v("];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" initials = ["),a("span",{staticClass:"hljs-string"},[s._v("'CA'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'IL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'MD'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'TX'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'FL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CO'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CT'")]),s._v("];\n        states.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": city,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": index,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("initial")]),s._v(": initials[index]\n          });\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": generateData2(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": [],\n        filterMethod(query, item) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),a("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() {\n      const generateData = _ => {\n        const data = [];\n        for (let 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(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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],"footer-format":{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"left-footer"},[s._v("Operation")]),a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),a("p",[s._v("Use "),a("code",[s._v("titles")]),s._v(", "),a("code",[s._v("button-texts")]),s._v(", "),a("code",[s._v("render-content")]),s._v(" and "),a("code",[s._v("footer-format")]),s._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: "),a("code",[s._v("left-footer")]),s._v(" and "),a("code",[s._v("right-footer")]),s._v(". Plus, if you want some items initially checked, you can use "),a("code",[s._v("left-default-checked")]),s._v(" and "),a("code",[s._v("right-default-checked")]),s._v(". Finally, this example demonstrate the "),a("code",[s._v("change")]),s._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":left-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":right-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[1]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderFunc"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":titles")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['Source', 'Target']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":button-texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['To left', 'To right']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":footer-format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      noChecked: '${total}',\n      hasChecked: '${checked}/${total}'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transfer-footer")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n        renderFunc(h, option) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")])]),s._v(";\n        }\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value, direction, movedKeys) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("The data items in this example do not have "),a("code",[s._v("key")]),s._v("s or "),a("code",[s._v("label")]),s._v("s, instead they have "),a("code",[s._v("value")]),s._v("s and "),a("code",[s._v("desc")]),s._v("s. So you need to set aliases for "),a("code",[s._v("key")]),s._v(" and "),a("code",[s._v("label")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      key: 'value',\n      label: 'desc'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData3 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": generateData3(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": []\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",[s._v("key")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("data source")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Transfer is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("placeholder for the filter input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Enter keyword")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("custom list titles")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['List 1', 'List 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("custom button texts")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("custom render function for data items")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("footer-format")]),a("td",[s._v("texts for checking status in list footer")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${total} items', hasChecked: '${checked}/${total} checked' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("prop aliases for data source")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("key array of initially checked data items of the left list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("key array of initially checked data items of the right list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("content of left list footer")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("content of right list footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when data items change in the right list")]),a("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}]}},function(s,t,a){s.exports=a(243)},function(s,t,a){var l=a(13)(a(244),a(245),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("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: () => ({\n      show: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("We have two fading effects: "),a("code",[s._v("el-fade-in-linear")]),s._v(" and "),a("code",[s._v("el-fade-in")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"
+},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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: () => ({\n      show2: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[a("code",[s._v("el-zoom-in-center")]),s._v(", "),a("code",[s._v("el-zoom-in-top")]),s._v(" and "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" are provided.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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: () => ({\n      show3: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"built-in-transition"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[s._v("¶")]),s._v(" Built-in transition")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use Element's built-in transitions directly. Before that, please read the "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("transition docs")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For collapse effect, use the "),a("code",[s._v("el-collapse-transition")]),s._v(" component.")])}]}},function(s,t,a){s.exports=a(247)},function(s,t,a){var l=a(13)(a(248),a(249),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0;var a=[{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"}]}]}],l=[{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"}]}],n=1e3,e=[{name:"region1"},{name:"region2"}],i=1,v={label:"name",children:"zones"},_={children:"children",label:"label"};t.default={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){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+i++},{name:"zone"+i++}]:[],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:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;return s("span",null,[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(e,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,regions:e,defaultProps:_,props:v,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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.")]),a("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(() => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{
+staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckChange(data, checked, indeterminate) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      },\n      loadNode(node, resolve) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root2'")]),s._v(" }]);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("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() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\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() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),a("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),a("p",[s._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, "),a("code",[s._v("node-key")]),s._v(" is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n        }]);\n      },\n      setCheckedKeys() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n      },\n      resetChecked() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),a("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  let id = 1000;\n\n  export default {\n    data() {\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(store, data) {\n        store.append({ id: id++, label: 'testtest', children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\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={ () => this.append(store, data) }>Append</el-button>\n              <el-button size=\"mini\" on-click={ () => this.remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("Use "),a("code",[s._v("render-content")]),s._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, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n  export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        data2: [{\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            children: [{\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        defaultProps: {\n          children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n          <span>\n            <span>\n              <span>{node.label}</span>\n            </span>\n            <span style="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; margin-right: 20px"')]),s._v(">\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append</el-button>\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Tree nodes can be filtered")]),a("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(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("Invoke the "),a("code",[s._v("filter")]),s._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),a("code",[s._v("filter-node-method")]),s._v(" is required, and its value is the filtering method.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Filter keyword"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("key of current node, a set only prop")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("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.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of node object is used as the node's subtree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("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 "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("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")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}]}},function(s,t,a){s.exports=a(251)},function(s,t,a){var l=a(13)(null,a(252),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(254)},function(s,t,a){var l=a(13)(a(255),a(256),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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!(s.size>4e7)||(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,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const 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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture must be JPG format!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture size can not exceed 2MB!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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() {\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(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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() {\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(file, fileList) {\n        this.fileList3 = fileList.slice(-3);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("You can drag your file to a certain area to upload it.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("Drop file here or "),a("em",[s._v("click to upload")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"
+},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("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() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("select file")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("upload to server")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("select file"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"manual-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Manual upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("required, request URL")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("request headers")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether uploading multiple files is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("additions options of request")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("key name for uploaded file")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("whether cookies are sent")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-upload-list")]),a("td",[s._v("whether to show the uploaded file list")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("whether to activate drag and drop mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("accepted "),a("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 "),a("code",[s._v("thumbnail-mode")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("hook function when clicking the uploaded files")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("hook function when files are removed")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("hook function when uploaded successfully")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("hook function when some errors occurs")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("hook function when some progress occurs")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("hook function when select file or upload file success or upload file fail")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),a("code",[s._v("false")]),s._v(" or a "),a("code",[s._v("Promise")]),s._v(" is returned, uploading will be aborted")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("thumbnail-mode")]),a("td",[s._v("whether thumbnail is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("type of fileList")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("whether to auto upload file")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable upload")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("clear the uploaded file list")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(258)},function(s,t,a){function l(s){a(259)}var n=a(13)(a(261),a(262),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于页面中展示重要的提示信息。")]),s._m(1),a("p",[s._v("页面中的非浮层元素，不会自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success">\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info">\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning">\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error">\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2),a("p",[s._v("Alert 组件提供四种主题，由"),a("code",[s._v("type")]),s._v("属性指定，默认值为"),a("code",[s._v("info")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("自定义关闭按钮为文字或其他符号。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="不可关闭的 alert" type="success" :closable="false">\n  </el-alert>\n  <el-alert title="自定义 close-text" type="info" close-text="知道了">\n  </el-alert>\n  <el-alert title="设置了回调的 alert" type="warning" @close="hello">\n  </el-alert>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),a("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),a("code",[s._v("closable")]),s._v("属性决定是否可关闭，接受"),a("code",[s._v("boolean")]),s._v("，默认为"),a("code",[s._v("true")]),s._v("。你可以设置"),a("code",[s._v("close-text")]),s._v("属性来代替右侧的关闭图标，注意："),a("code",[s._v("close-text")]),s._v("必须为文本。设置"),a("code",[s._v("close")]),s._v("事件来设置关闭时的回调。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"不可关闭的 alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"自定义 close-text"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"知道了"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"设置了回调的 alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      hello() {\n        alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("表示某种状态时提升可读性。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success" show-icon>\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info" show-icon>\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning" show-icon>\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2),a("p",[s._v("通过设置"),a("code",[s._v("show-icon")]),s._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含标题和内容，解释更详细的警告。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2),a("p",[s._v("除了必填的"),a("code",[s._v("title")]),s._v("属性外，你可以设置"),a("code",[s._v("description")]),s._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"带辅助性文字介绍"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2),a("p",[s._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert-jing-gao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert 警告")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义关闭按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("标题，"),a("strong",[s._v("必选参数")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("辅助性文字。也可通过默认 slot 传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("关闭按钮自定义文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("是否显示图标")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭alert时触发的事件")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(264)},function(s,t,a){function l(s){a(265),a(267)}var n=a(13)(null,a(269),l,"data-v-39800af8",null);s.exports=n.exports},function(s,t){},,function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("出现在按钮、图标旁的数字或状态标记。")]),s._m(1),a("p",[s._v("展示新消息数量。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<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      评论\n      <el-badge class="mark" :value="12">\n    </el-badge></el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      回复\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    点我查看"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      评论\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      回复\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("属性，它接受"),a("code",[s._v("Number")]),s._v("或者"),a("code",[s._v("String")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    点我查看"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      评论\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      回复\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义最大值。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("由"),a("code",[s._v("max")]),s._v("属性定义，它接受一个"),a("code",[s._v("Number")]),s._v("，需要注意的是，只有当"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("Number")]),s._v("时，它才会生效。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以显示数字以外的文本内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge value="new" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("String")]),s._v("类型是时可以用于显示自定义文本。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("以红点的形式标注需要关注的内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge is-dot class="item">数据查询</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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("数据查询")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("除了数字外，设置"),a("code",[s._v("is-dot")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("数据查询"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge-biao-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge 标记")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zui-da-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 最大值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-hong-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小红点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("显示值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("小圆点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("隐藏 badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(271)},function(s,t,a){var l=a(13)(null,a(272),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("显示当前页面的路径，快速返回之前的任意页面。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("首页")]),a("el-breadcrumb-item",[s._v("活动管理")]),a("el-breadcrumb-item",[s._v("活动列表")]),a("el-breadcrumb-item",[s._v("活动详情")])],1)],1),a("p",[s._v("在"),a("code",[s._v("el-breadcrumb")]),s._v("中使用"),a("code",[s._v("el-breadcrumb-item")]),s._v("标签表示从首页开始的每一级。Element 提供了一个"),a("code",[s._v("separator")]),s._v("属性，在"),a("code",[s._v("el-breadcrumb")]),s._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),a("code",[s._v("/")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("首页"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动列表"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动详情"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb 面包屑")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("分隔符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("斜杠'/'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("路由跳转对象，同 "),a("code",[s._v("vue-router")]),s._v(" 的 "),a("code",[s._v("to")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(274)},function(s,t,a){function l(s){a(275)}var n=a(13)(a(277),a(278),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={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"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用的操作按钮。")]),s._m(1),a("p",[s._v("基础的按钮用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button>默认按钮</el-button>\n<el-button type="primary">主要按钮</el-button>\n<el-button type="text">文字按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("默认按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"text"}},[s._v("文字按钮")])],1),a("p",[s._v("Button 组件默认提供7种主题，由"),a("code",[s._v("type")]),s._v("属性来定义，默认为"),a("code",[s._v("default")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("默认按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("按钮不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button :plain="true" :disabled="true">主要按钮</el-button>\n<el-button type="primary" :disabled="true">主要按钮</el-button>\n<el-button type="text" :disabled="true">文字按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"primary",disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"text",disabled:!0}},[s._v("文字按钮")])],1),a("p",[s._v("你可以使用"),a("code",[s._v("disabled")]),s._v("属性来定义按钮是否可用，它接受一个"),a("code",[s._v("Boolean")]),s._v("值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"
+},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("不同的颜色倾向代表不同的提示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认显示颜色</span>\n  <span class="wrapper">\n    <el-button type="success">成功按钮</el-button>\n    <el-button type="warning">警告按钮</el-button>\n    <el-button type="danger">危险按钮</el-button>\n    <el-button type="info">信息按钮</el-button>\n  </span>\n</div>\n<div class="block">\n  <span class="demonstration">hover 显示颜色</span>\n  <span class="wrapper">\n    <el-button :plain="true" type="success">成功按钮</el-button>\n    <el-button :plain="true" type="warning">警告按钮</el-button>\n    <el-button :plain="true" type="danger">危险按钮</el-button>\n    <el-button :plain="true" type="info">信息按钮</el-button>\n  </span>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认显示颜色")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")]),a("el-button",{attrs:{type:"info"}},[s._v("信息按钮")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("hover 显示颜色")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("危险按钮")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("信息按钮")])],1)])]),a("p",[s._v("朴素按钮同样设置了不同的"),a("code",[s._v("type")]),s._v("属性对应的样式（可选值同上），默认为"),a("code",[s._v("info")]),s._v("。设置"),a("code",[s._v("plain")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("。注意，在该情况下，"),a("code",[s._v("type")]),s._v("虽然可以为"),a("code",[s._v("text")]),s._v("，但是是没有意义的，会显示为"),a("code",[s._v("text button")]),s._v("的样式。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认显示颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 显示颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。")]),a("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">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("搜索")]),a("el-button",{attrs:{type:"primary"}},[s._v("上传"),a("i",{staticClass:"el-icon-upload el-icon--right"})])],1),a("p",[s._v("设置"),a("code",[s._v("icon")]),s._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),a("code",[s._v("i")]),s._v("标签即可，可以使用自定义图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("搜索"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("上传"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("以按钮组的方式出现，常用于多项类似操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button-group>\n  <el-button type="primary" icon="arrow-left">上一页</el-button>\n  <el-button type="primary">下一页<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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("上一页")]),a("el-button",{attrs:{type:"primary"}},[s._v("下一页"),a("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("使用"),a("code",[s._v("<el-button-group>")]),s._v("标签来嵌套你的按钮。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("上一页"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("下一页"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">加载中</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("加载中")])],1),a("p",[s._v("要设置为 loading 状态，只要设置"),a("code",[s._v("loading")]),s._v("属性为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("加载中"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" size="large">大型按钮</el-button>\n<el-button type="primary">正常按钮</el-button>\n<el-button type="primary" size="small">小型按钮</el-button>\n<el-button type="primary" size="mini">超小按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("大型按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("正常按钮")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("小型按钮")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("超小按钮")])],1),a("p",[s._v("额外的尺寸："),a("code",[s._v("large")]),s._v("、"),a("code",[s._v("small")]),s._v("、"),a("code",[s._v("mini")]),s._v("，通过设置"),a("code",[s._v("size")]),s._v("属性来配置它们。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("大型按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("正常按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("小型按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("超小按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button 按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-yan-se-qing-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-yan-se-qing-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有颜色倾向")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jia-zai-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large,small,mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("primary,success,warning,danger,info,text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("是否朴素按钮")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否加载中状态")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用状态")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标，已有的图标库中的图标名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("是否默认聚焦")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("原生 type 属性")]),a("td",[s._v("string")]),a("td",[s._v("button,submit,reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(280)},function(s,t,a){function l(s){a(281)}var n=a(13)(a(283),a(284),l,"data-v-13d5050c",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(78),e=l(n);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("将信息聚合在卡片容器中展示。")]),s._m(1),l("p",[s._v("包含标题，内容和操作。")]),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;">卡片名称</span>\n    <el-button style="float: right;" type="primary">操作按钮</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + 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",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("卡片名称")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("操作按钮")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+t)+"\n  ")])})],2)],1),l("p",[s._v("Card 组件包括"),l("code",[s._v("header")]),s._v("和"),l("code",[s._v("body")]),s._v("部分，"),l("code",[s._v("header")]),s._v("部分需要有显式具名 slot 分发，同时也是可选的。")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("卡片名称"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("操作按钮"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("卡片可以只有内容区域。")]),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    {{\'列表内容 \' + 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",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+t)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{
+staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("可配置定义更丰富的内容展示。")]),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>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="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() {\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",slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{key:t,attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(80)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("好吃的汉堡")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("操作按钮")])],1)])])],1)}))],1),l("p",[s._v("配置"),l("code",[s._v("body-style")]),s._v("属性来自定义"),l("code",[s._v("body")]),s._v("部分的"),l("code",[s._v("style")]),s._v("，我们还使用了布局组件。")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("好吃的汉堡"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("操作按钮"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card 卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jian-dan-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 简单卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("设置 header，也可以通过 "),a("code",[s._v("slot#header")]),s._v(" 传入 DOM")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("设置 body 的样式")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a(286)},function(s,t,a){function l(s){a(287)}var n=a(13)(a(289),a(290),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在有限空间内，循环播放同一类型的图片、文字等内容")]),s._m(1),a("p",[s._v("适用广泛的基础用法")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认 Hover 指示器触发</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">Click 指示器触发</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",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 Hover 指示器触发")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Click 指示器触发")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("结合使用"),a("code",[s._v("el-carousel")]),s._v("和"),a("code",[s._v("el-carousel-item")]),s._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),a("code",[s._v("el-carousel-item")]),s._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),a("code",[s._v("trigger")]),s._v("属性为"),a("code",[s._v("click")]),s._v("，可以达到点击触发的效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 Hover 指示器触发"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Click 指示器触发"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n     "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n     "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以将指示器的显示位置设置在容器外部")]),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",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[a("code",[s._v("indicator-position")]),s._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),a("code",[s._v("outside")]),s._v("则会显示在外部；设置为"),a("code",[s._v("none")]),s._v("则不会显示指示器。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以设置切换箭头的显示时机")]),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",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[a("code",[s._v("arrow")]),s._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),a("code",[s._v("arrow")]),s._v("设置为"),a("code",[s._v("always")]),s._v("，则会一直显示；设置为"),a("code",[s._v("never")]),s._v("，则会一直隐藏。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),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",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("将"),a("code",[s._v("type")]),s._v("属性设置为"),a("code",[s._v("card")]),s._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel-zou-ma-deng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel 走马灯")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-shi-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指示器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qie-huan-jian-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 切换箭头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("走马灯的高度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("初始状态激活的幻灯片的索引，从 0 开始")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("指示器的触发方式")]),a("td",[s._v("string")]),a("td",[s._v("click")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("是否自动切换")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("自动切换的时间间隔，单位为毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("指示器的位置")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("切换箭头的显示时机")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("走马灯的类型")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("幻灯片切换时触发")]),a("td",[s._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("手动切换幻灯片")]),a("td",[s._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),a("code",[s._v("el-carousel-item")]),s._v(" 的 "),a("code",[s._v("name")]),s._v(" 属性值")])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("切换至上一张幻灯片")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("切换至下一张幻灯片")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("幻灯片的名字，可用作 "),a("code",[s._v("setActiveItem")]),s._v(" 的参数")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(292)},function(s,t,a){function l(s){a(293)}var n=a(13)(a(295),a(296),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["zujian","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(a){s.indexOf("江苏")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"南京"}]:s.indexOf("浙江")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"杭州"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),s._m(1),a("p",[s._v("有两种触发子菜单的方式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认 click 触发子菜单</span>\n  <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">\n  </el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">hover 触发子菜单</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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 click 触发子菜单")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("hover 触发子菜单")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("只需为 Cascader 的"),a("code",[s._v("options")]),s._v("属性指定选项数组即可渲染出一个级联选择器。通过"),a("code",[s._v("expand-trigger")]),s._v("可以定义展开子级菜单的触发方式。本例还展示了"),a("code",[s._v("change")]),s._v("事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 click 触发子菜单"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 触发子菜单"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("本例中，"),a("code",[s._v("options")]),s._v("指定的数组中的第一个元素含有"),a("code",[s._v("disabled: true")]),s._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),a("code",[s._v("disabled")]),s._v("字段是否为"),a("code",[s._v("true")]),s._v("，如果你的数据中表示禁用含义的字段名不为"),a("code",[s._v("disabled")]),s._v("，可以通过"),a("code",[s._v("props")]),s._v("属性来指定（详见下方 API 表格）。当然，"),a("code",[s._v("value")]),s._v("、"),a("code",[s._v("label")]),s._v("和"),a("code",[s._v("children")]),s._v("这三个字段名也可以通过同样的方式指定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"
+},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("属性"),a("code",[s._v("show-all-levels")]),s._v("定义了是否显示完整的路径，将其赋值为"),a("code",[s._v("false")]),s._v("则仅显示最后一级")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions3: ['zujian', 'data', 'tag']\n      };\n    }\n  };\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("默认值通过数组的方式指定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("若需要允许用户选择任意一级选项，则可将"),a("code",[s._v("change-on-select")]),s._v("赋值为"),a("code",[s._v("true")])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"
+},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("当选中某一级时，动态加载该级下的选项。")]),a("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() {\n      return {\n        options2: [{\n          label: '江苏',\n          cities: []\n        }, {\n          label: '浙江',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: '南京'\n            }];\n          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: '杭州'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("本例的选项数据源在初始化时不包含城市数据。利用"),a("code",[s._v("active-item-change")]),s._v("事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了"),a("code",[s._v("props")]),s._v("属性的用法。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江苏'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'浙江'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n        }\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleItemChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'江苏'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v("\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'浙江'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'杭州'")]),s._v("\n            }];\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以快捷地搜索选项并选择。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">只可选择最后一级菜单的选项</span>\n  <el-cascader placeholder="试试搜索：指南" :options="options" filterable></el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">可选择任意一级菜单的选项</span>\n  <el-cascader placeholder="试试搜索：指南" :options="options" filterable="" change-on-select></el-cascader>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("只可选择最后一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("可选择任意一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("将"),a("code",[s._v("filterable")]),s._v("赋值为"),a("code",[s._v("true")]),s._v("即可打开搜索功能。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("只可选择最后一级菜单的选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("可选择任意一级菜单的选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"
+},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader 级联选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过在数据源中设置 "),a("code",[s._v("disabled")]),s._v(" 字段来声明该选项是禁用的")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅显示最后一级")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择即改变")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态加载次级选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("可选项数据源，键名可通过 "),a("code",[s._v("props")]),s._v(" 属性配置")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体见下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("选中项绑定值")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("自定义浮层类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否支持清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("次级菜单的展开方式")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("输入框中是否显示选中值的完整路径")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("搜索关键词输入的去抖延迟，毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("是否允许选择任意一级的选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("指定选项的值为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定选项标签为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定选项的子选项为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("指定选项的禁用为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("当前值")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("当父级选项变化时触发的事件，仅在 "),a("code",[s._v("change-on-select")]),s._v(" 为 "),a("code",[s._v("false")]),s._v(" 时可用")]),a("td",[s._v("各父级选项组成的数组")])])])])}]}},function(s,t,a){s.exports=a(298)},function(s,t,a){function l(s){a(299)}var n=a(13)(a(301),a(302),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";var a=["上海","北京","广州","深圳"];s.exports={data:function(){return{checkList:["选中且禁用","复选框 A"],checked:!0,checked1:!1,checked2:!0,isValid:"可用",checkAll:!1,cities:a,checkedCities:["上海","北京"],checkedCities1:["上海","北京"],isIndeterminate:!0,checkboxGroup1:["上海"],checkboxGroup2:["北京"],checkboxGroup3:["广州"]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s.target.checked?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t<this.cities.length}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("一组备选项中进行多选")]),s._m(1),a("p",[s._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <!-- `checked` 为 true 或 false -->\n  <el-checkbox v-model="checked">备选项</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",slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("备选项")])]],2),a("p",[s._v("在"),a("code",[s._v("el-checkbox")]),s._v("元素中定义"),a("code",[s._v("v-model")]),s._v("绑定变量，单一的"),a("code",[s._v("checkbox")]),s._v("中，默认绑定变量的值会是"),a("code",[s._v("Boolean")]),s._v("，选中为"),a("code",[s._v("true")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` 为 true 或 false -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("多选框不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</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",slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("备选项1")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("备选项")])]],2),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),a("demo-block",{
+staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="复选框 A"></el-checkbox>\n    <el-checkbox label="复选框 B"></el-checkbox>\n    <el-checkbox label="复选框 C"></el-checkbox>\n    <el-checkbox label="禁用" disabled></el-checkbox>\n    <el-checkbox label="选中且禁用" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        checkList: ['选中且禁用','复选框 A']\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"复选框 A"}}),a("el-checkbox",{attrs:{label:"复选框 B"}}),a("el-checkbox",{attrs:{label:"复选框 C"}}),a("el-checkbox",{attrs:{label:"禁用",disabled:""}}),a("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),a("code",[s._v("v-model")]),s._v("绑定"),a("code",[s._v("Array")]),s._v("类型的变量即可。 "),a("code",[s._v("el-checkbox")]),s._v(" 的 "),a("code",[s._v("label")]),s._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),a("code",[s._v("label")]),s._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 B"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'选中且禁用'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'复选框 A'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</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  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkAll: true,\n        checkedCities: ['上海', '北京'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(event) {\n        this.checkedCities = event.target.checked ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let 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",slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("全选")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("全选"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n        "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckAllChange(event) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      handleCheckedCitiesChange(value) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._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  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("按钮样式的多选组合。")]),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 === \'深圳\'" :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  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['上海'],\n        checkboxGroup2: ['北京'],\n        checkboxGroup3: ['广州'],\n        cities: cityOptions\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"深圳"===t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"large",fill:"#324057","text-color":"#a4aebd",min:1,max:3},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("p",[s._v("只需要把"),a("code",[s._v("el-checkbox")]),s._v("元素替换为"),a("code",[s._v("el-checkbox-button")]),s._v("元素即可。此外，Element 还提供了"),a("code",[s._v("size")]),s._v("属性，支持"),a("code",[s._v("large")]),s._v("和"),a("code",[s._v("small")]),s._v("两种。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === '深圳'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("fill")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#324057"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#a4aebd"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox 多选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" indeterminate 状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("indeterminate")]),s._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选项目数量的限制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("min")]),s._v(" 和 "),a("code",[s._v("max")]),s._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选中状态的值（只有在"),a("code",[s._v("checkbox-group")]),s._v("或者绑定对象类型为"),a("code",[s._v("array")]),s._v("时有效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("选中时的值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("没有选中时的值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("按钮禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("当前是否勾选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("设置 indeterminate 状态，只负责样式控制")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("Checkbox 按钮组尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("可被勾选的 checkbox 的最大数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("可被勾选的 checkbox 的最小数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("event 事件对象")])])])])}]}},function(s,t,a){s.exports=a(304)},function(s,t,a){function l(s){a(305)}var n=a(13)(a(307),a(308),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过折叠面板收纳内容区域")]),s._m(1),a("p",[s._v("可同时展开多个面板，面板之间不影响")]),a("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>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{
+attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每次只能展开一个面板")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("p",[s._v("通过 "),a("code",[s._v("accordion")]),s._v(" 属性来设置是否以手风琴模式显示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse accordion>\n  <el-collapse-item>\n    <template slot="title">\n      一致性 Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",[a("template",{slot:"title"},[s._v("\n      一致性 Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),a("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n      一致性 Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse 折叠面板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义面板标题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("除了可以通过 "),a("code",[s._v("title")]),s._v(" 属性以外，还可以通过具名 "),a("code",[s._v("slot")]),s._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否手风琴模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),a("code",[s._v("string")]),s._v("，否则为"),a("code",[s._v("array")]),s._v(")")]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),a("code",[s._v("activeNames")]),s._v(" 类型为"),a("code",[s._v("string")]),s._v("，否则为"),a("code",[s._v("array")]),s._v(")")]),a("td",[s._v("(activeNames: array|string)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("唯一标志符")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("面板标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(310)},function(s,t,a){function l(s){a(311)}var n=a(13)(a(313),a(314),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于颜色选择，支持多种格式。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">有默认值</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">无默认值</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color1: '#20a0ff',\n        color2: null\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("有默认值")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("无默认值")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("有默认值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("无默认值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),a("code",[s._v("show-alpha")]),s._v("属性即可控制是否支持透明度的选择。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker 颜色选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择透明度")])},function(){
+var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("是否支持透明度选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("写入 v-model 的颜色的格式")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发")]),a("td",[s._v("当前值")])])])])}]}},function(s,t,a){s.exports=a(316)},function(s,t,a){function l(s){a(317)}var n=a(13)(null,a(319),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),s._m(1),a("p",[s._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color-se-cai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color 色彩")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhong-xing-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中性色")])}]}},function(s,t,a){s.exports=a(321)},function(s,t,a){var l=a(13)(null,a(322),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义主题")]),a("p",[s._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法。")]),a("h2",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅替换主题色")]),a("p",[s._v("如果仅希望更换 Element 的主题色，推荐使用"),a("a",{attrs:{href:"https://elementui.github.io/theme-preview"}},[s._v("在线主题生成工具")]),s._v("。")]),a("p",[s._v("Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),a("p",[s._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),a("p",[s._v("如果希望进行除主题色之外的样式定制，请继续阅读。")]),a("h2",{attrs:{id:"shen-ceng-ci-de-ding-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shen-ceng-ci-de-ding-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 深层次的定制")]),a("p",[s._v("如果仅仅改变主题色不能满足你的需求，请按以下步骤进行更深层次的主题定制：")]),a("h3",{attrs:{id:"an-zhuang-gong-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 安装工具")]),a("p",[s._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# 从 npm\nnpm i element-theme-default -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 初始化变量文件")]),a("p",[s._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),a("code",[s._v("et")]),s._v(" 调用工具，如果安装在当前目录下，需要通过 "),a("code",[s._v("node_modules/.bin/et")]),s._v(" 访问到命令。执行 "),a("code",[s._v("-i")]),s._v(" 初始化变量文件。默认输出到 "),a("code",[s._v("element-variables.css")]),s._v("，当然你可以传参数指定文件输出目录。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("如果使用默认配置，执行后当前目录会有一个 "),a("code",[s._v("element-variables.css")]),s._v(" 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下：")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n  "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n  -------------------------- */")]),s._v("\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"xiu-gai-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修改变量")]),a("p",[s._v("直接编辑 "),a("code",[s._v("element-variables.css")]),s._v(" 文件，例如修改主题色为红色。")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"bian-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 编译主题")]),a("p",[s._v("保存文件后，到命令行里执行 "),a("code",[s._v("et")]),s._v(" 编译主题，如果你想启用 "),a("code",[s._v("watch")]),s._v(" 模式，实时编译主题，增加 "),a("code",[s._v("-w")]),s._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),a("code",[s._v("-c")]),s._v(" 参数，并带上你的变量文件名")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入自定义主题")]),a("p",[s._v("默认情况下编译的主题目录是放在 "),a("code",[s._v("./theme")]),s._v(" 下，你可以通过 "),a("code",[s._v("-o")]),s._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),a("code",[s._v("theme/index.css")]),s._v(" 文件即可。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 搭配插件按需引入组件主题")]),a("p",[s._v("如果是搭配 "),a("code",[s._v("babel-plugin-component")]),s._v(" 一起使用，只需要修改 "),a("code",[s._v(".babelrc")]),s._v(" 的配置，指定 "),a("code",[s._v("styleLibraryName")]),s._v(" 路径为自定义主题相对于 "),a("code",[s._v(".babelrc")]),s._v(" 的路径，注意要加 "),a("code",[s._v("~")]),s._v("。")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("如果不清楚 "),a("code",[s._v("babel-plugin-component")]),s._v(" 是什么，请阅读 "),a("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[s._v("快速上手")]),s._v(" 一节。更多 "),a("code",[s._v("element-theme")]),s._v(" 用法请参考"),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("项目仓库")]),s._v("。")])])}]}},function(s,t,a){s.exports=a(324)},function(s,t,a){function l(s){a(325)}var n=a(13)(a(327),a(328),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{pickerOptions0:{disabledDate:function(s){return s.getTime()<Date.now()-864e5}},pickerOptions1:{disabledDate:function(s){return s.getTime()<Date.now()-864e5},shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于选择或输入日期")]),s._m(1),a("p",[s._v("以「日」为基本单位，基础的日期选择控件")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions0: {\n          disabledDate(time) {\n            return time.getTime() < Date.now() - 8.64e7;\n          }\n        },\n        pickerOptions1: {\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期","picker-options":s.pickerOptions0},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("基本单位由"),a("code",[s._v("type")]),s._v("属性指定。快捷选项需配置"),a("code",[s._v("picker-options")]),s._v("对象中的"),a("code",[s._v("shortcuts")]),s._v("，禁用日期通过 "),a("code",[s._v("disabledDate")]),s._v(" 设置，传入函数")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions0")]),s._v(": {\n          disabledDate(time) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" time.getTime() < "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now() - "),a("span",{staticClass:"hljs-number"},[s._v("8.64e7")]),s._v(";\n          }\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("通过扩展基础的日期选择，可以选择周、月、年")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">周</span>\n  <el-date-picker v-model="value3" type="week" format="yyyy 第 WW 周" placeholder="选择周">\n  </el-date-picker>\n</div>\n<div class="block">\n  <span class="demonstration">月</span>\n  <el-date-picker v-model="value4" type="month" placeholder="选择月">\n  </el-date-picker>\n</div>\n<div class="block">\n  <span class="demonstration">年</span>\n  <el-date-picker v-model="value5" align="right" type="year" placeholder="选择年">\n  </el-date-picker>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: '',\n        value4: '',\n        value5: ''\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("周")]),a("el-date-picker",{attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("月")]),a("el-date-picker",{attrs:{type:"month",placeholder:"选择月"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("年")]),a("el-date-picker",{attrs:{align:"right",type:"year",placeholder:"选择年"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("周"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"yyyy 第 WW 周"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择周"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("月"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择月"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("年"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择年"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可在一个选择器中便捷地选择一个时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value6" type="daterange" placeholder="选择日期范围">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value7" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"daterange",placeholder:"选择日期范围"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"选择日期范围","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期范围"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期范围"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一周'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近三个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker 日期选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其他日期单位")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日期范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间日期格式化")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",[s._v("yyyy")]),s._v("，月 "),a("code",[s._v("MM")]),s._v("，日 "),a("code",[s._v("dd")]),s._v("，小时 "),a("code",[s._v("HH")]),s._v("，分 "),a("code",[s._v("mm")]),s._v("，秒 "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DatePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("可选，DatePicker打开时默认显示的时间")]),a("td",[s._v("Date")]),a("td",[s._v("可被new Date()解析")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("周起始日")]),a("td",[s._v("Number")]),a("td",[s._v("1 到 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("选中日期后会执行的回调，只有当 "),a("code",[s._v("daterange")]),s._v(" 或 "),a("code",[s._v("datetimerange")]),s._v(" 才生效")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("格式化后的值")])])])])}]}},function(s,t,a){s.exports=a(330)},function(s,t,a){function l(s){a(331)}var n=a(13)(a(333),a(334),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在同一个选择器里选择日期和时间")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("datetime")]),s._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期时间"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期时间"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value3" type="datetimerange" placeholder="选择时间范围">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"datetimerange",placeholder:"选择时间范围"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"选择时间范围",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("type")]),s._v("为"),a("code",[s._v("datetimerange")]),s._v("即可选择日期和时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一周'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"
+},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近三个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker 日期时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间日期格式化")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",[s._v("yyyy")]),s._v("，月 "),a("code",[s._v("MM")]),s._v("，日 "),a("code",[s._v("dd")]),s._v("，小时 "),a("code",[s._v("HH")]),s._v("，分 "),a("code",[s._v("mm")]),s._v("，秒 "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DateTimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(336)},function(s,t,a){function l(s){a(337)}var n=a(13)(a(339),a(340),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px"}},methods:{openDialog:function(){this.$refs.dialogBind.open()},handleClose:function(s){this.$confirm("确认关闭？").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),s._m(1),a("p",[s._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog title="提示" v-model="dialogVisible" size="tiny" :before-close="handleClose">\n  <span>这是一段信息</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('确认关闭？')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("el-dialog",{attrs:{title:"提示",size:"tiny","before-close":s.handleClose},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("span",[s._v("这是一段信息")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("确 定")])],1)])],1),a("p",[s._v("需要设置"),a("code",[s._v("v-model")]),s._v("属性，它接收"),a("code",[s._v("Boolean")]),s._v("，当为"),a("code",[s._v("true")]),s._v("时显示 Dialog。Dialog 分为两个部分："),a("code",[s._v("body")]),s._v("和"),a("code",[s._v("footer")]),s._v("，"),a("code",[s._v("footer")]),s._v("需要具名为"),a("code",[s._v("footer")]),s._v("的"),a("code",[s._v("slot")]),s._v("。"),a("code",[s._v("title")]),s._v("属性用于定义标题，它是可选的，默认值为空。本例通过显式改变"),a("code",[s._v("v-model")]),s._v("的值来打开 Dialog，此外我们还为 Dialog 实例提供了"),a("code",[s._v("open")]),s._v("和"),a("code",[s._v("close")]),s._v("方法，可以通过调用它们来打开/关闭 Dialog。最后，本例还展示了"),a("code",[s._v("beforeClose")]),s._v("的用法。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("点击打开 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"提示"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("这是一段信息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(done) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'确认关闭？'")]),s._v(")\n          .then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n            done();\n          })\n          .catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {});\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="日期" width="150"></el-table-column>\n    <el-table-column property="name" label="姓名" width="200"></el-table-column>\n    <el-table-column property="address" label="地址"></el-table-column>\n  </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="活动名称" :label-width="formLabelWidth">\n      <el-input v-model="form.name" auto-complete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="活动区域" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="请选择活动区域">\n        <el-option label="区域一" value="shanghai"></el-option>\n        <el-option label="区域二" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n  </div>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("打开嵌套表格的 Dialog")]),a("el-dialog",{attrs:{title:"收货地址"},model:{value:s.dialogTableVisible,callback:function(t){s.dialogTableVisible=t},expression:"dialogTableVisible"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("打开嵌套表单的 Dialog")]),a("el-dialog",{attrs:{title:"收货地址"},model:{value:s.dialogFormVisible,callback:function(t){s.dialogFormVisible=t},expression:"dialogFormVisible"}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"活动名称","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"活动区域","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),a("div",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("确 定")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- Table -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("打开嵌套表格的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- Form -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("打开嵌套表单的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog 对话框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("Dialog 的大小")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("Dialog CSS 中的 top 值（仅在 size 不为 full 时有效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("是否需要遮罩层")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("是否在 Dialog 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("Dialog 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("是否可以通过点击 modal 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("是否可以通过按下 ESC 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("关闭前的回调，会暂停 Dialog 的关闭")]),a("td",[s._v("function(done)，done 用于关闭 Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Dialog 的内容")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 标题区的内容")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("Dialog 按钮操作区的内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("每个 "),a("code",[s._v("el-dialog")]),s._v(" 实例都暴露了如下方法，用于在不显式改变 "),a("code",[s._v("v-model")]),s._v(" 值的情况下打开 / 关闭实例：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("打开当前实例")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前实例")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("Dialog 关闭的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("Dialog 打开的回调")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(342)},function(s,t,a){function l(s){a(343)}var n=a(13)(a(345),a(346),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("将动作或菜单折叠到下拉菜单中。")]),s._m(1),a("p",[s._v("移动到下拉菜单上，展开更多操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("通过组件"),a("code",[s._v("slot")]),s._v("来设置下拉触发的元素以及需要通过具名"),a("code",[s._v("slot")]),s._v("为"),a("code",[s._v("dropdown")]),s._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),a("code",[s._v("hover")]),s._v("即可，无需点击也会显示下拉菜单。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可使用按钮触发下拉菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <el-button type="primary">\n    更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n    更多菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n  更多菜单\n  "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("设置"),a("code",[s._v("split-button")]),s._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n    更多菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n  更多菜单\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("p",[s._v("可以配置 click 激活或者 hover 激活。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover 激活")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click 激活")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1)],1)],1),a("p",[s._v("在"),a("code",[s._v("trigger")]),s._v("属性设置为"),a("code",[s._v("click")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("下拉菜单默认在点击菜单项后会被隐藏，将"),a("code",[s._v("hide-on-click")]),s._v("属性默认为"),a("code",[s._v("false")]),s._v("可以关闭此功能。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),a("demo-block",{
+staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:"\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("黄金糕")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("狮子头")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown 下拉菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-dui-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发对象")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 菜单隐藏方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以"),a("code",[s._v("hide-on-click")]),s._v("属性来配置。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-ling-shi-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指令事件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("菜单按钮类型，同 Button 组件(只在"),a("code",[s._v("split-button")]),s._v("为 true 的情况下有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("菜单按钮尺寸，同 Button 组件(只在"),a("code",[s._v("split-button")]),s._v("为 true 的情况下有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("下拉触发元素呈现为按钮组")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("菜单水平对齐方向")]),a("td",[s._v("string")]),a("td",[s._v("start, end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发下拉的行为")]),a("td",[s._v("string")]),a("td",[s._v("hover, click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("是否在点击菜单项后隐藏菜单")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[a("code",[s._v("split-button")]),s._v(" 为 true 时，点击左侧按钮的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("点击菜单项触发的事件回调")]),a("td",[s._v("dropdown-item 的指令")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("指令")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("显示分割线")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(348)},function(s,t,a){function l(s){a(349)}var n=a(13)(a(351),a(352),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("必须年满18岁")):a():a(new Error("请输入数字值"))},1e3):a(new Error("年龄不能为空"))},a=function(t,a,l){""===a?l(new Error("请输入密码")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("请再次输入密码")):a!==s.ruleForm2.pass?l(new Error("两次输入密码不一致!")):l()};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",rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{value:"",key:Date.now()}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},submitForm:function(s){this.$refs[s].validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),s._m(1),a("p",[s._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="form" label-width="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" 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="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch on-text="" off-text v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\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">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\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() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"80px"}},[a("el-form-item",{attrs:{label:"活动名称"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:s.form.date1,callback:function(t){s.form.date1=t},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:s.form.date2,callback:function(t){s.form.date2=t},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"即时配送"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.form.delivery=t},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"活动性质"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.form.type=t},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.form.resource=t},expression:"form.resource"}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.form.desc=t},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("立即创建")]),a("el-button",[s._v("取消")])],1)],1)],1),a("p",[s._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"80px"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"即时配送"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"特殊资源"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("立即创建"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("取消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="审批人">\n    <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="formInline.region" placeholder="活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item><el-form-item>\n    <el-button type="primary" @click="onSubmit">查询</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"审批人"}},[a("el-input",{attrs:{placeholder:"审批人"},model:{value:s.formInline.user,callback:function(t){s.formInline.user=t},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"活动区域"},model:{value:s.formInline.region,callback:function(t){s.formInline.region=t},expression:"formInline.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("查询")])],1)],1)],1),a("p",[s._v("设置 "),a("code",[s._v("inline")]),s._v(" 属性可以让表单域变为行内的表单域")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"审批人"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"审批人"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("查询"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">左对齐</el-radio-button>\n  <el-radio-button label="right">右对齐</el-radio-button>\n  <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <el-form-item label="名称">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("左对齐")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("右对齐")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("顶部对齐")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"80px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"名称"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.formLabelAlign.name=t},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.formLabelAlign.region=t},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.formLabelAlign.type=t},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("通过设置 "),a("code",[s._v("label-position")]),s._v(" 属性可以改变表单域标签的位置，可选值为 "),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("，当设为 "),a("code",[s._v("top")]),s._v(" 时标签会置于表单域的顶部")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("左对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("右对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("顶部对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"80px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"名称"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="活动名称" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="选择日期" 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="选择时间" 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="即时配送" prop="delivery">\n    <el-switch on-text="" off-text v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式" 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\')">立即创建</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\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: '请输入活动名称', trigger: 'blur' },\n            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: '请选择活动区域', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: '请选择活动资源', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: '请填写活动形式', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.ruleForm.name=t},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.ruleForm.region,callback:function(t){s.ruleForm.region=t},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:s.ruleForm.date1,callback:function(t){s.ruleForm.date1=t},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:s.ruleForm.date2,callback:function(t){s.ruleForm.date2=t},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.ruleForm.delivery,callback:function(t){s.ruleForm.delivery=t},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.ruleForm.type=t},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.ruleForm.resource=t},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.ruleForm.desc=t},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("立即创建")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("Form 组件提供了表单验证的功能，只需要通过 "),a("code",[s._v("rule")]),s._v(" 属性传入约定的验证规则，并 Form-Item 的 "),a("code",[s._v("prop")]),s._v(" 属性设置为需校验的字段名即可。校验规则参见 "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"即时配送"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"特殊资源"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("立即创建"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请输入活动名称'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'长度在 3 到 5 个字符'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择活动区域'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择日期'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择时间'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请至少选择一个活动性质'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择活动资源'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请填写活动形式'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="密码" 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="确认密码" 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="年龄" 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\')">提交</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('年龄不能为空'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('请输入数字值'));\n          } else {\n            if (value < 18) {\n              callback(new Error('必须年满18岁'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请输入密码'));\n        } else {\n          if (this.ruleForm2.checkPass !== '') {\n            this.$refs.ruleForm2.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请再次输入密码'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error('两次输入密码不一致!'));\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(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"密码",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.ruleForm2.pass=t},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.ruleForm2.checkPass=t},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"年龄",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.ruleForm2.age=s._n(t)},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"确认密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"年龄"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'年龄不能为空'")]),s._v("));\n        }\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请输入数字值'")]),s._v("));\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'必须年满18岁'")]),s._v("));\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请输入密码'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请再次输入密码'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'两次输入密码不一致!'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n  <el-form-item prop="email" label="邮箱" :rules="[\n      { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n      { type: \'email\', message: \'请输入正确的邮箱地址\', 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="\'域名\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n      required: true, message: \'域名不能为空\', trigger: \'blur\'\n    }">\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n    <el-button @click="addDomain">新增域名</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',
+script:"\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item)\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1)\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          value: '',\n          key: Date.now()\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:"blur,change"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.dynamicValidateForm.email=t},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"域名"+l,prop:"domains."+l+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(s){t.value=s},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("删除")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("提交")]),a("el-button",{on:{click:s.addDomain}},[s._v("新增域名")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("重置")])],1)],2)],1),a("p",[s._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮箱"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: '请输入邮箱地址', trigger: 'blur' },\n      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'域名' + index\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      required: true, message: '域名不能为空', trigger: 'blur'\n    }\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("新增域名"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n          }],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item)\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(")\n        }\n      },\n      addDomain() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now()\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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="年龄" prop="age" :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\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\')">提交</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[a("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.numberValidateForm.age=s._n(t)},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("数字类型的验证需要在 "),a("code",[s._v("v-model")]),s._v(" 处加上 "),a("code",[s._v(".number")]),s._v(" 的修饰符，这是 "),a("code",[s._v("Vue")]),s._v(" 自身提供的用于将绑定值转化为 "),a("code",[s._v("number")]),s._v(" 类型的修饰符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"年龄"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: '年龄不能为空'},\n      { type: 'number', message: '年龄必须为数字值'}\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form 表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-xing-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 典型表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xing-nei-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 行内表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-dan-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表单验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义校验规则")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减表单项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数字类型验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("表单数据对象")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("行内表单模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("表单域标签的位置")]),a("td",[s._v("string")]),a("td",[s._v("right/left/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("表单域标签的后缀")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("对整个表单进行校验的方法")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("对部分表单字段进行校验的方法")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("表单域 model 字段")]),a("td",[s._v("string")]),a("td",[s._v("传入 Form 组件的 "),a("code",[s._v("model")]),s._v(" 中的字段")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("标签文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的的宽度，例如 '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("是否必填，如不设置，则会根据校验规则自动生成")]),a("td",[s._v("bolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),a("code",[s._v("error")]),s._v("，并显示该错误信息")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(354)},function(s,t,a){var l=a(13)(a(355),a(356),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(132);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("组件说明文档")])])}]}},function(s,t,a){s.exports=a(358)},function(s,t,a){function l(s){a(359)}var n=a(13)(null,a(361),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"guo-ji-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 国际化")]),a("p",[s._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-comment"},[s._v("// 完整引入 Element")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("或")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-comment"},[s._v("// 按需引入 Element")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 设置语言")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 引入组件")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),a("h2",{attrs:{id:"jian-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element 兼容 "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v("，搭配使用能更方便地实现多语言切换。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"jian-rong-qi-ta-i18n-cha-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容其他 i18n 插件")]),a("p",[s._v("如果不使用 "),a("code",[s._v("vue-i18n@5.x")]),s._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n  }\n})\n")])]),a("h2",{attrs:{id:"jian-rong-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",[s._v("vue-i18n@6.x")])]),a("p",[s._v("默认不支持 6.x 的 "),a("code",[s._v("vue-i18n")]),s._v("，你需要手动处理。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{
+staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n    ...enLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// 或者用 Object.assign({ message: 'hello' }, enLocale)")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n    ...zhLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// 或者用 Object.assign({ message: '你好' }, zhLocale)")]),s._v("\n  }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n  messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("key")]),s._v(" =>")]),s._v(" i18n.vm._t(key)\n})\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 通过 CDN 的方式加载语言文件")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("搭配 "),a("code",[s._v("vue-i18n")]),s._v(" 使用")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("目前 Element 内置了以下语言：")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("简体中文（zh-CN）")]),a("li",[s._v("英语（en）")]),a("li",[s._v("德语（de）")]),a("li",[s._v("葡萄牙语（pt）")]),a("li",[s._v("西班牙语（es）")]),a("li",[s._v("丹麦语（da）")]),a("li",[s._v("法语（fr）")]),a("li",[s._v("挪威语（nb-NO）")]),a("li",[s._v("繁体中文（zh-TW）")]),a("li",[s._v("意大利语（it）")]),a("li",[s._v("韩语（ko）")]),a("li",[s._v("日语（ja）")]),a("li",[s._v("荷兰语（nl）")]),a("li",[s._v("越南语（vi）")]),a("li",[s._v("俄语（ru-RU）")]),a("li",[s._v("土耳其语（tr-TR）")]),a("li",[s._v("巴西葡萄牙语（pt-br）")]),a("li",[s._v("波斯语（fa）")]),a("li",[s._v("泰语（th）")]),a("li",[s._v("印尼语（id）")]),a("li",[s._v("保加利亚语（bg）")]),a("li",[s._v("波兰语（pl）")]),a("li",[s._v("芬兰语（fi）")]),a("li",[s._v("瑞典语（sv-SE）")]),a("li",[s._v("希腊语（el）")]),a("li",[s._v("斯洛伐克语（sk）")]),a("li",[s._v("加泰罗尼亚语（ca）")]),a("li",[s._v("捷克语（cz）")]),a("li",[s._v("乌克兰语（ua）")]),a("li",[s._v("土库曼语（tk）")])]),a("p",[s._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("这里")]),s._v(" 添加一个语言配置文件即可。")])])}]}},function(s,t,a){s.exports=a(363)},function(s,t,a){function l(s){a(364)}var n=a(13)(a(366),a(367),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(140);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("提供了一套常用的图标集合。")]),s._m(1),s._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">搜索</el-button>\n\n',script:null,style:null}}},[a("div",{staticClass:"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"}},[s._v("搜索")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("搜索"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n      "+s._s("el-icon-"+t)+"\n    ")])])}))],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon-tu-biao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon 图标")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-yong-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("直接通过设置类名为 "),a("code",[s._v("el-icon-iconName")]),s._v(" 来使用即可。例如：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-ji-he"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标集合")])}]}},function(s,t,a){s.exports=a(369)},function(s,t,a){function l(s){a(370)}var n=a(13)(a(372),a(373),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("仅允许输入标准的数字值，可定义范围")]),s._m(1),a("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() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("要使用它，只需要在"),a("code",[s._v("el-input-number")]),s._v("元素中使用"),a("code",[s._v("v-model")]),s._v("绑定变量即可，变量的初始值即为默认值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        num2: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[a("code",[s._v("disabled")]),s._v("属性接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),a("code",[s._v("min")]),s._v("属性和"),a("code",[s._v("max")]),s._v("属性，不设置"),a("code",[s._v("min")]),s._v("和"),a("code",[s._v("max")]),s._v("时，最小值为 0。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("允许定义递增递减的步数控制")]),a("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() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("设置"),a("code",[s._v("step")]),s._v("属性可以控制步长，接受一个"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{size:"large"},model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber 计数器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-shu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 步数")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("额外提供了 "),a("code",[s._v("large")]),s._v("、"),a("code",[s._v("small")]),s._v(" 两种尺寸的数字输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("设置计数器允许的最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("设置计数器允许的最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("Infinity")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("计数器步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("计数器尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用计数器")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("是否使用控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值被改变时触发")]),a("td",[s._v("最后变更的值")])])])])}]}},function(s,t,a){s.exports=a(375)},function(s,t,a){function l(s){a(376)}var n=a(13)(a(378),a(379),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(2),e=l(n);e.default.component("my-item-zh",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"name"}},[a.value]),s("span",{attrs:{class:"addr"}},[a.address])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{restaurants:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearch:function(s,t){var a=this.restaurants,l=s?a.filter(this.createStateFilter(s)):a;t(l)},querySearchAsync:function(s,t){var a=this.restaurants,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.restaurants=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过鼠标或键盘输入字符")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input v-model="input" placeholder="请输入内容"></el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请输入内容" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input1: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("通过 "),a("code",[s._v("disabled")]),s._v(" 属性指定是否禁用 input 组件")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("带有图标标记输入类型")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请选择日期" icon="search" v-model="input2" :on-icon-click="handleIconClick">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input2: ''\n    }\n  },\n  methods: {\n    handleIconClick(ev) {\n      console.log(ev);\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"请选择日期",icon:"search","on-icon-click":s.handleIconClick},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}})],1),a("p",[s._v("可以通过 "),a("code",[s._v("icon")]),s._v(" 属性在 input 组件尾部增加显示图标，可以通过 "),a("code",[s._v("on-icon-click")]),s._v(" 钩子函数来在点击图标后执行需要的逻辑。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择日期"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n    handleIconClick(ev) {\n      "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("文本域高度可通过 "),a("code",[s._v("rows")]),s._v(" 属性控制")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea3">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea2: '',\n      textarea3: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"请输入内容"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可前置或后置元素，一般为标签或按钮")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n  <el-input placeholder="请输入内容" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input5">\n    <el-select v-model="select" slot="prepend" placeholder="请选择">\n      <el-option label="餐厅名" value="1"></el-option>\n      <el-option label="订单号" value="2"></el-option>\n      <el-option label="用户电话" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="search"></el-button>\n  </el-input>\n</div>\n\n\n',script:"\nexport default {\n  data() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{placeholder:"请选择"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"餐厅名",value:"1"}}),a("el-option",{attrs:{label:"订单号",value:"2"}}),a("el-option",{attrs:{label:"用户电话",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("可通过 slot 来指定在 input 中前置或者后置内容。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"餐厅名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"订单号"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户电话"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-size">\n  <el-input size="large" placeholder="请输入内容" v-model="input6">\n  </el-input>\n  <el-input placeholder="请输入内容" v-model="input7">\n  </el-input>\n  <el-input size="small" placeholder="请输入内容" v-model="input8">\n  </el-input>\n  <el-input size="mini" placeholder="请输入内容" v-model="input9">\n  </el-input>\n</div>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input6: '',\n      input7: '',\n      input8: '',\n      input9: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{size:"large",placeholder:"请输入内容"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"请输入内容"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"请输入内容"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("可通过 "),a("code",[s._v("size")]),s._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("根据输入内容提供对应的输入建议")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">激活即列出输入建议</div>\n    <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">输入后匹配输入建议</div>\n    <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n  </el-col>\n</el-row>\n\n',script:'\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("激活即列出输入建议")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("输入后匹配输入建议")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("autocomplete 是一个可带输入建议的输入框组件，"),a("code",[s._v("fetch-suggestions")]),s._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("激活即列出输入建议"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("输入后匹配输入建议"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (restaurant.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("可自定义输入建议的显示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete popper-class="my-autocomplete" v-model="state3" :fetch-suggestions="querySearch" custom-item="my-item-zh" placeholder="请输入内容" @select="handleSelect" icon="edit" :on-icon-click="handleIconClick"></el-autocomplete>\n\n\n\n\n',script:'\n  Vue.component(\'my-item-zh\', {\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: \'name\' } }, [item.value]),\n        h(\'span\', { attrs: { class: \'addr\' } }, [item.address])\n      ]);\n    },\n    props: {\n      item: { type: Object, required: true }\n    }\n  });\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n',style:"\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-zh",placeholder:"请输入内容",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-zh"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-zh'")]),s._v(", {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(" } }, [item.value]),\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'addr'")]),s._v(" } }, [item.address])\n      ]);\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n    }\n  });\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (restaurant.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{
+staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      },\n      handleIconClick(ev) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("从服务端搜索数据")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n\n',script:'\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"
+},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createStateFilter(queryString)) : restaurants;\n\n        clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n      },\n      createStateFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("state")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (state.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input 输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带 icon 的输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("用于输入多行文本信息，通过将 "),a("code",[s._v("type")]),s._v(" 属性的值指定为 textarea。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自适应文本高度的文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过设置 "),a("code",[s._v("autosize")]),s._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),a("code",[s._v("autosize")]),s._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 复合型输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带输入建议")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("text/textarea")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("最大输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("最小输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸，只在 "),a("code",[s._v('type!="textarea"')]),s._v(" 时有效")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("输入框行数，只对 "),a("code",[s._v('type="textarea"')]),s._v(" 有效")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("自适应内容高度，只对 "),a("code",[s._v('type="textarea"')]),s._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("原生属性，自动补全")]),a("td",[s._v("string")]),a("td",[s._v("on, off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("原生属性，是否只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("原生属性，设置最大值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("原生属性，设置最小值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("原生属性，设置输入字段的合法数字间隔")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("控制是否能被用户缩放")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("原生属性，自动获取焦点")]),a("td",[s._v("boolean")]),a("td",[s._v("true, false")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("点击 Input 内的图标的钩子函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("点击 Input 内的图标时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("在 Input 失去焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("在 Input 获得焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("在 Input 值改变时触发")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("必填值输入绑定值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("custom-item")]),a("td",[s._v("通过该参数指定自定义的输入建议列表项的组件名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Autocomplete 下拉列表的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("是否在输入框 focus 时显示建议列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("点击图标的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("点击选中建议项时触发")]),a("td",[s._v("选中建议项")])])])])}]}},function(s,t,a){s.exports=a(381)},function(s,t,a){var l=a(13)(null,a(382),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 安装")]),a("h3",{attrs:{id:"npm-an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm 安装")]),a("p",[s._v("推荐使用 npm 的方式安装，它能更好地和 "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(" 打包工具配合使用。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("目前可以通过 "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),a("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},[s._v("在线演示")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("<!DOCTYPE html>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("欢迎使用 Element"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 先引入 Vue -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n      el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n      data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n      }\n    })\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。")])])}]}},function(s,t,a){s.exports=a(384)},function(s,t,a){function l(s){a(385)}var n=a(13)(null,a(387),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过基础的 24 分栏，迅速简便地创建布局。")]),s._m(1),a("p",[s._v("使用单一分栏创建基础的栅格布局。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("通过 row 和 col 组件，并通过 col 组件的 "),a("code",[s._v("span")]),s._v(" 属性我们就可以自由地组合布局。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("分栏之间存在间隔。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row 组件 提供 "),a("code",[s._v("gutter")]),s._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持偏移指定的栏数。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("通过制定 col 组件的 "),a("code",[s._v("offset")]),s._v(" 属性可以指定分栏偏移的栏数。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),a("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"
+}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("将 "),a("code",[s._v("type")]),s._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),a("code",[s._v("justify")]),s._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout 布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-jian-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏间隔")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hun-he-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 混合布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",[s._v("flex")]),s._v(" 布局来对分栏进行灵活的对齐。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 响应式布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸："),a("code",[s._v("xs")]),s._v("、"),a("code",[s._v("sm")]),s._v("、"),a("code",[s._v("md")]),s._v("和"),a("code",[s._v("lg")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("栅格间隔")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("布局模式，可选 flex，现代浏览器下有效")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("flex 布局下的水平排列方式")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("flex 布局下的垂直排列方式")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("栅格占据的列数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("栅格左侧的间隔格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("栅格向右移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("栅格向左移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(389)},function(s,t,a){function l(s){a(390)}var n=a(13)(a(392),a(393),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("加载数据时显示动效。")]),s._m(1),a("p",[s._v("在表格等容器中加载数据时显示。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading: true\n      };\n    }\n  };\n",style:"\n  body {\n    margin: 0;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),a("code",[s._v("v-loading")]),s._v("，只需要绑定"),a("code",[s._v("Boolean")]),s._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),a("code",[s._v("body")]),s._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义加载文案。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table v-loading="loading2" element-loading-text="拼命加载中" :data="tableData" style="width: 100%">\n    <el-table-column prop="date" label="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading2: true\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("在绑定了"),a("code",[s._v("v-loading")]),s._v("指令的元素上添加"),a("code",[s._v("element-loading-text")]),s._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"拼命加载中"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("页面数据加载时显示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n    显示整页加载，3 秒后消失\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 3000);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("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    显示整页加载，3 秒后消失\n  ")])]],2),a("p",[s._v("当需要全屏遮罩时，可使用"),a("code",[s._v("fullscreen")]),s._v("修饰符（此时遮罩会插入至 body 上）。此时若需要锁定屏幕的滚动，可以使用"),a("code",[s._v("lock")]),s._v("修饰符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n    显示整页加载，3 秒后消失\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      openFullScreen() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),s._m(5),a("p",[s._v("在需要调用时：")]),s._m(6),s._m(7),s._m(8),a("p",[s._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading 加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qu-yu-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 区域加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jia-zai-wen-an"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-wen-an","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载文案")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zheng-ye-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 整页加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-wu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 服务")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("其中 "),a("code",[s._v("options")]),s._v(" 参数为 Loading 的配置项，具体见下表。"),a("code",[s._v("LoadingService")]),s._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),a("code",[s._v("close")]),s._v(" 方法来关闭它：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用它们中任意一个的 "),a("code",[s._v("close")]),s._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),a("code",[s._v("$loading")]),s._v("，它的调用方式为："),a("code",[s._v("this.$loading(options)")]),s._v("，同样会返回一个 Loading 实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),a("code",[s._v("document.querySelector")]),s._v("以获取到对应 DOM 节点")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("body")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("fullscreen")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("lock")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("显示在加载图标下方的加载文案")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("Loading 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(395)},function(s,t,a){function l(s){a(396)}var n=a(13)(a(398),a(399),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1"}},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)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("为网站提供导航功能的菜单。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("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">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n  </el-submenu>\n  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</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">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n  </el-submenu>\n  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1)],1),a("p",[s._v("导航菜单默认为垂直模式，通过 "),a("code",[s._v("mode")]),s._v(" 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 "),a("code",[s._v("submenu")]),s._v(" 组件可以生成二级菜单。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelect(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("垂直菜单，可内嵌子菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="tac">\n  <el-col :span="8">\n    <h5>带 icon</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>导航一</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>\n      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="8">\n    <h5>不带 icon</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">导航一</template>\n        <el-menu-item-group title="分组一">\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">导航二</el-menu-item>\n      <el-menu-item index="3">导航三</el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="8">\n    <h5>分组</h5>\n    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">\n      <el-menu-item-group title="分组一">\n        <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>\n        <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>\n      </el-menu-item-group>\n      <el-menu-item-group title="分组二">\n        <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>\n        <el-menu-item index="4"><i class="el-icon-message"></i>导航四</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(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("带 icon")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("导航一")]),a("el-menu-item-group",[a("template",{slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("导航二")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("导航三")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("不带 icon")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("导航一")]),a("el-menu-item-group",{attrs:{title:"分组一"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],1),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("导航二")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("导航三")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("分组")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"分组一"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航一")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航二")])],1),a("el-menu-item-group",{attrs:{title:"分组二"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航三")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航四")])],1)],1)],1)],1)],1),a("p",[s._v("通过 "),a("code",[s._v("el-menu-item-group")]),s._v(" 组件可以实现菜单进行分组，分组名可以通过 "),a("code",[s._v("title")]),s._v(" 属性直接设定也可以通过具名 slot 来设定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("带 icon"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("不带 icon"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("分组"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组二"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航四"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu 导航菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ding-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 顶栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ce-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 侧栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("模式")]),a("td",[s._v("string")]),a("td",[s._v("horizontal,vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("主题色")]),a("td",[s._v("string")]),a("td",[s._v("light,dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("当前激活菜单的 index")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("当前打开的submenu的 key 数组")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("是否只保持一个子菜单的展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("菜单激活回调")]),a("td",[s._v("index: 选中菜单项的 indexPath: 选中菜单项的 index path")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("SubMenu 展开的回调")]),a("td",[s._v("index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("SubMenu 收起的回调")]),a("td",[s._v("index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router 路径对象")]),a("td",[s._v("Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("分组标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(401)},function(s,t,a){var l=a(13)(a(402),a(403),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"删除成功!",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({
+message:"已取消删除",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"你的邮箱是: "+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"取消输入"})},200)})},open4:function(){var s=this;this.$msgbox({title:"消息",message:"这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容",showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。")]),s._m(1),a("p",[s._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$alert")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("alert")]),s._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),a("code",[s._v("message")]),s._v("和"),a("code",[s._v("title")]),s._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),a("code",[s._v("Promise")]),s._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),a("code",[s._v("Promise")]),s._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'这是一段内容'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open2">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$confirm")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("confirm")]),s._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),a("code",[s._v("options")]),s._v("作为第三个参数，它是一个字面量对象。"),a("code",[s._v("type")]),s._v("字段表明消息类型，可以为"),a("code",[s._v("success")]),s._v("，"),a("code",[s._v("error")]),s._v("，"),a("code",[s._v("info")]),s._v("和"),a("code",[s._v("warning")]),s._v("，无效的设置将会被忽略。注意，第二个参数"),a("code",[s._v("title")]),s._v("必须定义为"),a("code",[s._v("String")]),s._v("类型，如果是"),a("code",[s._v("Object")]),s._v("，会被理解为"),a("code",[s._v("options")]),s._v("。在这里我们用了 Promise 来处理后续响应。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'此操作将永久删除该文件, 是否继续?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'删除成功!'")]),s._v("\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'已取消删除'")]),s._v("\n          });          \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open3">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$prompt")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("prompt")]),s._v("。可以用"),a("code",[s._v("inputPattern")]),s._v("字段自己规定匹配模式，或者用"),a("code",[s._v("inputValidator")]),s._v("规定校验函数，可以返回"),a("code",[s._v("Boolean")]),s._v("或"),a("code",[s._v("String")]),s._v("，"),a("code",[s._v("Boolean")]),s._v("为"),a("code",[s._v("false")]),s._v("或字符串时均表示校验未通过，"),a("code",[s._v("String")]),s._v("相当于定义了"),a("code",[s._v("inputErrorMessage")]),s._v("字段。此外，可以用"),a("code",[s._v("inputPlaceholder")]),s._v("字段来定义输入框的占位符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'请输入邮箱'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'邮箱格式不正确'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("{ value }")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你的邮箱是: '")]),s._v(" + value\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消输入'")]),s._v("\n          });       \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可自定义配置不同内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open4">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open4() {\n        this.$msgbox({\n          title: '消息',\n          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("以上三个方法都是对"),a("code",[s._v("$msgbox")]),s._v("方法的再包装。本例直接调用"),a("code",[s._v("$msgbox")]),s._v("方法，使用了"),a("code",[s._v("showCancelButton")]),s._v("字段，用于显示取消按钮。另外可使用"),a("code",[s._v("cancelButtonClass")]),s._v("为其添加自定义样式，使用"),a("code",[s._v("cancelButtonText")]),s._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),a("code",[s._v("beforeClose")]),s._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),a("code",[s._v("action")]),s._v("、实例本身和"),a("code",[s._v("done")]),s._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),a("code",[s._v("loading")]),s._v("状态等；此时若需要关闭实例，可以调用"),a("code",[s._v("done")]),s._v("方法（若在"),a("code",[s._v("beforeClose")]),s._v("中没有调用"),a("code",[s._v("done")]),s._v("，则实例不会关闭）。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n              instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n              instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'执行中...'")]),s._v(";\n              setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                done();\n                setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                  instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n                }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n              }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              done();\n            }\n          }\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n          });\n        });\n      },\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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),a("p",[s._v("对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。")]),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox-dan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox 弹框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"que-ren-xiao-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 确认消息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ti-jiao-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 提交内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 "),a("code",[s._v("MessageBox")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("单独引入 "),a("code",[s._v("MessageBox")]),s._v("：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("MessageBox 标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("MessageBox 消息正文内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("消息类型，用于显示图标")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("MessageBox 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),a("td",[s._v("function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),a("td",[s._v("function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("是否在 MessageBox 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("是否显示取消按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("是否显示确定按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("取消按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("取消")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("确定按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("确定")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("取消按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("确定按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("是否可通过点击遮罩关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("是否可通过按下 ESC 键关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("是否显示输入框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("输入框的占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("输入框的初始文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("输入框的校验表达式")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("校验未通过时的提示文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("输入的数据不合法!")])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){var l=a(13)(a(406),a(407),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")},open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),s._m(1),a("p",[s._v("从顶部出现，3 秒后自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">打开消息提示</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("打开消息提示")])]],2),a("p",[s._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),a("code",[s._v("$message")]),s._v("方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("打开消息提示"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n      open2() {\n        this.$message({\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('错了哦，这是一条错误消息');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("错误")])]],2),a("p",[s._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),a("code",[s._v("type")]),s._v("字段可以定义不同的状态，默认为"),a("code",[s._v("info")]),s._v("。此时正文内容以"),a("code",[s._v("message")]),s._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open4")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("成功"),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("警告"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("消息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("错误"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v(");\n      },\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'错了哦，这是一条错误消息'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以添加关闭按钮。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open5">消息</el-button>\n  <el-button :plain="true" @click="open6">成功</el-button>\n  <el-button :plain="true" @click="open7">警告</el-button>\n  <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: '这是一条消息提示'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: '错了哦，这是一条错误消息',\n          type: 'error'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("错误")])]],2),a("p",[s._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),a("code",[s._v("showClose")]),s._v("字段。此外，和 Notification 一样，Message 拥有可控的"),a("code",[s._v("duration")]),s._v("，设置"),a("code",[s._v("0")]),s._v("为不会被自动关闭，默认为 3000 毫秒。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("消息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("成功"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("警告"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("错误"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'错了哦，这是一条错误消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-guan-bi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可关闭")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),a("code",[s._v("Message")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("单独引入 "),a("code",[s._v("Message")]),s._v("：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用方法为 "),a("code",[s._v("Message(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",[s._v("Message.success(options)")]),s._v("。\n并且可以调用 "),a("code",[s._v("Message.closeAll()")]),s._v(" 手动关闭所有实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("消息文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名，会覆盖 "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",[s._v("Message")]),s._v(" 或 "),a("code",[s._v("this.$message")]),s._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Message")])])])])}]}},function(s,t,a){s.exports=a(409)},function(s,t,a){var l=a(13)(a(410),a(411),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"标题名称",message:s("p",{style:"color: red"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})},open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})},open7:function(){this.$notify.success({title:"成功",message:"这是一条成功的提示消息",offset:100})},onClose:function(){console.log("Notification 已关闭")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("悬浮出现在页面右上角，显示全局的通知提醒消息。")]),s._m(1),a("p",[s._v("适用性广泛的通知栏")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open">\n    可自动关闭\n  </el-button>\n  <el-button plain @click="open2">\n    不会自动关闭\n    </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: '标题名称',\n          message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n    可自动关闭\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n    不会自动关闭\n    ")])]],2),a("p",[s._v("Notification 组件提供通知功能，Element 注册了"),a("code",[s._v("$notify")]),s._v("方法，接收一个"),a("code",[s._v("options")]),s._v("字面量参数，在最简单的情况下，你可以设置"),a("code",[s._v("title")]),s._v("字段和"),a("code",[s._v("message")]),s._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),a("code",[s._v("duration")]),s._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),a("code",[s._v("0")]),s._v("，则不会自动关闭。注意："),a("code",[s._v("duration")]),s._v("接收一个"),a("code",[s._v("Number")]),s._v("，单位为毫秒，默认为"),a("code",[s._v("4500")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("\n    可自动关闭\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n    不会自动关闭\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: red'")]),s._v("}, "),a("span",{staticClass:"hljs-string"},[s._v("'这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'")]),s._v(")\n        });\n      },\n\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条不会自动关闭的消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open3">\n    成功\n  </el-button>\n  <el-button plain @click="open4">\n    警告\n  </el-button>\n  <el-button plain @click="open5">\n    消息\n  </el-button>\n  <el-button plain @click="open6">\n    错误\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n    成功\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n    警告\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n    消息\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n    错误\n  ")])]],2),a("p",[s._v("Element 为 Notification 组件准备了四种通知类型："),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(", "),a("code",[s._v("error")]),s._v("。通过"),a("code",[s._v("type")]),s._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open5")]),s._v("和"),a("code",[s._v("open6")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n    成功\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n    警告\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n    消息\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n    错误\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成功'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条警告的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息的提示消息'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'错误'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条错误的提示消息'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("让 Notification 偏移一些位置")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open7">\n    偏移的消息\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open7() {\n        this.$notify.success({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    偏移的消息\n  ")])]],2),a("p",[s._v("Notification 提供设置偏移量的功能，通过设置 "),a("code",[s._v("offset")]),s._v(" 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    偏移的消息\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成功'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),a("p",[s._v("单独引入 Notification：")]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification-tong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification 通知")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有倾向性")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 "),a("code",[s._v("Vue.prototype")]),s._v(" 添加了全局方法 "),a("code",[s._v("$notify")]),s._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用方法为 "),a("code",[s._v("Notification(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",[s._v("Notification.success(options)")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("说明文字")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题样式，如果不在可选值内将被忽略")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名。若设置了 "),a("code",[s._v("type")]),s._v("，则 "),a("code",[s._v("iconClass")]),s._v(" 会被覆盖")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("点击 Notification 时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",[s._v("Notification")]),s._v(" 或 "),a("code",[s._v("this.$notify")]),s._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Notification")])])])])}]}},function(s,t,a){s.exports=a(413)},function(s,t,a){function l(s){a(414)}var n=a(13)(a(416),a(417),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={methods:{handleSizeChange:function(s){this.currentPage=s,console.log("每页 "+s+" 条")},handleCurrentChange:function(s){console.log("当前页: "+s)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当数据量过多时，使用分页分解数据。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">页数较少时的效果</span>\n  <el-pagination layout="prev, pager, next" :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">大于 7 页时的效果</span>\n  <el-pagination layout="prev, pager, next" :total="1000">\n  </el-pagination>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("页数较少时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("大于 7 页时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("设置"),a("code",[s._v("layout")]),s._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),a("code",[s._v("prev")]),s._v("表示上一页，"),a("code",[s._v("next")]),s._v("为下一页，"),a("code",[s._v("pager")]),s._v("表示页码列表，除此以外还提供了"),a("code",[s._v("jumper")]),s._v("和"),a("code",[s._v("total")]),s._v("，"),a("code",[s._v("size")]),s._v("和特殊的布局符号"),a("code",[s._v("->")]),s._v("，"),a("code",[s._v("->")]),s._v("后的元素会靠右显示，"),a("code",[s._v("jumper")]),s._v("表示跳页元素，"),a("code",[s._v("total")]),s._v("表示显示页码总数，"),a("code",[s._v("size")]),s._v("用于设置每页显示的页码数量。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("页数较少时的效果"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("大于 7 页时的效果"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("在空间有限的情况下，可以使用简单的小型分页。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("只需要一个"),a("code",[s._v("small")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("根据场景需要，可以添加其他功能模块。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">显示总数</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">调整每页显示条数</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="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">直接前往</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">完整功能</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="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(val) {\n        console.log(`每页 ${val} 条`);\n      },\n      handleCurrentChange(val) {\n        this.currentPage = val;\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示总数")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("调整每页显示条数")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("直接前往")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("完整功能")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("此例是一个完整的用例，使用了"),a("code",[s._v("size-change")]),s._v("和"),a("code",[s._v("current-change")]),s._v("事件来处理页码大小和当前页变动时候触发的事件。"),a("code",[s._v("page-sizes")]),s._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),a("code",[s._v("[100, 200, 300, 400]")]),s._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("显示总数"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("调整每页显示条数"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("直接前往"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("完整功能"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSizeChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`每页 "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" 条`")]),s._v(");\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentPage = val;\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`当前页: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination 分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xing-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小型分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-jia-gong-neng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 附加功能")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("是否使用小型分页样式")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("每页显示条目个数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("总条目数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("当前页数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("组件布局，子组件名用逗号分隔")]),a("td",[s._v("String")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("每页显示个数选择器的选项设置")]),a("td",[s._v("Number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("pageSize 改变时会触发")]),a("td",[s._v("每页条数"),a("code",[s._v("size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("currentPage 改变时会触发")]),a("td",[s._v("当前页"),a("code",[s._v("currentPage")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("自定义内容，需要在 "),a("code",[s._v("layout")]),s._v(" 中列出 "),a("code",[s._v("slot")])])])])])}]}},function(s,t,a){s.exports=a(419)},function(s,t,a){function l(s){a(420)}var n=a(13)(a(422),a(423),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],gridData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],gridData3:[{tag:"家",date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],singleSelection:{},multipleSelection:[],model:""}},watch:{singleSelection:function(s){console.log("selection: ",s)},multipleSelection:function(s){console.log("selection: ",s)}},events:{handleClick:function(s){console.log("you clicked ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover1" placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-popover ref="popover2" placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-button v-popover:popover1>hover 激活</el-button>\n<el-button v-popover:popover2>click 激活</el-button>\n<el-popover placement="right" title="标题" width="200" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  <el-button slot="reference">focus 激活</el-button>\n</el-popover>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("hover 激活")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("click 激活")]),a("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[a("el-button",{slot:"reference"},[s._v("focus 激活")])],1)],1),a("p",[s._v("设置索引"),a("code",[s._v("ref")]),s._v("，在按钮中，我们注册了自定义指令"),a("code",[s._v("v-popover")]),s._v("，指向索引ID。"),a("code",[s._v("trigger")]),s._v("属性用于设置何时触发 Popover ，提供三种触发方式："),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" 和 "),a("code",[s._v("focus")]),s._v("。第二种用法通过 "),a("code",[s._v("slot")]),s._v(" 指定 reference。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("focus 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),a("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="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n</el-popover>\n\n<el-button v-popover:popover4>click 激活</el-button>\n\n\n',
+script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("click 激活")])],1),a("p",[s._v("利用分发取代"),a("code",[s._v("content")]),s._v("属性")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover5" placement="top" width="160" v-model="visible2">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n  </div>\n</el-popover>\n\n<el-button v-popover:popover5>删除</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("这是一段内容这是一段内容确定删除吗？")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("取消")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("确定")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("删除")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("这是一段内容这是一段内容确定删除吗？"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("取消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("确定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover-dan-chu-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover 弹出框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),a("code",[s._v("Vue-popper")]),s._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-xin-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套信息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-cao-zuo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套操作")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发方式")]),a("td",[s._v("String")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",[s._v("slot")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("宽度")]),a("td",[s._v("String, Number")]),a("td",[s._v("—")]),a("td",[s._v("最小宽度 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Popover 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Popover 内嵌 HTML 文本")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("显示时触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("隐藏时触发")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(425)},function(s,t,a){function l(s){a(426)}var n=a(13)(null,a(428),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示操作进度，告知用户当前状态和预期。")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件设置"),a("code",[s._v("percentage")]),s._v("属性即可，表示进度条对应的百分比，"),a("strong",[s._v("必填")]),s._v("，必须在 0-100。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("百分比不占用额外控件，适用于文件上传等场景。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件可通过 "),a("code",[s._v("stroke-width")]),s._v(" 属性更改进度条的高度，并可通过 "),a("code",[s._v("text-inside")]),s._v(" 属性来将进度条描述置于进度条内部。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件可通过 "),a("code",[s._v("type")]),s._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),a("code",[s._v("width")]),s._v(" 属性来设置其大小。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress 进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比外显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比内显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 环形进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[a("strong",[s._v("百分比（必填）")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("进度条类型")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("进度条的宽度，单位 px")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("进度条当前状态")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("环形进度条画布宽度（只在 type=circle 时可用）")]),a("td",[s._v("number")]),a("td"),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示进度条文字内容")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(430)},function(s,t,a){var l=a(13)(null,a(431),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"kuai-su-shang-shou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 快速上手")]),a("p",[s._v("本节将介绍如何在项目中使用 Element。")]),a("h3",{attrs:{id:"shi-yong-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 Starter Kit")]),a("p",[s._v("我们提供了通用的"),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("项目模板")]),s._v("，你可以直接使用。对于熟悉 "),a("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" 或 "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("Laravel")]),s._v(" 的用户，我们也准备了相应的模板，同样可以直接下载使用。")]),a("p",[s._v("如果不希望使用我们提供的模板，请继续阅读。")]),a("h3",{attrs:{id:"pei-zhi-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pei-zhi-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 配置文件")]),a("p",[s._v("新建项目，项目结构为")]),a("pre",[a("code",{staticClass:"hljs language-text"},[s._v("|- src/  --------------------- 项目源代码\n    |- App.vue\n    |- main.js  -------------- 入口文件\n|- .babelrc  ----------------- babel 配置文件\n|- index.html  --------------- HTML 模板\n|- package.json  ------------- npm 配置文件\n|- README.md  ---------------- 项目帮助文档\n|- webpack.config.js  -------- webpack 配置文件\n")])]),a("p",[s._v("几个配置文件的典型配置如下：")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-starter"')]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n    "),a("span",{
+staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^2.1.6"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-es2015"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.13.2"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n  }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n    "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n        }\n      }\n    ]\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n      "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n      }\n    }),\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    })\n  ])\n}\n")])]),a("h3",{attrs:{id:"yin-ru-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入 Element")]),a("p",[s._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),a("h4",{attrs:{id:"wan-zheng-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 完整引入")]),a("p",[s._v("在 main.js 中写入以下内容：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),a("h4",{attrs:{id:"an-xu-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按需引入")]),a("p",[s._v("借助 "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),a("p",[s._v("首先，安装 babel-plugin-component：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("然后，将 .babelrc 修改为：")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ],\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-default"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("完整组件列表和引入方式（完整组件列表以 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(" 为准）")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"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} "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-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")])]),a("h3",{attrs:{id:"kai-shi-shi-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 开始使用")]),a("p",[s._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# 执行如下命令后访问 localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("编译：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("各个组件的使用方法请参阅它们各自的文档。")])])}]}},function(s,t,a){s.exports=a(433)},function(s,t,a){var l=a(13)(a(434),a(435),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"选中且禁用",radio2:3,radio3:"上海",radio4:"上海",radio5:"上海"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在一组备选项中进行单选")]),s._m(1),a("p",[s._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>\n  <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{staticClass:"radio",attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("备选项")]),a("el-radio",{staticClass:"radio",attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("备选项")])]],2),a("p",[s._v("要使用 Radio 组件，只需要设置"),a("code",[s._v("v-model")]),s._v("绑定变量，选中意味着变量的值为相应 Radio "),a("code",[s._v("label")]),s._v("属性的值，"),a("code",[s._v("label")]),s._v("可以是"),a("code",[s._v("String")]),s._v("或者"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("单选框不可用的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio1: '选中且禁用'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"禁用"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("备选项")]),a("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("备选项")])]],2),a("p",[s._v("注意：请牢记，选中的条件是绑定的变量值等于"),a("code",[s._v("label")]),s._v("中的值。只要在"),a("code",[s._v("el-radio")]),s._v("元素中设置"),a("code",[s._v("disabled")]),s._v("属性即可，它接受一个"),a("code",[s._v("Boolean")]),s._v("，"),a("code",[s._v("true")]),s._v("为禁用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选中且禁用'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于在多个互斥的选项中选择的场景")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio-group v-model="radio2">\n    <el-radio :label="3">备选项</el-radio>\n    <el-radio :label="6">备选项</el-radio>\n    <el-radio :label="9">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("备选项")]),a("el-radio",{attrs:{label:6}},[s._v("备选项")]),a("el-radio",{attrs:{label:9}},[s._v("备选项")])],1)]],2),a("p",[s._v("结合"),a("code",[s._v("el-radio-group")]),s._v("元素和子元素"),a("code",[s._v("el-radio")]),s._v("可以实现单选组，在"),a("code",[s._v("el-radio-group")]),s._v("中绑定"),a("code",[s._v("v-model")]),s._v("，在"),a("code",[s._v("el-radio")]),s._v("中设置好"),a("code",[s._v("label")]),s._v("即可，无需再给每一个"),a("code",[s._v("el-radio")]),s._v("绑定变量，另外，还提供了"),a("code",[s._v("change")]),s._v("事件来响应变化，它会传入一个参数"),a("code",[s._v("value")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("按钮样式的单选组合。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio-group v-model="radio3">\n    <el-radio-button label="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></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="上海"></el-radio-button>\n    <el-radio-button label="北京" :disabled="true"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></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="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></el-radio-button>\n  </el-radio-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio3: '上海',\n        radio4: '上海',\n        radio5: '上海'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京",disabled:!0}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)]],2),a("p",[s._v("只需要把"),a("code",[s._v("el-radio")]),s._v("元素换成"),a("code",[s._v("el-radio-button")]),s._v("元素即可，此外，Element 还提供了"),a("code",[s._v("size")]),s._v("属性给按钮组，支持"),a("code",[s._v("large")]),s._v("和"),a("code",[s._v("small")]),s._v("两种（如果不设定为默认）。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio 单选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string,number,boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("Radio 按钮组尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值变化时触发的事件")]),a("td",[s._v("选中的 Radio label 值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(437)},function(s,t,a){function l(s){a(438)}var n=a(13)(a(440),a(441),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("评分组件")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</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() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认不区分颜色")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("区分颜色")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._v("评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过"),a("code",[s._v("colors")]),s._v("属性设置，而它们对应的两个阈值则通过 "),a("code",[s._v("low-threshold")]),s._v(" 和 "),a("code",[s._v("high-threshold")]),s._v(" 设定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认不区分颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("区分颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用辅助文字直接地表达对应分数")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value3" show-text>\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("show-text")]),s._v(" 属性会在右侧显示辅助文字。通过设置 "),a("code",[s._v("texts")]),s._v(" 可以为每一个分值指定对应的辅助文字。"),a("code",[s._v("texts")]),s._v(" 为一个数组，长度应等于最大值 "),a("code",[s._v("max")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),a("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() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("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:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("设置"),a("code",[s._v("icon-classes")]),s._v("属性可以自定义对应 3 个不同分段的图标。本例还使用"),a("code",[s._v("void-icon-class")]),s._v("指定了未选中时的图标类名。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("只读的评分用来展示分数，允许出现半星")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value}">\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value}"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("disabled")]),s._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),a("code",[s._v("show-text")]),s._v("，则会在右侧显示目前的分值。可以提供 "),a("code",[s._v("text-template")]),s._v(" 作为显示模板，模板为一个包含了 "),a("code",[s._v("{value}")]),s._v(" 的字符串，"),a("code",[s._v("{value}")]),s._v(" 会被解析为分值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value}"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate-ping-fen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate 评分")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-wen-zi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助文字")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其它 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 只读")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大分值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否为只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("是否允许半选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("低分和中等分数的界限值，值本身被划分在低分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("高分和中等分数的界限值，值本身被划分在高分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("只读时未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("只读时未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示辅助文字")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("辅助文字的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("辅助文字数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("只读时的辅助文字模板")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("分值改变时触发")]),a("td",[s._v("改变后的分值")])])])])}]}},function(s,t,a){s.exports=a(443)},function(s,t,a){function l(s){a(444)}var n=a(13)(a(446),a(447),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],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(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当选项过多时，使用下拉菜单展示并选择内容。")]),s._m(1),a("p",[s._v("适用广泛的基础单选")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value" placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v("的值为当前被选中的"),a("code",[s._v("el-option")]),s._v("的 value 属性值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value2" placeholder="请选择">\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() {\n      return {\n        options2: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value2: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("在"),a("code",[s._v("el-option")]),s._v("中，设定"),a("code",[s._v("disabled")]),s._v("值为 true，即可禁用该选项")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("选择器不可用状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value3" disabled placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value3: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"请选择"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，则整个选择器不可用")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  \n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含清空按钮，可将选择器清空为初始状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value4" clearable placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value4: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"请选择"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("clearable")]),s._v("属性，则可将选择器清空。需要注意的是，"),a("code",[s._v("clearable")]),s._v("属性仅适用于单选。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("适用性较广的基础多选，用 Tag 展示已选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value5" multiple placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value5: []\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"请选择"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("multiple")]),s._v("属性即可启用多选，此时"),a("code",[s._v("v-model")]),s._v("的值为当前选中值所组成的数组")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("可以自定义备选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value6" placeholder="请选择">\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() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value6: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("将自定义的 HTML 模板插入"),a("code",[s._v("el-option")]),s._v("的 slot 中即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("备选项进行分组展示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value7" placeholder="请选择">\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() {\n      return {\n        options3: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("使用"),a("code",[s._v("el-option-group")]),s._v("对备选项进行分组，它的"),a("code",[s._v("label")]),s._v("属性为分组名")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{
+staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'热门城市'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'城市名'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'大连'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以利用搜索功能快速查找选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value8" filterable placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value8: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("添加"),a("code",[s._v("filterable")]),s._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),a("code",[s._v("label")]),s._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),a("code",[s._v("filter-method")]),s._v("来实现。"),a("code",[s._v("filter-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("从服务器搜索数据，输入关键字进行查找")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value9" multiple filterable="" remote placeholder="请输入关键词" :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() {\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() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"请输入关键词","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为了启用远程搜索，需要将"),a("code",[s._v("filterable")]),s._v("和"),a("code",[s._v("remote")]),s._v("设置为"),a("code",[s._v("true")]),s._v("，同时传入一个"),a("code",[s._v("remote-method")]),s._v("。"),a("code",[s._v("remote-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),a("code",[s._v("el-option")]),s._v("是通过"),a("code",[s._v("v-for")]),s._v("指令渲染出来的，此时需要为"),a("code",[s._v("el-option")]),s._v("添加"),a("code",[s._v("key")]),s._v("属性，且其值需具有唯一性，比如此例中的"),a("code",[s._v("item.value")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入关键词"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n      });\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      remoteMethod(query) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n          setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n            });\n          }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("可以创建并选中选项中不存在的条目")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value10" multiple filterable="" allow-create placeholder="请选择文章标签">\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() {\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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"请选择文章标签"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("使用"),a("code",[s._v("allow-create")]),s._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),a("code",[s._v("filterable")]),s._v("必须为真。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择文章标签"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select 选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可清空单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 创建条目")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("是否多选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("单选时是否可以清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("select input 的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("是否允许用户创建新条目，需配合 "),a("code",[s._v("filterable")]),s._v(" 使用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("自定义过滤方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("是否为远程搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("远程搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否正在从远程获取数据")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("远程加载时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("加载中")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("搜索条件无匹配时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无匹配数据")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("选项为空时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无数据")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Select 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("选中值发生变化时触发")]),a("td",[s._v("目前的选中值")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("多选模式下移除tag时触发")]),a("td",[s._v("移除的tag值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("分组的组名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否将该分组下所有选项置为禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("选项的值")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项的标签，若不设置则默认与 "),a("code",[s._v("value")]),s._v(" 相同")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用该选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])]);
+}]}},function(s,t,a){s.exports=a(449)},function(s,t,a){function l(s){a(450)}var n=a(13)(a(452),a(453),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过拖动滑块在一个固定区间内进行选择")]),s._m(1),a("p",[s._v("在拖动滑块时，显示当前值")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("自定义初始值")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("隐藏 Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("格式化 Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("禁用")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("通过设置绑定值自定义滑块的初始值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("自定义初始值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("隐藏 Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("格式化 Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("禁用"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatTooltip(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项可以是离散的")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">不显示间断点</span>\n    <el-slider v-model="value6" :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("不显示间断点")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示间断点")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("改变"),a("code",[s._v("step")]),s._v("的值可以改变步长，通过设置"),a("code",[s._v("show-step")]),s._v("属性可以显示间断点")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("不显示间断点"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("显示间断点"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过输入框设置精确数值")]),a("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() {\n      return {\n        value8: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("show-input")]),s._v("属性会在右侧显示一个输入框")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持选择某一数值范围")]),a("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() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("range")]),s._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\n      return {\n        value10: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("vertical")]),s._v("可使 Slider 变成竖向模式，此时必须设置高度"),a("code",[s._v("height")]),s._v("属性")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider-hua-kuai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider 滑块")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-san-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 离散值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fan-wei-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 范围选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-xiang-mo-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 竖向模式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("是否显示输入框，仅在非范围选择时有效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("是否显示间断点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("是否显示 tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("格式化 tooltip message")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("是否为范围选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("是否竖向模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider 高度，竖向模式时必填")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),a("td",[s._v("改变后的值")])])])])}]}},function(s,t,a){s.exports=a(455)},function(s,t,a){var l=a(13)(a(456),a(457),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),s._m(1),a("p",[s._v("简单的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("下一步")])],1),a("p",[s._v("设置"),a("code",[s._v("active")]),s._v("属性，接受一个"),a("code",[s._v("Number")]),s._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),a("code",[s._v("space")]),s._v("属性即可，它接受"),a("code",[s._v("Boolean")]),s._v("，单位为"),a("code",[s._v("px")]),s._v("，如果不设置，则为自适应。设置"),a("code",[s._v("finish-status")]),s._v("属性可以改变已经完成的步骤的状态。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("下一步"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      };\n    },\n\n    "),a("span",{
+staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      next() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每一步骤显示出该步骤的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1" finish-status="success">\n  <el-step title="已完成"></el-step>\n  <el-step title="进行中"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"已完成"}}),a("el-step",{attrs:{title:"进行中"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("p",[s._v("也可以使用"),a("code",[s._v("title")]),s._v("具名分发，可以用"),a("code",[s._v("slot")]),s._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"已完成"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"进行中"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("每个步骤有其对应的步骤状态描述。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="200" :active="1">\n  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1}},[a("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("步骤条内可以启用各种自定义的图标。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1">\n  <el-step title="步骤 1" icon="edit"></el-step>\n  <el-step title="步骤 2" icon="upload"></el-step>\n  <el-step title="步骤 3" icon="picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"步骤 1",icon:"edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"picture"}})],1)],1),a("p",[s._v("通过"),a("code",[s._v("icon")]),s._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),a("code",[s._v("slot")]),s._v("来使用自定义的图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("竖直方向的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" direction="vertical" :active="1">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("p",[s._v("只需要在"),a("code",[s._v("el-steps")]),s._v("元素中设置"),a("code",[s._v("direction")]),s._v("属性为"),a("code",[s._v("vertical")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps 步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 含状态步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有描述的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图标的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 竖式步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("显示方向")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("设置当前激活步骤")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("设置当前步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("设置结束步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("标题描述居中对齐")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("组件居中显示")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")]),a("td",[s._v("Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")])])])])}]}},function(s,t,a){s.exports=a(459)},function(s,t,a){function l(s){a(460)}var n=a(13)(a(462),a(463),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:"100",value4:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),s._m(1),a("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() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("绑定"),a("code",[s._v("v-model")]),s._v("到一个"),a("code",[s._v("Boolean")]),s._v("类型的变量。可以使用"),a("code",[s._v("on-text")]),s._v("属性与"),a("code",[s._v("off-text")]),s._v("属性来设置开关的文字描述，使用"),a("code",[s._v("on-color")]),s._v("属性与"),a("code",[s._v("off-color")]),s._v("属性来设置开关的背景色。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        value3: '100'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value3,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1)],1),a("p",[s._v("设置"),a("code",[s._v("on-value")]),s._v("和"),a("code",[s._v("off-value")]),s._v("属性，接受"),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v("或"),a("code",[s._v("Number")]),s._v("类型的值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Switch value: ' + value3\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'100'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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',script:"\n  export default {\n    data() {\n      return {\n        value4: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":"",disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，接受一个"),a("code",[s._v("Boolean")]),s._v("，设置"),a("code",[s._v("true")]),s._v("即可禁用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch-kai-guan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch 开关")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 扩展的 value 类型")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("switch 的宽度（像素）")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58（有文字）/ 46（无文字）")])]),a("tr",[a("td",[s._v("on-icon-class")]),a("td",[s._v("switch 打开时所显示图标的类名，设置此项会忽略 "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-icon-class")]),a("td",[s._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("switch 打开时的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("switch 关闭时的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch 打开时的值")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch 关闭时的值")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("switch 打开时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("switch 关闭时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("switch 对应的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("switch 状态发生变化时的回调函数")]),a("td",[s._v("新状态的值")])])])])}]}},function(s,t,a){s.exports=a(465)},function(s,t,a){function l(s){a(466)}var n=a(13)(a(468),a(469),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"}],tableData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],tableData3:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333}],tableData4:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}],tableData5:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",
+name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}],tableData6:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="总价");var n=a.map(function(t){return Number(t[s.property])});n.every(function(s){return isNaN(s)})?l[t]="N/A":(l[t]=n.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0),l[t]+=" 元")}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$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)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),s._m(1),a("p",[s._v("基础的表格展示用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'  <template>\n    <el-table :data="tableData" style="width: 100%">\n      <el-table-column prop="date" label="日期" width="180">\n      </el-table-column>\n      <el-table-column prop="name" label="姓名" width="180">\n      </el-table-column>\n      <el-table-column prop="address" label="地址">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  \n',script:"\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  ",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("当"),a("code",[s._v("el-table")]),s._v("元素中注入"),a("code",[s._v("data")]),s._v("对象数组后，在"),a("code",[s._v("el-table-column")]),s._v("中用"),a("code",[s._v("prop")]),s._v("属性来对应对象中的键名即可填入数据，用"),a("code",[s._v("label")]),s._v("属性来定义表格的列名。可以使用"),a("code",[s._v("width")]),s._v("属性来定义列宽。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v("  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n      data() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[a("code",[s._v("stripe")]),s._v("属性可以创建带斑马纹的表格。它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即为启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),a("code",[s._v("border")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    methods: {\n      tableRowClassName(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() {\n      return {\n        tableData2: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("可以通过指定 Table 组件的 "),a("code",[s._v("row-class-name")]),s._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      tableRowClassName(row, index) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("纵向内容过多时，可选择固定表头。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("只要在"),a("code",[s._v("el-table")]),s._v("元素中定义了"),a("code",[s._v("height")]),s._v("属性，即可实现固定表头的表格，而不需要额外的代码。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("横向内容过多时，可选择固定列。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="操作" width="100">\n      <template scope="scope">\n        <el-button @click="handleClick" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      handleClick() {\n        console.log(1);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("查看")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("编辑")])]}]])})],1)]],2),a("p",[s._v("固定列需要使用"),a("code",[s._v("fixed")]),s._v("属性，它接受 Boolean 值或者"),a("code",[s._v("left")]),a("code",[s._v("right")]),s._v("，表示左边固定还是右边固定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("查看"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("编辑"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("横纵内容过多时，可选择固定列和表头。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2),a("p",[s._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="操作" width="120">\n      <template scope="scope">\n        <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">\n          移除\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(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData4: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n          移除\n        ")])]}]])})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("max-height")]),s._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n          移除\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      deleteRow(index, rows) {\n        rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column label="配送信息">\n      <el-table-column prop="name" label="姓名" width="120">\n      </el-table-column>\n      <el-table-column label="地址">\n        <el-table-column prop="province" label="省份" width="120">\n        </el-table-column>\n        <el-table-column prop="city" label="市区" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="地址" width="300">\n        </el-table-column>\n        <el-table-column prop="zip" label="邮编" 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() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{label:"配送信息"}},[a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{label:"地址"}},[a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配送信息"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("选择单行数据时使用色块表示。")]),a("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="日期" width="120">\n    </el-table-column>\n    <el-table-column property="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column property="address" label="地址">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>\n    <el-button @click="setCurrent()">取消选择</el-button>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("选中第二行")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("取消选择")])],1)]],2),a("p",[s._v("Table 组件提供了单选的支持，只需要配置"),a("code",[s._v("highlight-current-row")]),s._v("属性即可实现单选。之后由"),a("code",[s._v("current-change")]),s._v("事件来管理选中时触发的事件，它会传入"),a("code",[s._v("currentRow")]),s._v("，"),a("code",[s._v("oldCurrentRow")]),s._v("。如果需要显示索引，可以增加一列"),a("code",[s._v("el-table-column")]),s._v("，设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("index")]),s._v("即可显示从 1 开始的索引号。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"singleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current-row")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"index"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("选中第二行"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent()"')]),s._v(">")]),s._v("取消选择"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      setCurrent(row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("选择多行数据时使用 Checkbox。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">\n    <el-table-column type="selection" width="55">\n    </el-table-column>\n    <el-table-column label="日期" width="120">\n      <template scope="scope">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" 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]])">切换第二、第三行的选中状态</el-button>\n    <el-button @click="toggleSelection()">取消选择</el-button>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"","tooltip-effect":"dark"},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:s._u([["default",function(t){return[s._v(s._s(t.row.date))]}]])}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("切换第二、第三行的选中状态")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("取消选择")])],1)]],2),a("p",[s._v("实现多选非常简单: 手动添加一个"),a("code",[s._v("el-table-column")]),s._v("，设"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("selection")]),s._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),a("code",[s._v("show-overflow-tooltip")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，为"),a("code",[s._v("true")]),s._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"multipleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("tooltip-effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selection"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"55"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("切换第二、第三行的选中状态"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("取消选择"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleSelection(rows) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (rows) {\n          rows.forEach("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("row")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n          });\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("对表格进行排序，可快速查找或对比数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%" :default-sort="{prop: \'date\', order: \'descending\'}">\n    <el-table-column prop="date" label="日期" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" :formatter="formatter">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}})],1)]],2),a("p",[s._v("可以通过表的"),a("code",[s._v("default-sort")]),s._v("属性设置默认的排序列和排序顺序。在列中设置"),a("code",[s._v("sortable")]),s._v("属性即可实现以该列为基准的排序，接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("。在本例中，我们还使用了"),a("code",[s._v("formatter")]),s._v("属性，它用于格式化指定列的值，接受一个"),a("code",[s._v("Function")]),s._v("，会传入两个参数："),a("code",[s._v("row")]),s._v("和"),a("code",[s._v("column")]),s._v("，可以根据自己的需求进行处理。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"
+},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("对表格进行筛选，可快速查找到自己想看的数据。")]),a("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="日期" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" :formatter="formatter">\n    </el-table-column>\n    <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: \'家\', value: \'家\' }, { text: \'公司\', value: \'公司\' }]" :filter-method="filterTag">\n      <template scope="scope">\n        <el-tag :type="scope.row.tag === \'家\' ? \'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() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":s.filterTag},scopedSlots:s._u([["default",function(t){return[a("el-tag",{attrs:{type:"家"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}]])})],1)]],2),a("p",[s._v("在列中设置"),a("code",[s._v("filters")]),a("code",[s._v("filter-method")]),s._v("属性即可开启该列的筛选，filters 是一个数组，"),a("code",[s._v("filter-method")]),s._v("是一个方法，它用于决定某些数据是否显示，会传入两个参数："),a("code",[s._v("value")]),s._v("和"),a("code",[s._v("row")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标签"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === '家' ? 'primary' : 'success'\"")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'家'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'公司'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'家'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'公司'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("自定义列的显示内容，可组合其他组件使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column label="日期" width="180">\n      <template 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="姓名" width="180">\n      <template scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ 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="操作">\n      <template scope="scope">\n        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}]])}),a("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("姓名: "+s._s(t.row.name))]),a("p",[s._v("住址: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}]])}),a("el-table-column",{attrs:{label:"操作"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("编辑")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("删除")])]}]])})],1)]],2),a("p",[s._v("通过 "),a("code",[s._v("Scoped slot")]),s._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。("),a("code",[s._v("1.1")]),s._v(" 后支持通过 "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(" 自定义模板。之前的 "),a("code",[s._v("inline-template")]),s._v(" 同样适用，但不推荐。)")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("姓名: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("住址: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("编辑"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData5" style="width: 100%">\n    <el-table-column type="expand">\n      <template scope="props">\n        <el-form label-position="left" inline class="demo-table-expand">\n          <el-form-item label="商品名称">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label="所属店铺">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label="商品 ID">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label="店铺 ID">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label="商品分类">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label="店铺地址">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label="商品描述">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column label="商品 ID" prop="id">\n    </el-table-column>\n    <el-table-column label="商品名称" prop="name">\n    </el-table-column>\n    <el-table-column label="描述" prop="desc">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData5: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n",style:"\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n"
+}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData5}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([["default",function(t){return[a("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[a("el-form-item",{attrs:{label:"商品名称"}},[a("span",[s._v(s._s(t.row.name))])]),a("el-form-item",{attrs:{label:"所属店铺"}},[a("span",[s._v(s._s(t.row.shop))])]),a("el-form-item",{attrs:{label:"商品 ID"}},[a("span",[s._v(s._s(t.row.id))])]),a("el-form-item",{attrs:{label:"店铺 ID"}},[a("span",[s._v(s._s(t.row.shopId))])]),a("el-form-item",{attrs:{label:"商品分类"}},[a("span",[s._v(s._s(t.row.category))])]),a("el-form-item",{attrs:{label:"店铺地址"}},[a("span",[s._v(s._s(t.row.address))])]),a("el-form-item",{attrs:{label:"商品描述"}},[a("span",[s._v(s._s(t.row.desc))])])],1)]}]])}),a("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),a("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),a("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2),a("p",[s._v('通过设置 type="expand" 和 '),a("code",[s._v("Scoped slot")]),s._v(" 可以开启展开行功能，"),a("code",[s._v("el-table-column")]),s._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),a("code",[s._v("Scoped slot")]),s._v(" 相同。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("inline")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-table-expand"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品名称"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"所属店铺"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.shop "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品 ID"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.id "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"店铺 ID"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.shopId "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品分类"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.category "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"店铺地址"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品描述"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.desc "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品 ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品名称"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"描述"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("label")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("90px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-form-item")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50%")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),a("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="姓名">\n    </el-table-column>\n    <el-table-column prop="amount1" sortable label="数值 1">\n    </el-table-column>\n    <el-table-column prop="amount2" sortable label="数值 2">\n    </el-table-column>\n    <el-table-column prop="amount3" sortable label="数值 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="姓名">\n    </el-table-column>\n    <el-table-column prop="amount1" label="数值 1（元）">\n    </el-table-column>\n    <el-table-column prop="amount2" label="数值 2（元）">\n    </el-table-column>\n    <el-table-column prop="amount3" label="数值 3（元）">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData6: [{\n          id: '12987122',\n          name: '王小虎',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: '王小虎',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: '王小虎',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: '王小虎',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: '王小虎',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = '总价';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n            sums[index] += ' 元';\n          } else {\n            sums[index] = 'N/A';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),a("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),a("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2),a("p",[s._v("将"),a("code",[s._v("show-summary")]),s._v("设置为"),a("code",[s._v("true")]),s._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),a("code",[s._v("sum-text")]),s._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),a("code",[s._v("summary-method")]),s._v("并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  \n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":summary-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getSummaries"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 1（元）"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 2（元）"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 3（元）"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData6")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'234'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'3.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'165'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.43'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987124'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'324'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1.9'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'621'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("17")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'539'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getSummaries(param) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { columns, data } = param;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" sums = [];\n        columns.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'总价'")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(";\n          }\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" values = data.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(item[column.property]));\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!values.every("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value))) {\n            sums[index] = values.reduce("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" value = "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(curr);\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value)) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev + curr;\n              } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev;\n              }\n            }, "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n            sums[index] += "),a("span",{staticClass:"hljs-string"},[s._v("' 元'")]),s._v(";\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'N/A'")]),s._v(";\n          }\n        });\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" sums;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table 表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带斑马纹表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带边框表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带状态表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列和表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"liu-ti-gao-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 流体高度")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-ji-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多级表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"pai-xu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 排序")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shai-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 筛选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义列模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhan-kai-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 展开行")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表尾合计行")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("显示的数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table 的最大高度")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("是否为斑马纹 table")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("是否带有纵向边框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("列的宽度是否自撑开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("是否显示表头")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("是否要高亮当前行")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("当前行的 key，只写属性")]),a("td",[s._v("String,Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("空数据时显示的文本内容，也可以通过 "),a("code",[s._v('slot="empty"')]),s._v(" 设置")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("暂无数据")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("默认的排序列的prop和顺序。它的"),a("code",[s._v("prop")]),s._v("属性指定默认的排序的列，"),a("code",[s._v("order")]),s._v("指定默认排序的顺序")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("如果只指定了"),a("code",[s._v("prop")]),s._v(", 没有指定"),a("code",[s._v("order")]),s._v(", 则默认顺序是ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" 属性")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("是否在表尾显示合计行")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("合计行第一列的文本")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("合计")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("自定义的合计计算方法")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("当用户手动勾选全选 Checkbox 时触发的事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("当选择项发生变化时会触发该事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("当单元格 hover 进入时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("当单元格 hover 退出时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("当某个单元格被点击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("当某个单元格被双击击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("当某一行被点击时会触发该事件")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("当某一行被鼠标右键点击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("当某一行被双击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("当某一列的表头被点击时会触发该事件")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("当表格的排序条件发生变化的时候会触发该事件")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("当拖动表头改变了列的宽度的时候会触发该事件")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("当用户对某一行展开或者关闭的上会触发该事件")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),a("td",[s._v("row")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("插入至表格最后一行之后的内容，仍然位于 "),a("code",[s._v("<tbody>")]),s._v(" 标签内。如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("对应列的类型。如果设置了 "),a("code",[s._v("selection")]),s._v(" 则显示多选框；如果设置了 "),a("code",[s._v("index")]),s._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("显示的标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("对应列内容的字段名，也可以使用 property 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("对应列的宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),a("td",[s._v("string, boolean")]),a("td",[s._v("true, left, right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("列标题 Label 区域渲染使用的 Function")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, 'custom'")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("用来格式化内容")]),a("td",[s._v("Function(row, column)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("当内容过长被隐藏时显示 tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("列的 className")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("当前列标题的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("数据过滤的选项是否多选")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(471)},function(s,t,a){var l=a(13)(a(472),a(473),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("分隔内容上有关联但属于不同类别的数据集合。")]),s._m(1),a("p",[s._v("基础的、简洁的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: 'second'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),a("code",[s._v("value")]),s._v(" 属性来指定当前选中的标签页。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'second'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项卡样式的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName2: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick},model:{value:s.activeName2,callback:function(t){s.activeName2=t},expression:"activeName2"}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("只需要设置 "),a("code",[s._v("type")]),s._v(" 属性为 "),a("code",[s._v("card")]),s._v(" 就可以使选项卡改变为标签风格。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("卡片化的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n  <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n  <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"用户管理"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("p",[s._v("将"),a("code",[s._v("type")]),s._v("设置为"),a("code",[s._v("border-card")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" 我的行程")]),s._v("\n    我的行程\n  ")]),a("el-tab-pane",{attrs:{label:"消息中心"}},[s._v("消息中心")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" 我的行程"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    我的行程\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息中心"')]),s._v(">")]),s._v("消息中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">\n  <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\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(targetName, action) {\n        if (action === 'add') {\n          let 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          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let 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(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleTabsEdit(targetName, action) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n          });\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n            tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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() {\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(targetName) {\n        let 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(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let 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(tab => tab.name !== targetName);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n    add tab\n  ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n  >")]),s._v("\n    add tab\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs 标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选项卡样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以通过具名 "),a("code",[s._v("slot")]),s._v(" 来实现自定义标签页的内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义增加标签页触发器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("风格类型")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("标签是否可增加")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("标签是否同时可增加和关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("选中选项卡的 name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("第一个选项卡的 name")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值，选中选项卡的 name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("第一个选项卡的 name")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("tab 被选中时触发")]),a("td",[s._v("被选中的标签 tab 实例")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("点击 tab 移除按钮后触发")]),a("td",[s._v("被删除的标签的 name")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("点击 tabs 的新增按钮后触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项卡标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("与选项卡 activeName 对应的标识符，表示选项卡别名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(475)},function(s,t,a){function l(s){a(476)}var n=a(13)(a(478),a(479),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"gray"},{name:"标签三",type:"primary"},{name:"标签四",type:"success"},{name:"标签五",type:"warning"},{name:"标签六",type:"danger"}],dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于标记和选择。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>标签一</el-tag>\n<el-tag type="gray">标签二</el-tag>\n<el-tag type="primary">标签三</el-tag>\n<el-tag type="success">标签四</el-tag>\n<el-tag type="warning">标签五</el-tag>\n<el-tag type="danger">标签六</el-tag>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("标签一")]),a("el-tag",{attrs:{type:"gray"}},[s._v("标签二")]),a("el-tag",{attrs:{type:"primary"}},[s._v("标签三")]),a("el-tag",{attrs:{type:"success"}},[s._v("标签四")]),a("el-tag",{attrs:{type:"warning"}},[s._v("标签五")]),a("el-tag",{attrs:{type:"danger"}},[s._v("标签六")])],1),a("p",[s._v("由"),a("code",[s._v("type")]),s._v("属性来选择tag的类型，也可以通过"),a("code",[s._v("color")]),s._v("属性来自定义背景色。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("标签一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("标签二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("标签三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("标签四"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("标签五"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("标签六"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :key="item.name" :closable="true" :type="tag.type">\n{{tag.name}}\n</el-tag>\n\n\n',
+script:"\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签二', type: 'gray' },\n          { name: '标签三', type: 'primary' },\n          { name: '标签四', type: 'success' },\n          { name: '标签五', type: 'warning' },\n          { name: '标签六', type: 'danger' }\n        ]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:s.item.name,attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[s._v("设置"),a("code",[s._v("closable")]),s._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),a("code",[s._v("close-transition")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，true 为关闭。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签一'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签二'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签三'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签四'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签五'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签六'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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() {\n      return {\n        dynamicTags: ['标签一', '标签二', '标签三'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let 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}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13)?void s.handleInputConfirm(t):null}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'标签一'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标签二'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标签三'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(tag) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      },\n\n      showInput() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag 标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可移除标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态编辑标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),a("code",[s._v("close")]),s._v(" 事件来实现")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("是否禁用关闭时的渐变动画")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("是否有边框描边")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭tag时触发的事件")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(481)},function(s,t,a){function l(s){a(482)}var n=a(13)(a(484),a(485),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于选择或输入日期")]),s._m(1),a("p",[s._v("提供几个固定的时间点供用户选择")]),a("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=\"选择时间\">\n</el-time-select>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("使用 el-time-select 标签，分别通过"),a("code",[s._v("star")]),s._v("、"),a("code",[s._v("end")]),s._v("和"),a("code",[s._v("step")]),s._v("指定可选的起始时间、结束时间和步长")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以选择任意时间")]),a("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="任意时间点">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("使用 el-time-picker 标签，通过"),a("code",[s._v("selectableRange")]),s._v("限制可选时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"任意时间点"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n  <el-time-select placeholder=\"起始时间\" 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=\"结束时间\" 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() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"起始时间"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"结束时间"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可选择任意的时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-time-picker is-range v-model="value3" placeholder="选择时间范围">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"",placeholder:"选择时间范围"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("添加"),a("code",[s._v("is-range")]),s._v("属性即可选择时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker 时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("TimePicker: DateTimeSelect: String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("TimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("开始时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("结束时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("间隔时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("最小时间，小于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("最大时间，大于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("可选时间段，例如"),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("或者传入数组"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间格式化(TimePicker)")]),a("td",[s._v("string")]),a("td",[s._v("小时："),a("code",[s._v("HH")]),s._v("，分："),a("code",[s._v("mm")]),s._v("，秒："),a("code",[s._v("ss")])]),a("td",[s._v("'HH:mm:ss'")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(487)},function(s,t,a){function l(s){a(488)}var n=a(13)(a(490),a(491),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用于展示鼠标 hover 时的提示信息。")]),s._m(1),a("p",[s._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),a("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 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <el-button>下右</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: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[a("el-button",[s._v("上左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[a("el-button",[s._v("上边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[a("el-button",[s._v("上右")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[a("el-button",[s._v("左上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[a("el-button",[s._v("左边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[a("el-button",[s._v("左下")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[a("el-button",[s._v("右上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[a("el-button",[s._v("右边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[a("el-button",[s._v("右下")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[a("el-button",[s._v("下左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[a("el-button",[s._v("下边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[a("el-button",[s._v("下右")])],1)],1)])]),a("p",[s._v("使用"),a("code",[s._v("content")]),s._v("属性来决定"),a("code",[s._v("hover")]),s._v("时的提示信息。由"),a("code",[s._v("placement")]),s._v("属性决定展示效果："),a("code",[s._v("placement")]),s._v("属性值为："),a("code",[s._v("方向-对齐位置")]),s._v("；四个方向："),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("、"),a("code",[s._v("right")]),s._v("、"),a("code",[s._v("bottom")]),s._v("；三种对齐位置："),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v("，默认为空。如"),a("code",[s._v('placement="left-end"')]),s._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上左"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上右"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左上"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左下"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右上"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右下"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下左"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下右"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("通过设置"),a("code",[s._v("effect")]),s._v("属性来改变主题，默认为"),a("code",[s._v("dark")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("展示多行文本或者是设置文本内容的格式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip placement="top">\n  <div slot="content">多行信息<br>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("多行信息"),a("br"),s._v("第二行信息")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("用具名 slot 分发"),a("code",[s._v("content")]),s._v("，替代"),a("code",[s._v("tooltip")]),s._v("中的"),a("code",[s._v("content")]),s._v("属性。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("多行信息"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("第二行信息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("点击"+s._s(s.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"点击关闭 tooltip 功能"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("点击"),a("span",[s._v("{{")]),s._v("disabled ? '开启' : '关闭'"),a("span",[s._v("}}")]),s._v(" tooltip 功能"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip 文字提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip 组件提供了两个不同的主题："),a("code",[s._v("dark")]),s._v("和"),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"geng-duo-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更多 Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 高级扩展")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._v(" 属性可以定制显隐的动画效果，默认为"),a("code",[s._v("fade-in-linear")]),s._v("。\n如果需要关闭 "),a("code",[s._v("tooltip")]),s._v(" 功能，"),a("code",[s._v("disabled")]),s._v(" 属性可以满足这个需求，它接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("事实上，这是基于 "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("tooltip 内不支持 "),a("code",[s._v("router-link")]),s._v(" 组件，请使用 "),a("code",[s._v("vm.$router.push")]),s._v(" 代替。")]),a("p",[s._v("tooltip 内不支持 disabled form 元素，参考"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("默认提供的主题")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",[s._v("slot#content")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("Tooltip 的出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Tooltip 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"
+}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("延迟出现，单位毫秒")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 Tooltip 的 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("鼠标是否可进入到 tooltip 中")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(493)},function(s,t,a){function l(s){a(494)}var n=a(13)(a(496),a(497),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"备选项 "+a,disabled:a%4===0});return t},t=function(s){var t=[],a=["上海","北京","广州","深圳","南京","西安","成都"],l=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"];return a.forEach(function(s,a){t.push({label:s,key:a,pinyin:l[a]})}),t},a=function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"备选项 "+a,disabled:a%4===0});return t};return{data:s(),data2:t(),data3:a(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.pinyin.indexOf(s)>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-transfer v-model="value1" :data="data"></el-transfer>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Transfer 的数据通过 "),a("code",[s._v("data")]),s._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),a("code",[s._v("key")]),s._v(" 为数据的唯一性标识，"),a("code",[s._v("label")]),s._v(" 为显示文本，"),a("code",[s._v("disabled")]),s._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),a("code",[s._v("v-model")]),s._v(" 的变量，值为数据项的 "),a("code",[s._v("key")]),s._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),a("code",[s._v("v-model")]),s._v(" 绑定的变量赋予一个初始值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`备选项 "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入城市拼音" v-model="value2" :data="data2">\n  </el-transfer>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n        cities.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            pinyin: pinyin[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.pinyin.indexOf(query) > -1;\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"请输入城市拼音",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("设置 "),a("code",[s._v("filterable")]),s._v(" 为 "),a("code",[s._v("true")]),s._v(" 即可开启搜索模式。默认情况下，若数据项的 "),a("code",[s._v("label")]),s._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),a("code",[s._v("filter-method")]),s._v(" 定义自己的搜索逻辑。"),a("code",[s._v("filter-method")]),s._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),a("code",[s._v("true")]),s._v("，则会在搜索结果中显示对应的数据项。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入城市拼音"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData2 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cities = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'西安'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" pinyin = ["),a("span",{staticClass:"hljs-string"},[s._v("'shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'shenzhen'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'nanjing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'xian'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'chengdu'")]),s._v("];\n        cities.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": city,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": index,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("pinyin")]),s._v(": pinyin[index]\n          });\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": generateData2(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": [],\n        filterMethod(query, item) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.pinyin.indexOf(query) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),a("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="[\'到左边\', \'到右边\']" :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">操作</el-button>\n    <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n  </el-transfer>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ 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(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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["到左边","到右边"],"footer-format":{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"left-footer"},[s._v("操作")]),a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"right-footer"},[s._v("操作")])],1)]],2),a("p",[s._v("可以使用 "),a("code",[s._v("titles")]),s._v("、"),a("code",[s._v("button-texts")]),s._v("、"),a("code",[s._v("render-content")]),s._v(" 和 "),a("code",[s._v("footer-format")]),s._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表底部的勾选状态文案进行自定义。对于列表底部的内容区，提供了两个具名 slot："),a("code",[s._v("left-footer")]),s._v(" 和 "),a("code",[s._v("right-footer")]),s._v("。此外，如果希望某些数据项在初始化时就被勾选，可以使用 "),a("code",[s._v("left-default-checked")]),s._v(" 和 "),a("code",[s._v("right-default-checked")]),s._v(" 属性。最后，本例还展示了 "),a("code",[s._v("change")]),s._v(" 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":left-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":right-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[1]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderFunc"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":titles")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['Source', 'Target']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":button-texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['到左边', '到右边']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":footer-format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      noChecked: '${total}',\n      hasChecked: '${checked}/${total}'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transfer-footer")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`备选项 "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n        renderFunc(h, option) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")])]),s._v(";\n        }\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value, direction, movedKeys) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `备选项 ${ 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("本例中的数据源没有 "),a("code",[s._v("key")]),s._v(" 和 "),a("code",[s._v("label")]),s._v(" 字段，在功能上与它们相同的字段名为 "),a("code",[s._v("value")]),s._v(" 和 "),a("code",[s._v("desc")]),s._v("。因此可以使用"),a("code",[s._v("props")]),s._v(" 属性为 "),a("code",[s._v("key")]),s._v(" 和 "),a("code",[s._v("label")]),s._v(" 设置别名。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      key: 'value',\n      label: 'desc'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData3 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`备选项 "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": generateData3(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": []\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer 穿梭框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数据项属性别名")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("默认情况下，Transfer 仅能识别数据项中的 "),a("code",[s._v("key")]),s._v("、"),a("code",[s._v("label")]),s._v(" 和 "),a("code",[s._v("disabled")]),s._v(" 字段。如果你的数据的字段名不同，可以使用 "),a("code",[s._v("props")]),s._v(" 属性为它们设置别名。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("Transfer 的数据源")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("搜索框占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请输入搜索内容")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("自定义搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("自定义列表标题")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['列表 1', '列表 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("自定义按钮文案")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("自定义数据项渲染函数")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("footer-format")]),a("td",[s._v("列表底部勾选状态文案")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '共 ${total} 项', hasChecked: '已选 ${checked}/${total} 项' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("数据源的字段别名")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("初始状态下左侧列表的已勾选项的 key 数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("初始状态下右侧列表的已勾选项的 key 数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("左侧列表底部的内容")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("右侧列表底部的内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("右侧列表元素变化时触发")]),a("td",[s._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])])])])}]}},function(s,t,a){s.exports=a(499)},function(s,t,a){function l(s){a(500)}var n=a(13)(a(502),a(503),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("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: () => ({\n      show: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("提供 "),a("code",[s._v("el-fade-in-linear")]),s._v(" 和 "),a("code",[s._v("el-fade-in")]),s._v(" 两种效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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: () => ({\n      show2: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[s._v("提供 "),a("code",[s._v("el-zoom-in-center")]),s._v("，"),a("code",[s._v("el-zoom-in-top")]),s._v(" 和 "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" 三种效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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: () => ({\n      show3: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 内置过渡动画")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),a("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[s._v("transition 组件文档")]),s._v(" 。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade 淡入淡出")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom-suo-fang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom 缩放")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse 展开折叠")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("el-collapse-transition")]),s._v(" 组件实现折叠展开效果。")])}]}},function(s,t,a){s.exports=a(505)},function(s,t,a){function l(s){a(506)}var n=a(13)(a(508),a(509),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0;var a=[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],l=[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],n=1e3,e=[{name:"region1"},{name:"region2"}],i=1,v={label:"name",children:"zones"},_={children:"children",label:"label"};t.default={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){if(0===s.level)return t([{name:"region1"},{name:"region2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s;s=a?[{name:"zone"+i++},{name:"zone"+i++}]:[],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:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;return s("span",null,[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(e,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,regions:e,defaultProps:_,props:v,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用清晰的层级结构展示信息，可展开或折叠。")]),s._m(1),a("p",[s._v("基础的树形结构展示。")]),a("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: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。")]),a("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: 'region1' }, { name: 'region2' }]);\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(() => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckChange(data, checked, indeterminate) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      },\n      loadNode(node, resolve) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(" }]);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),a("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() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("分别通过"),a("code",[s._v("default-expanded-keys")]),s._v("和"),a("code",[s._v("default-checked-keys")]),s._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),a("code",[s._v("node-key")]),s._v("，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("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">通过 node 获取</el-button>\n  <el-button @click="getCheckedKeys">通过 key 获取</el-button>\n  <el-button @click="setCheckedNodes">通过 node 设置</el-button>\n  <el-button @click="setCheckedKeys">通过 key 设置</el-button>\n  <el-button @click="resetChecked">清空</el-button>\n</div>\n\n\n',script:"\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("通过 node 获取")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("通过 key 获取")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("通过 node 设置")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("通过 key 设置")]),a("el-button",{on:{click:s.resetChecked}},[s._v("清空")])],1)],1),a("p",[s._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),a("code",[s._v("node-key")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("通过 node 获取"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("通过 key 获取"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("通过 node 设置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("通过 key 设置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("清空"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n        }]);\n      },\n      setCheckedKeys() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n      },\n      resetChecked() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),a("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  let id = 1000;\n\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: 'testtest', children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\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={ () => this.append(store, data) }>Append</el-button>\n              <el-button size=\"mini\" on-click={ () => this.remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("使用"),a("code",[s._v("render-content")]),s._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n  export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        data2: [{\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            children: [{\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        defaultProps: {\n          children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n          <span>\n            <span>\n              <span>{node.label}</span>\n            </span>\n            <span style="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; margin-right: 20px"')]),s._v(">\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append</el-button>\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("通过关键字过滤树节点")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="输入关键字进行过滤" 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(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"输入关键字进行过滤"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("在需要对节点进行过滤时，调用 Tree 实例的"),a("code",[s._v("filter")]),s._v("方法，参数为关键字。需要注意的是，此时需要设置"),a("code",[s._v("filter-node-method")]),s._v("，值为过滤函数。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"输入关键字进行过滤"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("对于同一级的节点，每次只能展开一个")]),a("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() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree 树形控件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认展开和默认选中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 树节点的选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义节点内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jie-dian-guo-lu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 节点过滤")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴模式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("展示数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("内容为空的时候展示的文本")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("每个树节点用来作为唯一标识的属性，整颗树应该是唯一的")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体看下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("加载子树数据的方法")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("树节点的内容区的渲染 Function")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("是否高亮当前选中节点，默认值是 false。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("当前选中节点的 key，只写属性")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("是否默认展开所有节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("展开子节点的时候是否自动展开父节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("默认展开的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("节点是否可被选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("默认勾选的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否每次只打开一个同级树节点展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("相邻级节点间的水平缩进，单位为像素")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定节点标签为节点对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定子树为节点对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" 拥有如下方法，返回目前被选中的节点数组：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("对树节点进行筛选操作")]),a("td",[s._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("若节点可被选择（即 "),a("code",[s._v("show-checkbox")]),s._v(" 为 "),a("code",[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅返回被选中的叶子节点，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(nodes) 接收勾选节点数据的数组")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("若节点可被选择（即 "),a("code",[s._v("show-checkbox")]),s._v(" 为 "),a("code",[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅设置叶子节点的选中状态，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("节点被点击时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("节点选中状态发生变化时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当前选中节点变化时触发的事件")]),a("td",[s._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("节点被展开时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("节点被关闭时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])])])])}]}},function(s,t,a){s.exports=a(511)},function(s,t,a){function l(s){a(512)}var n=a(13)(null,a(514),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography 字体")]),a("p",[s._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),a("h3",{attrs:{id:"zhong-wen-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-wen-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中文字体")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"ying-wen-shu-zi-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ying-wen-shu-zi-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 英文／数字字体")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family-dai-ma"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family 代码")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"zi-ti-shi-yong-gui-fan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti-shi-yong-gui-fan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 字体使用规范")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("主标题")]),a("td",{staticClass:"h1"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("标题")]),a("td",{staticClass:"h2"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("小标题")]),a("td",{staticClass:"h3"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("正文")]),a("td",{staticClass:"text-regular"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("正文（小）")]),a("td",{staticClass:"text-small"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("辅助文字")]),a("td",{staticClass:"text-smaller"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(516)},function(s,t,a){function l(s){a(517)}var n=a(13)(a(519),a(520),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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!(s.size>4e7)||(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,a=s.size/1024/1024<2;return t||this.$message.error("上传头像图片只能是 JPG 格式!"),a||this.$message.error("上传头像图片大小不能超过 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过点击或者拖拽上传文件")]),s._m(1),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("p",[s._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{
+staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('上传头像图片只能是 JPG 格式!');\n        }\n        if (!isLt2M) {\n          this.$message.error('上传头像图片大小不能超过 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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'上传头像图片只能是 JPG 格式!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'上传头像图片大小不能超过 2MB!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\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(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\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(file, fileList) {\n        this.fileList3 = fileList.slice(-3);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("将文件拖到此处，或"),a("em",[s._v("点击上传")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("将文件拖到此处，或"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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      submitUpload() {\n        this.$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,"auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("选取文件")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("上传到服务器")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("选取文件"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("上传到服务器"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload 上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-ji-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 点击上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 用户头像上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("before-upload")]),s._v(" 限制用户上传的图片格式和大小。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhao-pian-qiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 照片墙")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("list-type")]),s._v(" 属性来设置文件列表的样式。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图片列表缩略图")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 上传文件列表控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",[s._v("on-change")]),s._v(" 钩子函数来对列表进行控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 拖拽上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-dong-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手动上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("必选参数, 上传的地址")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("可选参数, 设置上传的请求头部")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("可选参数, 是否支持多选文件")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("可选参数, 上传时附带的额外参数")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("可选参数, 上传的文件字段名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("支持发送 cookie 凭证信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("是否显示已上传文件列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("是否启用拖拽上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("可选参数, 接受上传的"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("文件类型")]),s._v("（thumbnail-mode 模式下此参数无效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("可选参数, 文件列表移除文件时的钩子")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("可选参数, 文件上传成功时的钩子")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("可选参数, 文件上传失败时的钩子")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("可选参数, 文件上传时的钩子")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("可选参数, 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("文件列表的类型")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("是否在选取文件后立即进行上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("覆盖默认的上传行为，可以自定义上传的实现")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("清空已上传的文件列表")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/guide.vue":522,"./zh-CN/guide.vue":527};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=521},function(s,t,a){function l(s){a(523)}var n=a(13)(a(525),a(526),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(528)}var n=a(13)(a(530),a(531),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/design.vue":533,"./zh-CN/design.vue":541};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=532},function(s,t,a){function l(s){a(534)}var n=a(13)(null,a(536),l,"data-v-f413aa2a",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Design Disciplines")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(537),alt:"Consistency"}}),l("h4",[s._v("Consistency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(538),alt:"Feedback"}}),l("h4",[s._v("Feedback")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(539),alt:"Efficiency"}}),l("h4",[s._v("Efficiency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(540),alt:"Controllability"}}),l("h4",[s._v("Controllability")]),l("span")])])],1),l("h3",[s._v("Consistency")]),s._m(0),l("h3",[s._v("Feedback")]),s._m(1),l("h3",[s._v("Efficiency")]),s._m(2),l("h3",[s._v("Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("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.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}]}},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl09S47zlHH5x8w8GiR8nGFK82dN6dgnkWWRt/QiE65DQqj9FsmhpzoEqZ/qWgNKSBnBAPh21WPphirQQQFhpXnUS7vggQCUyJNF5zmQfbxdQkkdv3TtSNesNgUI4yeSt/T8cse1FkaElaDpBwYQCZcdhx4JmnBc4X637VumEzRy7vcIE3TJW3pBdek1nDAirASN33qyjQ6xvym5f8Wtmbs6BNFTeVWA6PULi86PwhQ/NIDlMl9eYf4UEBbDZKRhM64AUWmM6OpCgT4PU9LATbCfqGSAKvZX/r6uVQFRQJgIC58Xrxf50MsZmi3zP7De0kt8jZMtBQDfexMF+h7WoR9YhG6CfekWmDedL/HHeNi80T+m6/wpgLF+J0eKdO04EWbxC7+EboL9LLwMh2g7qHf9Y7rOlwKe78FAr/CJWj0DKJEnx+gddEael21dcqgAfO8x0EfRe26C/TzlenCmjC9rMd/sH9N1DhQgOjxZoK29XPc1qtM3gJLYwgJfet5414MbGhPX7WwqgOu+UyMG133j9GW/JeyrCfYzF0PwT7gDffGSf0zXGVUAPhZfRwGfKBQJgJLQRJGO4jHM3TBuSfZ1yZ4C4lvxsfg6qtJFBqAYhBEQb8PIB/HDV1h1yZIC4lPxrfg4ynJFCqAYhhuSr7Chn0dppKY1eAXEp+LbqC2JHEAx8MIi4ZVOo+MHo/bWgNITX4pP48g+kl5wK8Nwe4ZmS+4f0RbvaHVej6VDAQCyd6LoPBzXZVUsNaBIKwZXDdeaMB2orbZSar444fM4WZ1t9Ee+KfFOMvwbqRWjT11TjFoBqTzkmi+uZrfR3sSAwOiZ7QDwz/gFehGq0UjdTk4BwLeE34NxdDhalSIxACXz2Qrf5rp8QAeztnKFBcdwk9m7zxfxrZZOJUsUQDFktsTXoxZ8E8O49LFdJ88kfE4er6HmuyPKm8xBihBbJ6Rd5lJAeY6IXsrhdmH0eMIKwBfik6Thk1ImDqBkKs8RvZEUxjyLf52OJxRRBrCI9mgCnxVfRPVsN2wxEm+Cmw2cqfCtZpnx9ERHVjdrE+e+jGQ2GEza73i+fm0cOIBSAG94f5lfxbXhln4LpPG7K4Ca772RAt3Xz0jm7rkECzGQJrjZNBHCe6nFcZ7QIV3N6kS4L0OpoLFobQN8UjIrasBGiWvvHe/BrZo7G4/rdp8KEL2B93Yf6eXVyT5z7hjdOgB9a89WeBvuGe5Bs3yFf0zX4RVAc3tcPpexboysnPvFWgBFasBXmCm5T0LEx7B9QXj58xsDmi1Cs121j0oF/lZL0opZDaAvBp6gXMWu+zSuGO6BqEP+cV2vVgDg4eVw3i/fdAz6ibTVqSR3JBUA+nIAxCt52X0cHZUHAGL377T5EXOwBnh4L4z3yWdxAR6+apuOJVUA+pKWSnzZonEfw72sHQBxzD+exzXAq8hUCPI1+m4fBLdRn1QC6As5z3zJUtndaZgeghMu8o/nYY0/32mZzUomgek0D4ftWqQaQF9caY5nSuZ2DGO7H8e2YT+THRbUdjJFwEGZ+M+bz0+a3ZQvmQCw0QezzOu5ZO5F7SDXiZsbz6V1G+AdQS2/T+bbbTXlaVrLJXZnDsBGZ3i9ZzZ34+L8FrybciPWhcbz1m7jE7dwzAfobL2LYfEH0tCb7VXLTAPYKApqw9H5itm85Lpb4ditKLiMS7SiJy09WPxBjuIPcmjYcQ6tGTNHcGyx0f6sbucGwGYHAr7x2UVzk2FzHbnuFN66nsL2FDoz65vDRrmPzsMZtDvTeOtimh1nGtsfTYya9wHcQpT5pCWt3ALYzkFnmS82ZTO1TGaK2MXPbAScawHnWsCyFm/roNOJ7dq+lw6bOZybw7k5nJvHOW8fkM3hNayTTM70EJtpUzDT64i+bpd3Ho//Dw7/YlbG4ZiJAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MTtgl/EN2FoFIGfpWyD1il2WqzWtFCjOX6Y3XpmiudyM52zdyAAdvGNrKy+x3xOmhK36iMtrxVVdHWe+OJt3j+HSH1Vd1kPLFJCGRmH+Es3NXsT+6shaPGPR1/7w1+wr/YiOCVv1Mq4CUBwYr6g0qQRwDq8fFoo9umwlGhilpSVaWrpCi1eKyKf67CT6wt3b6e4b7Wt8lJlabW9DANdn6bu5PF9AL+lrVnux90ruwlmaOfeGvQZGaNnwINNX915HH3jHhghjCRY0ej9fGAdTjXyvegYUR6ivF4nN1xt5sPVaP8N3x44x+sG+m6yEz+MFLHlMNYAHTwyNtzljti4VzCtYXHiksYt4rv7Otxv+R2oi70f4pKFx9w3r6MO/vYEmr7d3oQOAVxzM8FvHmN+sybTlk4ZVsNwTDzP50mEc/smyWyt38sZ/ZvpqtfuxW66hm6/NWGlrt0YNOUxbxgbp2rVraGLzCA21/292G2XX/vEYd3iMnYbwSeBNS0C5mc+b666Q+aUssS7nSWytSsB6+P7s9q302F3bkjBT42yggFS7a4ivz2b5tQa3vUst/0OeR2OONPOc5PV6+P78dxW+JPOjYdxgpxV84qclgOKAB5zHQXJJjm3ZGsH3V5Na8tmSP2KHMCPstLOpLYD4dvcLvBl8ul1Acd3PnX+j5pnvAN74K3xxqd9JPObpMjut/bQFULyz4zwGolf6cLUOMrq7ZfjOrkTwScD3md/Tkm9FEEsOhBVhxo85vgCUHgxoiBzyE2BUbnJo6c5M18L3aYUvKrm7CldYqe/10izAlq3gak8INJMrmJ9hv6P6etTH0gquL/k+dedW+stdWvJFrX2Q8FH6nR7P8Nux9zW8w1cJKIZIgI7DDwQxqhs/Cl836sXvVxjxC59Y5xtAcbxuhI+BxO/IcVxbdbV78M5tWvLFJXyQeMCGx0gHfjsCUMIdYX4QEMbe3eSh92yjR3fZ1cetA5173ymY8NjoMKUdA5jJ8KsoYj/XYTxdORf4HnmPwteViBF7FiaEjU6j8d0IqQ4YDZEBNEh+gP2u6utRHD/+b2/SwwpfFNKGFibgO4GGx+9j3/EHi0AAiuXzxly7mDc/wcfmLaGlRANKnQLo63duKMs3jzJf7RHSQSo6roIrYXsRDvB9oN6tXNN9fyng5T0YCAqfqBUYQPG8foS/j37hX5Jj3fpQAeS9x0AXSQ9cBVfilOfB2QJm1jLmzso13feBAswvrM/wZJDnvmp1ugZQApufN9sXyXse3FwduB73pgJ47pseIjz3jfKZblPYVRVciVwMwT9hbxLvBys26D4mBfC+T/I6DPjE4lAAlIDGs3wKn2HuhXF2zgsrRurWlQKSt5LHktddBVTlOTQAJUz0gHgORn4cvwYjVqti1cPUKSB5KnkreRym8aECKIbhheRThvhTYRqpYSWvgOSp5G3YloQOoBi4IctPYIqIRPsPhi1UP4cneSl5GoUGobSCGxmG1zOcy7t/j7p4f6P7ei0dCgCQw+NZ5xNRPVZFUgKKtGJw2XAtCdOB2morpeSLEj6Pk9XRhn9lJm8OMJm/kVIx/NA1xLAVkMJDnvmiqnar7Y0NCPSeuQ8A/gN+TWdjqDZMj5NRAPAt4ffxKBocjVIUG4ASea5odruueQaf7bKNjNFrCSuAl8zee76QX7W0SlWsAIohuby5FaXgs+jGpZ/tWuVMzPfk8xpKvr1hvmT2k4TIGiHNIpcEyndEtFJeaOZGr8esAPJC8iRu+CSVsQMokcp3RK8nBSb0xL9O+xOKKAlsoj2qwC9IXoT1bbfTZMReBdcbOFs076WSwdcT7Vldr02U59KTmdCZtNv+fN3amDiAkgCve3/BfBPPhru6TZD6b68ASr4TQxn+SDc9mdvH4s9FIlVwvWkihDeoxXEe0S5d9eqEeC5dqaCxaG0DfJIyK0rAaokLBfOWojFP4lXNPdXX9bhLBZiPYtzuA0GGTnYZc0vv1gFYsfZS0ezBO8MnUS3vqFzTfecKoLo9LdNldDpjQecxBfNhLYCSHMCXwaI5j0LEh3C8JlgS+9MXNFuAZofWZ50v4tjXREFJKGU1gBVB8AXlRqyF9lk8MXwQolq2AFrFSjv2gA2Dw83TMj+f3ynSkrQ8FQBWBAKIN5iS+zAaKvcDxMQmTq/YY9Me4GFcmDki0+ICPMxqm44tVQBWJJXZ+xfIfQjvsvYDxETXManYlNQe4BVlKYRhcr7cbkLwpGxsFW8qAawkqLyYjnuADO9DJqRqWbFKGoLu8ee7IKtZDWacJ5otAhM07Dj9pRrAilBSHc/m6f3oxvZRXNuD855ssKC0k2V0j8nCf7Ken1ftVkRI6b4nAKzWPmfMRpOnD6F0kOfEndX30noM0E6ilD8i6+02WvI0rekSu3sOwOrM8FrPhu7Fw/ldGJtyG/bpWMMLr02QMS+hsfU8usU/k4bWbLXunRz3NIDVQqA0HJ4r0s4l151Exk4i4dIv0YqWtFSl+IOcwh/k+KDjHB8boZO4lviyGNX6RXXcNwDWCwj4RnMLdDsZeie77gRGXU/geAKNmY31bsM8R+PhIuqdKYy6mDKOM4Xjl8eH6UUANx9mPGkJq28BbJZBl4zZRAWaKDFNsHHxoy2Acy3gXAtY1mK0DhqdOF4+98IxdBn3LuPeZdybwz3vHJBdxjCsc4adqQFDU5ShqXXM55vF3Y/X/x+UKbnM5rRzPQAAAABJRU5ErkJggg=="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk6pW7upY+s8APY8kSDmiD1DlFaR6IlKQIkGBwZFDm5QDHTqPHnyjDh95iy+Um9dtTAGcwMS3TEZrzJRh9QldUrdMlDX1HnkAdgzKjJ6ALKnd+MNvwenySttnQsXx8Xxt07AkdNdY7kd1iJN1s8GCWWibG4CdUcdUpd2oI6pa129azsfJ1diz5Aq2h6wzWgnPEM+ftPNogvjX3aYn18QH3xwwf7p6JpLQcejkaBuZaPuqEM7ULfUMXUdh0DsAYAiNscssGq46WMfF0M7h9f1k3c5N5rr0D+hv85cyDduZavWHXVK3dpNnZBZr5sdsWegO7zaA6gbJfyHHIC97roPicOHj1jVRAGeyk4Dp6/C8q1zylOQ8Sibmyk66o5VLXVJneoYkPcjH7GXRXc4VgC0Bbpm127Rjd6xYTh3zecCorQHyuh0gVMBg9gf++hNoqenN55qAfZw8mY8AUiNdXf3uJrJaMeee2kPbmTkTAp1GNsA7BnopV9p9ceNU5fDMNlsPDycdarRtYwudaiT91raxB6bFbGsgskslnrX8tzwt2HgcEAIk/ZAGSmr0+BGh05pBhWP2DPi2ga0hHTx9WYbbN4TlLLiRMeVrC50GLqMcW8DLmPfZqcB+xE7jZr4eG5kdaPD0BVjWcDQc3WeIfdYcRqwU4vTqImP50ZWNzqMQjGsgoP1Jw9QCje7I8RhailA0ZuSciOrGx02zVTHS2AvC8MxBxDGYGZ6s4Tc3Mdprw/eFZsJaHxSwBjl4PDe9U0gD/ybt8yGMSv22CeFuO0a5+ndyEodxjYAexyGia0FrKw4r4K9es54LZzBoSvg80qD6cYwVfvNl9xRcCOrGx2648J/bGKPA9GxBSB2PHYsJQ7TcRw3iIiZADs9bluvbmR1o8Mg9OKKBi0gJoRjC8AMhlacuuljsbMr2f1G/rMb0EMPYLMfVsGP3+qOG6eyrmCTTOowroHYs9uAseQxC/+3YnEWc5lbj5XT2ZJVk5sGuh+hv3pzQXz1Zj8UvKWljLZj6VYUinDBz+VjPRVHC6jmtxIkqvdZzO1y/YLTEOsGt1MhtojnRkbqjjqMbVAKnRApLsWVQVrAUqnsmD2nXiKOCcYwohsZqTvqMLZBinEA0BiNK4PZrCGuueaKc+pWfHI/5rQHNzJSd9RhXAOxZ2SUiCUAK5VFsbQ4b20S7lSBLBw3QxRO6cYlHmVzA0DLdxA6pC7jGIg9Q+TjB8Dl5SIOmnHe9rOVy4EY7kif1kDZvAw2UZfUaewCsGf0SDmBucXLcWCOi6UXF+d8HTRT0rDFRxx0Qx78yMbDe6jbyBekrymTmCP2VhsIMnoriCPeVxXkc986VlFueopxAddWfFAmN9VvPXo8ZckCYchjpvV4wQSI1fSzAIihmMjbgTyaAZ9nXV7dPuQRCGkLgcnEdiR1HXGwMWcBUBnR9oR5nm+QVQOrqjRZQcrip/qtxRp1TZ1HGWzM2VXwq5Eyo8FjY24hho1uj0rWIYvSoHNX4klhYc4CYG+H+A2msKL7JNzOxjuQdHHtjDYHUWMdhT1fyhJ40KBzpzwSa8Qc46+2AaVcQOvrFacEgo4npZ7R+llsSxF3j+BmuuT5IZRBR9Clcye8EmsAoSXYahXMVEodc5JYR5yp6WkxPRP84YQ8FHBqjkMPwXRudMjeiCZ55uE1Og42pK6p88hCFdbWAZg1jMgAuDA/52s7tmaKZAN+BlYkSSAkr+RZR0eKtE+fOSeo86hCNdbWAdiVEy/DlymS8QspDVHGCZJjFy5q0QnbUQsunBq0MOGCKHnVNaNDHZdxZCx1HkkAxiysrWW+zgXq5EW0S38bBVODg9usbLmd2OKShgY3qM9jbJBn9cY9kEfyqiNQt/Z2d7bOdeTTjCYxRqzZcdYBaD2Q8gX7RZhX7lc3gB07eajz+++f05b1LIZmZhfiWR2zaiRv5FFXoG6pY+o6sj0CazC2AYDYKuFZXcJvRffwodXt2CYvT4mZ2eA7JHb+PCyaHROnXsV2Op1X8kKeyJuuQJ1St7A+4vChw7qy2ZJuLcY2AJAnWYNBl2u0tszTUYQ89rLbs2efFZeNZJ2dBjp1TqInqKOR70jYqkjkgby4cTStSu7o1u54MDJ1nM8Hf/aIE0aIrerT0plmAwAtIkp+3wkxHXH27dsvuA0tPXnHLuh11GZVNDE9I+axbkIn2BvpiXkyb/JAXnQG6pI6pW6p48hCHWxtAqAsiB8DqZE41fFstIMHV6uHc+cvwCroZ4MNfoKgjPnjMIDIPJiXBX5NnY1qgFGH1CUDdav1/LnqjGvuiSliq+bxZgvYKy3fwOdqI4b1e/v2HaK/fwDHt1bEmTMfuMp2Ho14L2eM0AJNz89boGA7TMfgL2mSNoHHvLxYPcq2ABndBDZnqEvqlLqNMDy3hq0NLNSdA1OWqVR/uiFmiD/YIfnv/3nFajR3XegUw0ONFcehhUkUzPjE5fUFTNPTs+LggX2u90QmKNgTncN/BzY75+EwdGv3uu8gQUcfPms+lxbWow7ZSTl56gzknLIocPPxbdsGxLbBQdHR3taQKqvey5en1zoeRxrGC+PFKqY251R3ShrVRNtMUY1hD5LBzUnCefLeeyfF+2fPWJnt2L4Ni5OGoOzVHfA5R3oZU0nj45fF7Gz9Ef1O7I985PDBpgXkVBKe0dGG3Ve55W2G/2gqcIcqVCsWCVar/COAyRs7Fss4k20ZC8P9Bn5gJ945CctXf3iGa6a3bx8QA319Fm/Mb3W877y4ND5pZb8XHY9rrz3olxXP6aGpyd6CHIa+Ng3y1gUgc5ouVr4DvT7iOVefCVmQv/vdy1DmlaGJNlojbIlhHze1VRZt2DV///49YrC/f6uosXw/OTUlTp8+i/UczoBMq21ii5LlKu+ZjvYOcfPNt6yDMwpB8Z1+t6+Q+Xq9vBsCcF6pnSsldRpf9+oZWvVSa352afyiePPN445z6cGG3IVCJ04GGtuQpr+/TxzYvxvVaTLOEGHH4dTpc2JqaqPDAM/6KBYxWD3nfJz0+g/fEGnbD1avnM3L/V1S1p1nrdsGZOkxwVSx8jRu/3xDaYb4Y8f2nWJ296w4d+5sw1w5tLADBTO0cwjgWx3fGhgYEG+PvrU+2MyCZFW9d/cusWPHtvWqsyHRiF6wKr90aUK8f+68VZXbbFhnp4x8CLzvtB4Vi0Vx8eIF/I+hR32lhrDj29fdu/dECj7ygabJ013SqAs+vm9oAfmyWFR70HQ+yTYhf0cVxsbOo0d8GspenctlW2zbth1iaGhI9PXVr17nMbPwxvHXNhUQq6lrhodQMIOxASKBN4722gdjmAtHZ6U68AO74fqPiK7u+vvjTE9PiQsXLoiJiUvrA+ur430HxPDwrmpSod+zzdcu5MFCQTa0IE0BSI6nFypPo/d2f+jc18lwCV4t7BE6PW5q2WrA4/hXFE5tYO9x164h9CQHImsfsZ07MXlZfHD+IhYKbQQe+d2Oj+zI4RHR1qSnWy0XvVxoLdvXOmvV76K4B7i+19eZeaBZ3lsCcKasDmE/urfxlWaaEYrzu4nJcfHOiRMbOjQ2vyyw/r5eC4h9fT3arSKtHYeJCLwpjAnWm5Nmx+HwkSPgabvNZuKusH4VbKZ+Habe3m3G/JYAZGL0iH8Ivd3djFDc33GfwVOnTorzYx80nPHgdsBHDh3EdnB6zu5hO/TEu+813PMQhSZ2DV8jDhw46Hhr4rjqHaL8CD3fe7bizxEAYQUPwwq+jq+3YyuCcX/PauoMxhcvoF1Ja1Qbdu8eFrt3Ddc+DuT3ufNj6FBt7KGTMIE3hPbaPozXOW1eBMKQJiKQZxHW78Zax4N62TXsBVdHJqGphcoTePbX1c+TeM8CHkG7at/e/eLs+2esnmS1V4yb7eDcyl9Lm52pnejB7927DzMvif+219WBD/uJvpzxzvqDJjeOLCDTg2h+pqSO43qgCb3EvWIbjG3ESxcvYupvEq5KOfGRGz6kRY7XXn9LlGCBB+EQumPnTquNF7cjVP0KDut3qjcvr8fVkVu3IwtIpkhwtqweqlTUz/0yGaf0BADHG/m/ghmH42+9ro29DutA7t8XWczQpDVgpuohp+CjDja5YzVTTE9OPgck/rRZnCS/IzB6e/qsRTtBy8G2J2mnGXzEhoURF8pzBUDSzUn5FWRUf2bcRcZxjcrZlCKcN4MOpGnP1ARNOxb0gAkLGy6ZcQ3AfF6egYn9G5f5JCZ6AQukZmeD3z2KNEk7rYGYIDbcyucagMygNyeeQIYvus0sCfEL+U743V0OdEsPbg9CmqSdxkAsEBNeZPMEQGRYacvLe+DntXmOywsXMUpDd68svGZOvPOe5drklzWONZIWabo5aNpvvmGlJwYsLAATXvL0BEBm1CnlmMjIewFGvStqvEjlMw3XzHIZ42tvvGl5ZXtZm8I0XAb5f6+/adGKbB2uT100S26VPTBgYaFZxCbvfI0H9OXk83BWeBz0/6pJHol71Qfv4omJcWu7kHfePRUI/6SZuqDU4xhwft6PXJ4toJ1pb8F4FL3iX9u/03DduWMo0LlYzjGTZqoCytwqe59C+QYg24PtSt6NtsC4T15ik5yu/9d/+MZA2mzQj0WLNNMSWNZWmXts91XrwfFUXHWievdYxPQJHBd4DHN2q27J9SIl7FkJ63ZPnXpPzMxM13XlaiYOXap6e7EU4MC1mN7LN4uarHcY78OSrKNYZPRKEIwHBkAyA6+Zz8Fr5mfo+flqWwYhWItG8BqANV+Bl8sdcE75ZVDUfVfB1YyQMTD5Zfxv9nOqjti6T5wGWKYs2yDBRyUECkAShCfED3Bq71d53wrp0QDLlGUbtESBA5AM9hfkk2h7exoZD1rAFj3/GmBZskz9U9pMIdA2YDV5tAPlTNH8Z9TFD1Q/b90nSwMAyNMYbnlQV7NKiwWkisnwKuMtS5gsyF3hlpZPJ/gsnFzJTt/dVFE9LIX6e1pFfbm0KAelARoPtvl0VbvVfIYGCLjz3wsA/iv+W0M01SUQs3uAbwX/X9bR4agnamgAZOYcJ8TmOc+mabC6nlIT+4yDzIa8M+ihlmb6CBWAZIQzJrCCP8eeIclddd1Mowl9x+k1WL4vBDXD4VQN2johjRiggG1CfjRtDgyN5E3EczgWsEzCBh91EzoAmWlnpzzfl5dHYX7/Dl9d6vwJKWMSAnXPMmBZsEyi4Dn0KrhWyOmy+qyoKMyeqMb78NYmav32rQFUuZfoUEyfTt/EfBCIHIDkfUGp4eWSwv4z6jYfsrSSOtQALN+LdKP348nsMKsto0VSBddyRUWg2/8ZaRh/meYln7Vyh/4bvVzqmLqOA/gofywsYHVBlEpqX1mppzBUc0f189a9Tw1I+TOs233Iy9JJnzk3TR47ANrcYhuQ2zFm+BSq5QP2s9bVvQZQ3Z7idhludyxwn5O3FLEFIMUB+PLTRfObUOIjuE/GDuPeyiHwVNDZInT2RF/BeAz3jjYKCpwJBwRjDUCb/9X9Cc1vocXwRSg1sTu12vLovAJsWJ+rfoK23qOY0XC0RZpOfrainQgA2kIAiIdUxfwGOir3AYjpWeVjC+jjCuAto8p4RmaMbwN4TbfF9ZFN4EkTBUBbeu7ejxPdHsFY1gMAYmTnmNj8RHkF8Mo8CqFDGN9ttht9lDw2yzuRALQFWj1Mx3xYKHk/CiGyY8VsfsK84uObFFJ9L5s3nmx0CEyY/HjNK9EAtIVmdTxdFJ+HG9uX8Ox2/E5lhwXWjmc5PMeD//oK4hdWtWsrIaHXVACwWvczSg2oorgL1oHtxFuq3yX1HkB7GVb+GZ63W+/I06TKRb5TB8DqwrB6z0rcicb5p7E25VZck7FCHMMmKJjforP1Atzin01Cb7Za727uUw3AakXAGnbMl8UtK6Z5FAVLTxz6JcaiJ82qFB/IK/hAjmUN41hXTryMZ40PgasWLOH3Vw0Aa8sJ4OucWRSfwml6N0nTHMGq6xHcj6AzM1AbN8jf6DxcRr0zilUXo8owRnH/am+H+A0A5+4o9CCZipDWVQvARjqfVWqbKImRihQjUpn4FzsAzm6Asxtg6cZqHXQ6cb/226KjxBzezeHdHN7N4531GyCbwzKsS0oaoxklRkVejPZIOdEo76vx+f8DYi06xjCLKmEAAAAASUVORK5CYII=";
+},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAF4VJREFUeAHtXXuMJMV9/lXP7s7O3mPvbg/IHSA46/BCsCwbyealOKfDJH4cWIkQKA4gWRArkSIskYAxsWNZtokDDlL4J0qCZQkjLBBShH0ODjanCxGYyx/4BcSrO+4hjjv29vZ25+52Zmdnpivf17MzOzM7j+6Zrp6e2Spp1N3VVV/96qtv6tXV1Uqsq2HgrNZbJSuTRSWTSruTouUCUWoDjhu0Eu+olo/CI52Wczg/p5ePavkoWtN/RitnKqFlSlIytVGp0zUJrvELtVbzr7Vel87JjRDPNcp1J7VSFNukFr3FJCdK1BmIckppPaUdZwrnb4wn5VWl1ILJdOOKvWYECMElzy/KdQXX3Y0abTcyfi38huNQMBBfXoscQI25b8hx9q0fldfhl4uDbaZtGGgBphf1FWgWb0PB3oQCvgHHlGlCQ8FXKouCeQ1/lJfR3D8/PqoOhoIbQ5CBE2Ba6y06I3eI0nehhrs+hpwHNgm14S9Eqx+oMXl2XKEJHyA3EAJkUzqfkc8qiA5lswfXIwNURpWsQIhLuNirIcZNY/ITNt2Vm3160tcCPK/1RYWsez9qh3sweJjo0zLoyGwMZmZRy39vKOU8vl6p6Y5AYhCpLwWYyehLc+I+iEK4F7XdaAx47JkJqAUX8ed7MinOo2Nj6t2eGdJhwn0lQAwqduqi+xA653ez2e0wzwMZzWuOtX5KJZzvYNByqF8y2RcC9EazrvsNEXU7hJfoF3J7YSeEWMTM+HPKcb7eD6PnWAsQYkvNZ9yHQeoDOE/2okD7NU1wlgNnj20acx7BeTau+YitAM8u6j2uq58AiTviSl4/2AXxHXEcdd/GUbU3jvbGToDZrL5sUet/xqTx5+JIWN/apNQLo0p9KZVSx+KUBycuxqCmS8xn9UMQ39tWfAZKBX9ockuOybWBFDqCjEUNuKD1tnxWPwNidnWUCxspEANolvcPp9Tn1yl1MlBEA4F7LsD5RX2zFPXTmMu60ED+LGQTBjCHekoS6s5No+pnTYJE4t2zJthrcheK3xJX/9SKL5KyrknE4xzcz6MMetkk96QGXFjQ25eU/iH6ep+oYcVe9IYBpV4Z0erP1q1TJ6I2IHIBpjOa6/B+jH/gBVFn1qbXnAE0yTPoG94yPqYONA8V/p1Im2A80fi0K3qfFV/4BdktIsuEZcMy6hYrSPzIBJjO6ju1q3+EZncsiIE2bIQMoGxYRiyrqFKNRIBzGX0/mt2n8BuKKmM2nc4YYBmxrFhmnSEEi2W0D4iMqHTW/Ucsi38gmFk2dBwYwOsAj42nnC+jb4g3Gsw4YwL0xJdx/x2W32PGdIsaBQMQyJPjY84XTYnQWBPs1XxWfFFoxGgaqEDuZVmaSsRIDej1H7T7T6aMtrg9YEA5f7N5TD0edsqhC9Ab7ZYGHKFjh515i+efATbB+N09nlJP+4/VPmSoIuEcEofxHEm1T9qG6DcGIMCCctStWGn9Yli2hyZAPuHgRKad5wuraGKKo1TGEbU7rCcmoQiQz3bzon9ln3DEVDQhm8XHdsOiPhLGs+OuR8FobhNcWGDFF3IpxxiOZe2VeQgLW7sWYDqDt9XsqpYYy8WQaShzr+y7hO+qCfYWk3I9n9ZdC7nLfNjoPWAAgxJXHPWpbha1dixAbxl9xuv32ZXMPSj8uCTJldXDY+gPdri8vyMBst+H+b6f47grKiLOnCvI1InSlnmT25OyZUNvZ3riZk9U5dAoHdSE+zE/+Ekc8VJ8MNdR05leFL4ovitYUt2FpvhyBe39ykLsDrG72HGzp7vcdBebWqAmOkEJXI0sv7f7tU4S6yYOxVd21edlv6iP1TZUn0dpBwpeiu6SuMWCaBeVj3ZLySvM1DkJcRJDknBGsJVORw1doKzAlq9BGz8M+t5x4BoQ75Y+YSebA5VN6IExDSL5fFZyi2kpLGUhQMzCQnz8i3o/nNOP9xiGYRnHqMNiVk8bARMJJEBul4Gc3howDRs8RAaKbl6WsmkpFvxvIc2wXhzENeqgDU8jARLxLUBUsSnu1RIA2wYNmYEChJTPLXRUl7H+Y1ximHTL+/mk/KbhW4DcpQoi3OEX2IYLlwHWfAU0pd06YhDLlKNGqBW/+L4EyP350JF90C+oDRcuA+y/FVB7heWIZbJPCK08QM34sdeXADU2h4SyB3Ljbz8k9TpMIb/YUbPbzG42x8Q05aCVJDXjB7+tAKHkndyZ1A+YDRM+AyjMQAMOvxZwYEJsc07dXtJO6xTaCpB7MsPQ2Gzn1To7g3eX83ymnElsasbbz7uN8S0FyN3ouSF4Gwx72yADnGQ25UxiezZDO56GWmSgpQD5KQQo2e5G34JA07e8JxyGEjGJTZOpHWqolflNBciPwGClw72tItt75hngEw5TziR22WZqiFoqX9cfmwqQXyCCgtf0R2DqyerFNcrAWLImsctGU0Pe16zKHnXHhgJEpGF+/qourL3sAQP5vLk+oEnsGqr4KbUmXbmGAuSH/zBRuaa+vVZDWIwuFnPmRsEmsasppJaoqWq/8nlDAS5/dbIcxh57yMDc/Lyx1E1i1xvdTFOrBMjv7SLynnoAe90bBubnzhpL2CR2A6P3LGur5tYqAfJjz2iv7WO3Gpp6eIHFpKdmZkM3wMOMYKFq2XBqyvuQeNlj+bhKgPgGrZ14riOpl5epVEqOv3dCisXAr1s0NZtYxCR2pK70QfGaJGsEyBUMUOp1NSHsRU8ZmJiYkKWlvBw6fDQ0O4hFTGJH6aCt6+tXydQIEFNOt0VpkE2rPQNbJ0ofE5ibS8vRY8fbR2gTghjEoitjt4kS6u16jdUIEM9Obgo1NQvWNQPJZFK2bdvu4bw/fUqmDr7TUXPMZpdxiUFHTGJH7uo0VhEgqsck5txviNwgm2BbBi6//AMylCgtSGLt9evfvh1oYMIBB+OUaz5iEbMXjhqj1sppV17LPL8o16EGjLhXWjbDHlsxkBwZkSuvulrefPM3XjD23w4fOYaBxEnZvHlcNm8al9HkiIwMl9aNLOXzwknmufm0J7qlpdrJbGIRsycOGju/qDjO+G+mXxFgwXV398Qgm6gvBrZObJWdO6+QQ4cOVsJTWNPTM96v4tnmhBjE6qVb1ponwEoTjHV/VoC9LBUfaV9y8aXyoQ99uNIc+4hSCcJml3GJ0XNXpTVPgGiT1ymRa3tumDWgLQOsvT728esrA5O2ERCAAw7G6XXNV7aVWqPmeO01wemc3AgPu/C0zFDMj+y/TX7wSrn8sh1yenZGZmdn5Uwab82VX7d0hmXL+Dpvno9TLT0Z7bbgkFpL59SNCPJSqQ+o5ZoW4e2tmDJAYV28/RLvt/+t8zVWfvjq9TXXsbsoae4lrwlWrjsZOwOtQQPNQFlzXg2ID0BMYgpmoDMcRuamsTHBfnzS+X9OKjl0Zr3M59Gbgds0rOX5OSV/sE3LLswZX2Qns9rS7WkOocpNsK0BW1A2g3e4/+UtJS8cQTdLl0SHd6UrMaZzSqZPirwKYT76Sy2f2yHyV1drucC+0FDhaNWJFk9zzlmtt2LFKtcAWteAAdZ4f/Kikv84rKrE1yDgshcFyrCMw7jWNWaAmqP2HMmWlNg42Nr2feaQyP2vKlkorNR2fhlhHMYlhnVNGID2nKKyAmxED2uv7/5SYU+W4OIr4zEuMWxNWGak9kjtOUrbEXAtLSLs8331QHfiK2NShMQipnW1DFB7EKDYzyzU8uINODppdutgKpfE4iDGuloGqD0Hw+ENtd5r+4pTLRzthu2ISWzrVhig9hx0cqwAVzjx+msrUy1VN7o8JabtC9aRCO1hP38rwGpaOMlsypnENmWzUVxoz8EDkJg/NDRKwSrw47WPVFfd78bDJHY3dvUqLrXn4NVQ2wRXlcB0puoi5FOT2CGbGgkctWf7gHVUFw0+EzeJXZeN/ri0fcDV5aRcc7tRmcRenZM+8PFqwD6wM0oT80vmPuRiEjtKjsJMi03wuTAB+x3r3NnSS9sm8mES24S9xjGhPU7DWAFWMZ1b4G5UJtZG4lOzHnZVYmv9FNrjNIwVYJUQLsRi0vPz4e9GRUxiW7fCALVna8AVPryzHZuTMj9zsvT93bp7nV5yN3piEtu6KgZYA+KBsK0Bqzj5oys24IuSBZl57yi/M1B1p8NTYBCLmMS2boUBas/WgCt8eGefuXJcHDyNy5w/K2dOvdedCCE+YhCLmMS2roqBUg2oDT58qkqsT04v3jAsf/7RCc/as2dm5NTxwx01x2x2GZcYdMQktnVVDGiNQQh2gK3ysqdg4Cu7fk/Wj3hvrHq113vvvI2ByWnc8dMkay8s47DmoyMWMa2rYwDrdIe0cqbwF6+7s7Yvt60fkn/908vkzmePeN1A9t9On3wXA4n3ZWzjuKTWb5Th4aQkhko1WrGQl3w+J1kILoN5xAKuy47bMBOLmNbVMkDtDSW0TIW3+3BtAv189ZkPbpRH/ni7PPxfJypjEQrr7JnT3s9P3ig+YhDLutUMUHuOpGRq9S3rQwb+8uMXyNN37Kg0x0FYYbPLuMSwrgkD0J6zUanT+KDcmSZB1rw3a6///eur5K5rJryRbDtCONplWMaxNV9ztqg5aq/UMVGoBbVc3zz42r7D/tsTey6RL//hRfKfv0vLSwfPydt4weNMttR52ZJKyO9jPw7O83GqxY52feiFmoPzBKi0nsL4zgqwDW8U1l98bKv3q9+Nalfcd6Nqk7eob1NzTNOba9AORsLWWQYiZKCsudJkl5I3IkzbJmUZ4N5OnuY8AY4n5VWl1MrklSXIMmCQAWqNmmMSngDhsYA+4AGDaVpoy0CFAWqNmqNHqQnmmdb7eLDOMmCcgSqtVZ4PDTnOPny/4e+NJx4gAWxmLUV3SdxiQT56aVGGMXVOl8e2SktLC+IkhiThjOALE5h8s65vGKDWysZWBLh+VF6fz6osasKer9vF5oVSyC9KsZAr2ynJqoUkSUdDlHnvV8AGh4mhpAwNj6Jfa4VYISyuJ0plqbWyeZUmGLUINpqV18o3enUs4lMDS9l0jfja2UKhenHKnyloF8He7xkD1Bi1VjagIkDPQ6mXyzd6cSxASPncgq9FT/X2sXFmXGJYF2MG6jRWI0B0pZ7vlems+Qr57vcvIwaxrIsnA/UaqxHg+Kg6iOrxF1Gb7vX5UHuF5QpeLVoasISFaXG6Z4DaosaqkWoE6N3Q6gfVAaI454AjTLkQi5jWxYyBBtpaJUA1Js9CqbUfmDWYD2+qxUC/jQMTYlsXDwaoKWqr3ppVAhxX3trAvfUBTV1zns+UM4ltyuYBxt27rK2aLK4SIO/qBlVlTawQLzjJbMqZxDZl86DiNtNUQwFuGpOfYFI3/P0pGrDL1xdNOZPYpmweRFxqiZpqlLeGAkR7nRelv9coQth+2uAbeSaxw+ZhoPGgJU9TDTLZUIAMN5RyHkck40NJkwMFk9gNuLReDRighqilBrc8r6YCXK/UNObnnmwWMSz/fN5cH9Akdlj5H3QcaohaapbPpgJkhKQ4jzarOpsBBvVfzJkbBZvEDprPtRie2qGGWuW9pQDHxtS7GBI/1Qqg23tz8/PdQjSNbxK7aaL2xgoD0I6noRWfVWctBcjQKuF8B0o2NlSdnyvtn7LKshA8TGKHYN5AQ1Az1E67TLYVIJ7dHcLM4HPtgDq+j6fTp2bCn/HxMO1C1Y6LpfuI+rmSdlojtRUgoyvH+ToUbWSdUyqVkuPvnZBiMbxKlljEJLZ10TNArVAzflL2JUCuYMCUxmN+AIOGmZiYwPL6vBw6fDRo1KbhiUVMYlsXPQPUSv2ql2ZW+BIgI28acx6Bso80A+rUf+tEafOeubm0HD12vFOYSjxiEIuujF25aU+MM0CNUCt+E/ItQABnHUfd5xfYb7hkMinbtm33gr8/fUqmDr7TUXPMZpdxiUFHTGJbFy0D1Ai14jdV3wIk4MZRtRevoL3gF9xvuMsv/4AMJRJecNZev/7t24EGJhxwME655iMWMa2LmAFow9NIgGQrb8X5jTOq1JfwfO5mzA+O+Y3TLlxyZESuvOpqefPN33hB2X87fOQYBhInZfPmcdm8aVxGkyMyMlx6NW4pnxdOMs/Npz3RLS3VTmYTi5jWRciAUhlqI2iKgQWYSqlj81n9TXQ0/yFoYq3Cb53YKjt3XiGHDq2s2KawpqdnvF+ruNX3iEEs0y45pCRXKC145XmvXa/tQbP7TWojKA8dMQfxJdJZ/XMcdwVNsF3407On5Xf/95YUAk7LsNllzReF+JiHM+cKMnWiNDM1uT0pWzYE/i+3oyLQ/V7aA/HtH0+pT+IYeC6tIwGSmQWtt+Uz+ld42HxhIKZ8BM6h5jt69LCcPHnCR+jSgIN9Ptvs+qIr1EBY63dqeEx9ZJ1SJzsB7liATGx+Ud8srv4pasJAgxm/huZyOTk9OyOzs7OSzWYxt1eqcUZGkt4kM+f5ONViR7t+GQ03HGo8F/sWf2rTqPpZp8hdCZCJzi8Uv4We0N91aoCN178MQDzf3rQu8dVuctC1ANkfxKBkH0bFn+jGEBu3zxhQ6pVNKbW7k35fdU67FiDBFhb09rx4/cHSY43qFOz5wDGAft/MsKDft07566S3YCCUvhsNwT/hFkxSZ1qkZW8NAgMoY5Z1GOIjHaEIkEDjY+oAHsPcBuPMrbFnQtb1jAGWLcuYZR2WEaEJkAZhBcSLMPIL+JVmaMOy0uL0nAGWKcuWZRymMaEKkIZhQvJpLepvwzTSYvWeAZYpyzZsS0IXIA3cPKbwSqcYWT8YNgEWrz0DLEuWafuQwUOEMgpulCymZ1Q64/4b2uJ7G923fv3BAATy5PiY80VT3SojNSCppcElw21N2B9SW20laz6T4vN0sjrZ8H3mMvp+Jfq7rBXDR7eIYTPAyoN9PlPNbrW9kQkCq2fuhAC/j19vl41U596er2IA4ivg9wUTA45VicEjMgEy8fSi/rTr6ufDXMzaKFPWr0MGMMnszfOFPNXSyppIBUhD0hl9LWrBH2MZl31s16pkIr7Hx2uo+W4Jc5LZTxaMDUKaJc4M8jkiRimvNAtj/SNmAGXBMolafMxl5AJkonyO6K2kwHIe/Otc+lkXPQPkHk3gt1kWYT3bDZqLyJvgegO9Ra1Fjacn4a+srk/LXq8wwJXMklB3drOYdAWt87OeC5Cme8v7s/oZ9A13dZ4VG9MvA6j59g+n1Oc7XUbvNx0/4XrSBNcbRiK8l1oc5yt2SVc9OyFecykVOCbXcRAfcxaLGrCa4mxWX7ao9ROYqrm12t+ed8mAUj/Ce7v3dfLqZJcpt4weOwGWrT27qPdgzvAJNMs7yn72GJwBNLdHuF1G0B0LgqfUWYzYCpDZgfhS8xn3YZD4IM7tVgcByhic5cDZY8ubSvneqyVAEqEEjbUAyznEE5QrtOt+Az2G20FqaROZ8k17rGEAwsPL4fo57s/nd4u0GoCIL/pCgGVOIMSduug+hIHK3RBi1TfUyyHW7hHCw3th+iluiwvhYVfb/nB9JcAypZmMvjQn7oOYy7oXQhwt+6/FI4S3yE8hcDf6dhuCx5GfvhRgmcjzWl9UyLr3i1b3oBDW1Hao+PPN8mtW/AhMq+9wlLmK67GvBVgmlc3xfEY+i2Vsd8FvD64HcsCC2o770O3lh/+87/mx2e1zNxACrC6DtNZbdEbuQO3AfuJ11ff69RzCex21/FP83m6jT572a75o98AJsLowvNGzltvQOb8J76bcgGN/bJuPLW5RMK9hsPUylsU/3w+j2Wreg5wPtACriUBtmDy/KNcVXHc3CnY3Ms51ibEYSXMEiz/IAfxB9g05zr71o/I6/EpbgVVnYgDP14wA68sO4luXzsmNouUa5bqTeOt6EueTGMxsqQ8b5jUGD2fQ7kzhrYsp7ThTOH9jPCmvQnALYabTL1hrVoDNCuis1lslK5NFJZNKu/jJhRDnBohzA8SyAW/rYNCJ8+VrD0fLOdw7h3vncO887nnXENk5vIZ1SitnKqFlSlIytVGp083SXov+/w8nKDA07uUpHQAAAABJRU5ErkJggg=="},function(s,t,a){function l(s){a(542)}var n=a(13)(null,a(544),l,"data-v-001a30c3",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("设计原则")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(537),alt:"Consistency"}}),l("h4",[s._v("一致")]),l("span",[s._v("Consistency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(538),alt:"Feedback"}}),l("h4",[s._v("反馈")]),l("span",[s._v("Feedback")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(539),alt:"Efficiency"}}),l("h4",[s._v("效率")]),l("span",[s._v("Efficiency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(540),alt:"Controllability"}}),l("h4",[s._v("可控")]),l("span",[s._v("Controllability")])])])],1),l("h3",[s._v("一致性 Consistency")]),s._m(0),l("h3",[s._v("反馈 Feedback")]),s._m(1),l("h3",[s._v("效率 Efficiency")]),s._m(2),l("h3",[s._v("可控 Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("与现实生活一致：")]),s._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("li",[a("strong",[s._v("在界面中一致：")]),s._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("控制反馈：")]),s._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("li",[a("strong",[s._v("页面反馈：")]),s._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("简化流程：")]),s._v("设计简洁直观的操作流程；")]),a("li",[a("strong",[s._v("清晰明确：")]),s._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("li",[a("strong",[s._v("帮助用户识别：")]),s._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("用户决策：")]),s._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("li",[a("strong",[s._v("结果可控：")]),s._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/nav.vue":546,"./zh-CN/nav.vue":555};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=545},function(s,t,a){function l(s){a(547)}var n=a(13)(a(549),a(550),l,"data-v-d0518674",null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,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}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Navigation")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Side Navigation")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(551),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 1 categories")]),l("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),l("img",{attrs:{src:a(552),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._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.")]),l("img",{attrs:{src:a(553),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 3 categories")]),l("p",[s._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),l("div",{staticClass:"block"},[l("h3",[s._v("Top Navigation")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(554),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._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,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._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")])])}]}},function(s,t,a){s.exports=a.p+"static/navbar_1.499e088.png"},function(s,t,a){s.exports=a.p+"static/navbar_2.59ecae2.png"},function(s,t,a){s.exports=a.p+"static/navbar_3.8dcec92.png"},function(s,t,a){s.exports=a.p+"static/navbar_0.b608f86.png"},function(s,t,a){function l(s){a(556)}var n=a(13)(a(558),a(559),l,"data-v-30267424",null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,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}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("导航")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("侧栏导航")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(551),alt:"一级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("一级类目")]),l("p",[s._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),l("img",{attrs:{src:a(552),alt:"二级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("二级类目")]),l("p",[s._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),l("img",{attrs:{src:a(553),alt:"三级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("三级类目")]),l("p",[s._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),l("div",{staticClass:"block"},[l("h3",[s._v("顶部导航")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(554),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("选择合适的导航")]),a("p",[s._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/resource.vue":561,"./zh-CN/resource.vue":568};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=560},function(s,t,a){function l(s){a(562)}var n=a(13)(null,a(564),l,"data-v-bc99180a",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("Resource")]),l("p",[s._v("Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(565),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(566),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(567),alt:""}}),l("h3",[s._v("Interaction Design Documentation")]),l("p",[s._v("Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("Download")])])])])])])}]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExMHB4IiBoZWlnaHQ9Ijg3cHgiIHZpZXdCb3g9IjAgMCAxMTAgODciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9ImJhY2tncm91bmQ6ICNGRkZGRkY7Ij4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkF4dXJlIENvbXBvbmVudHNfaWNvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBeHVyZS1Db21wb25lbnRzX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0ic2l0ZW1hcCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04Ny4yNDEzODY3LDQ5LjUxNzgzMiBMNTYuODk2NjQwNiw0OS41MTc4MzIgTDU2Ljg5NjY0MDYsNDEuOTMxNjk5MiBMNTMuMTAzNTc0Miw0MS45MzE2OTkyIEw1My4xMDM1NzQyLDQ5LjUxNzgzMiBMMjIuNzU4NjEzMyw0OS41MTc4MzIgQzIxLjcxMTI1LDQ5LjUxNzgzMiAyMC44NjE5NzI3LDUwLjM2NzEwOTQgMjAuODYxOTcyNyw1MS40MTQ0NzI3IEwyMC44NjE5NzI3LDYwLjg5NzI0NjEgTDI0LjY1NTAzOTEsNjAuODk3MjQ2MSBMMjQuNjU1MDM5MSw1My4zMTExMTMzIEw1My4xMDMzNTk0LDUzLjMxMTExMzMgTDUzLjEwMzM1OTQsNjAuODk3MjQ2MSBMNTYuODk2NDI1OCw2MC44OTcyNDYxIEw1Ni44OTY0MjU4LDUzLjMxMTExMzMgTDg1LjM0NDc0NjEsNTMuMzExMTEzMyBMODUuMzQ0NzQ2MSw2MC44OTcyNDYxIEw4OS4xMzc4MTI1LDYwLjg5NzI0NjEgTDg5LjEzNzgxMjUsNTEuNDE0MjU3OCBDODkuMTM4MDI3Myw1MC4zNjY4OTQ1IDg4LjI4ODc1LDQ5LjUxNzgzMiA4Ny4yNDEzODY3LDQ5LjUxNzgzMiBMODcuMjQxMzg2Nyw0OS41MTc4MzIgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjREVFQkZEIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwNC4zMTAyOTMsMCBMNS42ODk3MDcwMywwIEMyLjU0NzQwMjM0LDAgMCwyLjU0MDE0NTk5IDAsNS42NzM3NjQgTDAsODEuMzI2MDIxOCBDMCw4NC40NTk2Mzk4IDIuNTQ3NDAyMzQsODcgNS42ODk3MDcwMyw4NyBMMTA0LjMxMDI5Myw4NyBDMTA3LjQ1MjU5OCw4NyAxMTAsODQuNDU5NjM5OCAxMTAsODEuMzI2MDIxOCBMMTEwLDUuNjczNzY0IEMxMTAsMi41NDAxNDU5OSAxMDcuNDUyNTk4LDAgMTA0LjMxMDI5MywwIEwxMDQuMzEwMjkzLDAgWiBNMTA2LjIwNjkzNCw4MS41NTE2Nzk3IEMxMDYuMjA2OTM0LDgyLjU5OTA0MyAxMDUuMzU3NjU2LDgzLjQ0ODMyMDMgMTA0LjMxMDI5Myw4My40NDgzMjAzIEw1LjY4OTcwNzAzLDgzLjQ0ODMyMDMgQzQuNjQyMzQzNzUsODMuNDQ4MzIwMyAzLjc5MzA2NjQxLDgyLjU5OTA0MyAzLjc5MzA2NjQxLDgxLjU1MTY3OTcgTDMuNzkzMDY2NDEsMTMuMjc1ODM5OCBDMy43OTMwNjY0MSwxMi4yMjg0NzY2IDQuNjQyMzQzNzUsMTEuMzc5MTk5MiA1LjY4OTcwNzAzLDExLjM3OTE5OTIgTDEwNC4zMTAyOTMsMTEuMzc5MTk5MiBDMTA1LjM1NzY1NiwxMS4zNzkxOTkyIDEwNi4yMDY5MzQsMTIuMjI4NDc2NiAxMDYuMjA2OTM0LDEzLjI3NTgzOTggTDEwNi4yMDY5MzQsODEuNTUxNjc5NyBMMTA2LjIwNjkzNCw4MS41NTE2Nzk3IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0RERUFGQyIgY3g9IjUuNjg5NzA3MDMiIGN5PSI1Ljg5NzAzMTI1IiByPSIxLjg5NjY0MDYyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNEREVBRkMiIGN4PSIxMS4zNzk0MTQxIiBjeT0iNS44OTcwMzEyNSIgcj0iMS44OTY2NDA2MiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjRERFQUZDIiBjeD0iMTcuMDY4OTA2MiIgY3k9IjUuODk3MDMxMjUiIHI9IjEuODk2NjQwNjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjI4OTkyMTksNDMuODI4MTI1IEMzMy4xNTg1NTQ3LDQzLjgyODEyNSAzMi4yNDEzODY3LDQyLjkxMDk1NyAzMi4yNDEzODY3LDQxLjc3OTU4OTggTDMyLjI0MTM4NjcsMTkuMzI0OTgwNSBDMzIuMjQxMzg2NywxOC4xOTM2MTMzIDMzLjE1ODU1NDcsMTcuMjc2NDQ1MyAzNC4yODk5MjE5LDE3LjI3NjQ0NTMgTDc1LjcxMDA3ODEsMTcuMjc2NDQ1MyBDNzYuODQxNDQ1MywxNy4yNzY0NDUzIDc3Ljc1ODYxMzMsMTguMTkzNjEzMyA3Ny43NTg2MTMzLDE5LjMyNDk4MDUgTDc3Ljc1ODYxMzMsNDEuNzc5NTg5OCBDNzcuNzU4NjEzMyw0Mi45MTA5NTcgNzYuODQxNDQ1Myw0My44MjgxMjUgNzUuNzEwMDc4MSw0My44MjgxMjUgTDM0LjI4OTkyMTksNDMuODI4MTI1IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzIwQTBGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTY2Ljk1MzQ3NjYsNzcuOTY2MTUyMyBMNDMuMDQ2NTIzNCw3Ny45NjYxNTIzIEM0Mi4zMTYyNjk1LDc3Ljk2NjE1MjMgNDEuNzI0MTYwMiw3Ny4zNzQyNTc4IDQxLjcyNDE2MDIsNzYuNjQzNzg5MSBMNDEuNzI0MTYwMiw2MC4zMjI3NTM5IEM0MS43MjQxNjAyLDU5LjU5MjI4NTIgNDIuMzE2MDU0Nyw1OS4wMDAzOTA2IDQzLjA0NjUyMzQsNTkuMDAwMzkwNiBMNjYuOTUzNjkxNCw1OS4wMDAzOTA2IEM2Ny42ODQxNjAyLDU5LjAwMDM5MDYgNjguMjc2MDU0Nyw1OS41OTIyODUyIDY4LjI3NjA1NDcsNjAuMzIyNzUzOSBMNjguMjc2MDU0Nyw3Ni42NDM3ODkxIEM2OC4yNzU4Mzk4LDc3LjM3NDA0MyA2Ny42ODM5NDUzLDc3Ljk2NjE1MjMgNjYuOTUzNDc2Niw3Ny45NjYxNTIzIEw2Ni45NTM0NzY2LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1Ljg3ODkwNiwgMjEuMDU0Njg4KSIgZmlsbD0iIzIxOThGMCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM2LjE5LDExLjM5NDAyMzQgTDIuMDUyMTg3NSwxMS4zOTQwMjM0IEMxLjAwNDgyNDIyLDExLjM5NDAyMzQgMC4xNTU1NDY4NzUsMTAuNTQ0NzQ2MSAwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEwwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEMwLjE1NTU0Njg3NSw4LjQ1MDAxOTUzIDEuMDA0ODI0MjIsNy42MDA3NDIxOSAyLjA1MjE4NzUsNy42MDA3NDIxOSBMMzYuMTkwMjE0OCw3LjYwMDc0MjE5IEMzNy4yMzc1NzgxLDcuNjAwNzQyMTkgMzguMDg2ODU1NSw4LjQ1MDAxOTUzIDM4LjA4Njg1NTUsOS40OTczODI4MSBMMzguMDg2ODU1NSw5LjQ5NzM4MjgxIEMzOC4wODY2NDA2LDEwLjU0NDk2MDkgMzcuMjM3MzYzMywxMS4zOTQwMjM0IDM2LjE5LDExLjM5NDAyMzQgTDM2LjE5LDExLjM5NDAyMzQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjM5NjkzMzYsMy44MDc4OTA2MyBMNS44NDUyNTM5MSwzLjgwNzg5MDYzIEM0Ljc5Nzg5MDYyLDMuODA3ODkwNjMgMy45NDg2MTMyOCwyLjk1ODYxMzI4IDMuOTQ4NjEzMjgsMS45MTEyNSBMMy45NDg2MTMyOCwxLjkxMTI1IEMzLjk0ODYxMzI4LDAuODYzODg2NzE5IDQuNzk3ODkwNjIsMC4wMTQ2MDkzNzUgNS44NDUyNTM5MSwwLjAxNDYwOTM3NSBMMzIuMzk2OTMzNiwwLjAxNDYwOTM3NSBDMzMuNDQ0Mjk2OSwwLjAxNDYwOTM3NSAzNC4yOTM1NzQyLDAuODYzODg2NzE5IDM0LjI5MzU3NDIsMS45MTEyNSBMMzQuMjkzNTc0MiwxLjkxMTI1IEMzNC4yOTM1NzQyLDIuOTU4ODI4MTMgMzMuNDQ0Mjk2OSwzLjgwNzg5MDYzIDMyLjM5NjkzMzYsMy44MDc4OTA2MyBMMzIuMzk2OTMzNiwzLjgwNzg5MDYzIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDEzLjQzMTM4NjcsMTguOTgwMzcxMSBDMTIuMzg0MDIzNCwxOC45ODAzNzExIDExLjUzNDc0NjEsMTguMTMxMDkzOCAxMS41MzQ3NDYxLDE3LjA4MzczMDUgTDExLjUzNDc0NjEsMTcuMDgzNzMwNSBDMTEuNTM0NzQ2MSwxNi4wMzYzNjcyIDEyLjM4NDAyMzQsMTUuMTg3MDg5OCAxMy40MzEzODY3LDE1LjE4NzA4OTggTDI0LjgxMDgwMDgsMTUuMTg3MDg5OCBDMjUuODU4MTY0MSwxNS4xODcwODk4IDI2LjcwNzQ0MTQsMTYuMDM2MzY3MiAyNi43MDc0NDE0LDE3LjA4MzczMDUgTDI2LjcwNzQ0MTQsMTcuMDgzNzMwNSBDMjYuNzA3MjI2NiwxOC4xMzEwOTM4IDI1Ljg1ODE2NDEsMTguOTgwMzcxMSAyNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDI0LjgxMDgwMDgsMTguOTgwMzcxMSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUuMzMyMDMxLCA2Mi43MzQzNzUpIiBmaWxsPSIjRkZBQ0FEIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEw1Ljg3NDkwMjM0LDExLjQzODQ5NjEgQzQuODI3NTM5MDYsMTEuNDM4NDk2MSAzLjk3ODI2MTcyLDEwLjU4OTIxODggMy45NzgyNjE3Miw5LjU0MTg1NTQ3IEwzLjk3ODI2MTcyLDkuNTQxODU1NDcgQzMuOTc4MjYxNzIsOC40OTQ0OTIxOSA0LjgyNzUzOTA2LDcuNjQ1MjE0ODQgNS44NzQ5MDIzNCw3LjY0NTIxNDg0IEwxMy40NjEwMzUyLDcuNjQ1MjE0ODQgQzE0LjUwODM5ODQsNy42NDUyMTQ4NCAxNS4zNTc2NzU4LDguNDk0NDkyMTkgMTUuMzU3Njc1OCw5LjU0MTg1NTQ3IEwxNS4zNTc2NzU4LDkuNTQxODU1NDcgQzE1LjM1NzY3NTgsMTAuNTg5NDMzNiAxNC41MDgzOTg0LDExLjQzODQ5NjEgMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEwxMy40NjEwMzUyLDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjI1NDEwMTYsMy44NTIzNjMyOCBMMi4wODE4MzU5NCwzLjg1MjM2MzI4IEMxLjAzNDQ3MjY2LDMuODUyMzYzMjggMC4xODUxOTUzMTMsMy4wMDMwODU5NCAwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEwwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEMwLjE4NTE5NTMxMywwLjkwODM1OTM3NSAxLjAzNDQ3MjY2LDAuMDU5MDgyMDMxMiAyLjA4MTgzNTk0LDAuMDU5MDgyMDMxMiBMMTcuMjU0MzE2NCwwLjA1OTA4MjAzMTIgQzE4LjMwMTY3OTcsMC4wNTkwODIwMzEyIDE5LjE1MDk1NywwLjkwODM1OTM3NSAxOS4xNTA5NTcsMS45NTU3MjI2NiBMMTkuMTUwOTU3LDEuOTU1NzIyNjYgQzE5LjE1MDc0MjIsMy4wMDMwODU5NCAxOC4zMDE0NjQ4LDMuODUyMzYzMjggMTcuMjU0MTAxNiwzLjg1MjM2MzI4IEwxNy4yNTQxMDE2LDMuODUyMzYzMjggWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOTkuMTk0ODYzMyw3Ny45NjYxNTIzIEw3NS4yODc5MTAyLDc3Ljk2NjE1MjMgQzc0LjU1NzQ0MTQsNzcuOTY2MTUyMyA3My45NjU1NDY5LDc3LjM3NDI1NzggNzMuOTY1NTQ2OSw3Ni42NDM3ODkxIEw3My45NjU1NDY5LDYwLjMyMjc1MzkgQzczLjk2NTU0NjksNTkuNTkyMjg1MiA3NC41NTc0NDE0LDU5LjAwMDM5MDYgNzUuMjg3OTEwMiw1OS4wMDAzOTA2IEw5OS4xOTUwNzgxLDU5LjAwMDM5MDYgQzk5LjkyNTU0NjksNTkuMDAwMzkwNiAxMDAuNTE3NDQxLDU5LjU5MjI4NTIgMTAwLjUxNzQ0MSw2MC4zMjI3NTM5IEwxMDAuNTE3NDQxLDc2LjY0Mzc4OTEgQzEwMC41MTcyMjcsNzcuMzc0MDQzIDk5LjkyNTMzMiw3Ny45NjYxNTIzIDk5LjE5NDg2MzMsNzcuOTY2MTUyMyBMOTkuMTk0ODYzMyw3Ny45NjYxNTIzIFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3Ny41NTg1OTQsIDYyLjczNDM3NSkiIGZpbGw9IiNERUVCRjgiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMy40NzU4NTk0LDExLjQzODQ5NjEgTDUuODg5NzI2NTYsMTEuNDM4NDk2MSBDNC44NDIzNjMyOCwxMS40Mzg0OTYxIDMuOTkzMDg1OTQsMTAuNTg5MjE4OCAzLjk5MzA4NTk0LDkuNTQxODU1NDcgTDMuOTkzMDg1OTQsOS41NDE4NTU0NyBDMy45OTMwODU5NCw4LjQ5NDQ5MjE5IDQuODQyMzYzMjgsNy42NDUyMTQ4NCA1Ljg4OTcyNjU2LDcuNjQ1MjE0ODQgTDEzLjQ3NTg1OTQsNy42NDUyMTQ4NCBDMTQuNTIzMjIyNyw3LjY0NTIxNDg0IDE1LjM3MjUsOC40OTQ0OTIxOSAxNS4zNzI1LDkuNTQxODU1NDcgTDE1LjM3MjUsOS41NDE4NTU0NyBDMTUuMzcyNSwxMC41ODk0MzM2IDE0LjUyMzIyMjcsMTEuNDM4NDk2MSAxMy40NzU4NTk0LDExLjQzODQ5NjEgTDEzLjQ3NTg1OTQsMTEuNDM4NDk2MSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMjY4OTI1OCwzLjg1MjM2MzI4IEwyLjA5NjQ0NTMxLDMuODUyMzYzMjggQzEuMDQ5MDgyMDMsMy44NTIzNjMyOCAwLjE5OTgwNDY4OCwzLjAwMzA4NTk0IDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgTDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgQzAuMTk5ODA0Njg4LDAuOTA4MzU5Mzc1IDEuMDQ5MDgyMDMsMC4wNTkwODIwMzEyIDIuMDk2NDQ1MzEsMC4wNTkwODIwMzEyIEwxNy4yNjg5MjU4LDAuMDU5MDgyMDMxMiBDMTguMzE2Mjg5MSwwLjA1OTA4MjAzMTIgMTkuMTY1NTY2NCwwLjkwODM1OTM3NSAxOS4xNjU1NjY0LDEuOTU1NzIyNjYgTDE5LjE2NTU2NjQsMS45NTU3MjI2NiBDMTkuMTY1NTY2NCwzLjAwMzA4NTk0IDE4LjMxNjI4OTEsMy44NTIzNjMyOCAxNy4yNjg5MjU4LDMuODUyMzYzMjggTDE3LjI2ODkyNTgsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC43MTIwODk4LDc3Ljk2NjE1MjMgTDEwLjgwNTEzNjcsNzcuOTY2MTUyMyBDMTAuMDc0ODgyOCw3Ny45NjYxNTIzIDkuNDgyNzczNDQsNzcuMzc0MjU3OCA5LjQ4Mjc3MzQ0LDc2LjY0Mzc4OTEgTDkuNDgyNzczNDQsNjAuMzIyNzUzOSBDOS40ODI3NzM0NCw1OS41OTIyODUyIDEwLjA3NDY2OCw1OS4wMDAzOTA2IDEwLjgwNTEzNjcsNTkuMDAwMzkwNiBMMzQuNzEyMzA0Nyw1OS4wMDAzOTA2IEMzNS40NDI1NTg2LDU5LjAwMDM5MDYgMzYuMDM0NjY4LDU5LjU5MjI4NTIgMzYuMDM0NjY4LDYwLjMyMjc1MzkgTDM2LjAzNDY2OCw3Ni42NDM3ODkxIEMzNi4wMzQ0NTMxLDc3LjM3NDA0MyAzNS40NDI1NTg2LDc3Ljk2NjE1MjMgMzQuNzEyMDg5OCw3Ny45NjYxNTIzIEwzNC43MTIwODk4LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjEwNTQ2OSwgNjIuNzM0Mzc1KSIgZmlsbD0iIzY0OTZEQyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjQ0NjIxMDksMTEuNDM4NDk2MSBMNS44NjAwNzgxMywxMS40Mzg0OTYxIEM0LjgxMjcxNDg0LDExLjQzODQ5NjEgMy45NjM0Mzc1LDEwLjU4OTIxODggMy45NjM0Mzc1LDkuNTQxODU1NDcgTDMuOTYzNDM3NSw5LjU0MTg1NTQ3IEMzLjk2MzQzNzUsOC40OTQ0OTIxOSA0LjgxMjcxNDg0LDcuNjQ1MjE0ODQgNS44NjAwNzgxMyw3LjY0NTIxNDg0IEwxMy40NDYyMTA5LDcuNjQ1MjE0ODQgQzE0LjQ5MzU3NDIsNy42NDUyMTQ4NCAxNS4zNDI4NTE2LDguNDk0NDkyMTkgMTUuMzQyODUxNiw5LjU0MTg1NTQ3IEwxNS4zNDI4NTE2LDkuNTQxODU1NDcgQzE1LjM0Mjg1MTYsMTAuNTg5NDMzNiAxNC40OTM1NzQyLDExLjQzODQ5NjEgMTMuNDQ2MjEwOSwxMS40Mzg0OTYxIEwxMy40NDYyMTA5LDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjIzOTI3NzMsMy44NTIzNjMyOCBMMi4wNjcwMTE3MiwzLjg1MjM2MzI4IEMxLjAxOTY0ODQ0LDMuODUyMzYzMjggMC4xNzAzNzEwOTQsMy4wMDMwODU5NCAwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEwwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEMwLjE3MDM3MTA5NCwwLjkwODM1OTM3NSAxLjAxOTY0ODQ0LDAuMDU5MDgyMDMxMiAyLjA2NzAxMTcyLDAuMDU5MDgyMDMxMiBMMTcuMjM5NDkyMiwwLjA1OTA4MjAzMTIgQzE4LjI4Njg1NTUsMC4wNTkwODIwMzEyIDE5LjEzNjEzMjgsMC45MDgzNTkzNzUgMTkuMTM2MTMyOCwxLjk1NTcyMjY2IEwxOS4xMzYxMzI4LDEuOTU1NzIyNjYgQzE5LjEzNTkxOCwzLjAwMzA4NTk0IDE4LjI4NjY0MDYsMy44NTIzNjMyOCAxNy4yMzkyNzczLDMuODUyMzYzMjggTDE3LjIzOTI3NzMsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==";
+},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgxcHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDgxIDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TW9kdWxlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwLjQ2NjY2NjY2NyAgIDAgMCAwIDAgMC44MDc4NDMxMzcgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMyIgeD0iNiIgeT0iNTciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgcng9IjUuNSI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4zOTIxNTY4NjMgICAwIDAgMCAwIDAuNTg4MjM1Mjk0ICAgMCAwIDAgMCAwLjg2Mjc0NTA5OCAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC01IiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItNiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxICAgMCAwIDAgMCAwLjY3NDUwOTgwNCAgIDAgMCAwIDAgMC42Nzg0MzEzNzMgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTW9kdWxlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMyMEEwRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci00KSIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiM4MEE4RTEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTguMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci02KSIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiNGRkQ2RDIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,t,a){function l(s){a(569)}var n=a(13)(null,a(571),l,"data-v-22ed63d3",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("资源")]),l("p",[s._v("这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(565),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("下载")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(566),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("下载")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(567),alt:""}}),l("h3",[s._v("组件交互文档")]),l("p",[s._v("进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("下载")])])])])])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/index.vue":573,"./zh-CN/index.vue":585};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=572},function(s,t,a){function l(s){a(574)}var n=a(13)(a(576),a(579),l,"data-v-05bad635",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(577),e=l(n);t.default={mounted:function(){function s(t){t.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(a){s(t),a()})}var t=(0,e.default)({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(a){s(t),a()})}}},function(s,t,a){s.exports=a(578)},function(s,t,a){!function(t,a){s.exports=a()}(this,function(){return function(s){function t(l){if(a[l])return a[l].exports;var n=a[l]={exports:{},id:l,loaded:!1};return s[l].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=s,t.c=a,t.p="",t(0)}([function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){if(Array.isArray(s)){for(var t=0,a=Array(s.length);t<s.length;t++)a[t]=s[t];return a}return Array.from(s)}function e(s){return Array.isArray(s)?s:Array.from(s)}function i(){function s(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l=(0,_.default)(s,t,a);return D.casting[l.name]=l,this}function t(s){return D.onStage=s,this}function a(){return D.casting[D.onStage]||null}function l(){function s(a){if(o.default.isArray(a)&&a.forEach(function(t){s(t)}),o.default.isString(a)){var l=a.split(":"),n=void 0;l.length>1&&"\\"!==l[0].charAt(l[0].length-1)&&(n=l.shift(),s({name:"erase",actor:n}));var e=l.join(":").replace(/\\:/g,":"),i={name:"type",args:[e]};null!=n&&(i.actor=n),s(i)}o.default.isFunction(a)&&s({name:"callback",args:[a]}),o.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),o.default.isObject(a)&&(o.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){y(a.name+":end",a),p()}),t.push(a))}for(var t=[],a=arguments.length,l=Array(a),n=0;n<a;n++)l[n]=arguments[n];return s([{name:"publisher",args:["sequence:start"]}].concat(l).concat({name:"publisher",args:["sequence:end"]})),Array.prototype.push.apply(D.scenario,t),D.options.autoplay&&i(),this}function i(){return"stopping"===D.status&&(D.status="playing"),"ready"===D.status&&(D.status="playing",p()),this}function v(s){return("ready"===D.status||o.default.isFunction(s))&&(D.currentScene=-1,"ready"===D.status?i():s()),this}function c(){return D.status="stopping",this}function p(){if("stopping"===D.status)return D.status="ready",this;if("playing"!==D.status)return this;if(D.currentScene+1>=D.scenario.length)return D.status="ready",y("scenario:end"),this;var s=D.scenario[++D.currentScene];if(0===D.currentScene&&y("scenario:start"),"publisher"===s.name){var a=e(s.args),l=a[0],i=a.slice(1);return y.apply(void 0,n(i)),l()}switch(s.actor&&t(s.actor),y(s.name+":start",s),s.name){case"type":h.apply(void 0,n(s.args));break;case"erase":C.apply(void 0,n(s.args));break;case"callback":m.apply(void 0,n(s.args));break;case"wait":b.apply(void 0,n(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function h(s,t){var l=a(),n=D.options.locale,e=D.options.minSpeed.type,i=D.options.maxSpeed.type,v=l.displayValue,_=-1,c=!1,r=null,p=null,o=j.default.map(t);return t=j.default.strip(t),function a(){var h=j.default.strip(l.displayValue.substr(v.length));if(h===t)return s();var C=t.substr(0,_+1),u=h!==C,g=l.shouldBeMistaken(h,t,r,p),m=c||!g;if(u&&m)c=!0,r=null,l.displayValue=v+j.default.inject(h.substr(0,h.length-1),o),_--,p=_;else{c=!1;var b=t.charAt(++_);g&&(b=d.default.randomCharNear(b,n),null==r&&(r=_)),l.displayValue=v+j.default.inject(h+b,o)}return setTimeout(a,l.getTypingSpeed(e,i))}(),this}function C(s,t){var l=a();if(null==l)return s();if(w.erase!==!0)return l.displayValue="",s();var n=D.options.minSpeed.erase,e=D.options.maxSpeed.erase,i=l.displayValue,v=j.default.map(i);i=j.default.strip(i);var _=i.length,c=void 0,r=0;return o.default.isNumber(t)&&(t>0?c=t:r=i.length+t),function t(){return _===r?s():(l.displayValue=j.default.inject(i.substr(0,--_),v),setTimeout(t,c||l.getTypingSpeed(n,e)))}(),this}function m(s,t){return t.call(this,s),this}function b(s,t){return setTimeout(s.bind(this),t),this}function f(s,t){return s.split(",").forEach(function(s){s=s.trim(),o.default.isArray(D.events[s])||(D.events[s]=[]),D.events[s].push(t)}),this}function y(){for(var s=arguments.length,t=Array(s),a=0;a<s;a++)t[a]=arguments[a];var l=t[0],n=D.events[l]||[];return n.length>0&&n.concat(D.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(w=r.default.merge({},g,w),o.default.isNumber(w.minSpeed)){var k=w,x=k.minSpeed;w.minSpeed={erase:x,type:x}}if(o.default.isNumber(w.maxSpeed)){var A=w,M=A.maxSpeed;w.maxSpeed={erase:M,type:M}}if("detect"===w.locale&&u){var N=u.languages;o.default.isArray(N)&&o.default.isString(N[0])&&(w.locale=N[0].substr(0,2))}d.default.supports(w.locale)||(w.locale=d.default.defaultLocale);var D={options:w,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:l,play:i,replay:v,stop:c,on:f},{options:{get:function(){return D.options},configurable:!0,enumerable:!0},status:{get:function(){return D.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(t,"__esModule",{value:!0});var v=a(1),_=l(v),c=a(3),r=l(c),p=a(2),o=l(p),h=a(4),d=l(h),C=a(6),j=l(C),u="undefined"!=typeof window&&window.navigator,g={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};i.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],t=i();return t.addActor(s,{accuracy:1,speed:.8}),t},t.default=i,s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}Object.defineProperty(t,"__esModule",{value:!0});var n=a(2),e=l(n),i=a(3),v=l(i),_="undefined"!=typeof window&&window.document,c={speed:.6,accuracy:.6};t.default=function(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l="",n=void 0;if(e.default.isNumber(t)&&(t={speed:t,accuracy:t}),t=v.default.merge({},c,t),_&&(null==a&&(a="#"+s),e.default.isString(a))){var i=a,r=_.querySelector(i);if(null==r)throw new Error("no matches for "+s+"'s selector: "+i);n=r,a=function(s){n.innerHTML=s}}return e.default.isFunction(a)||(a=console.log.bind(console)),Object.defineProperties({$element:n,getTypingSpeed:function(s,a){var l=v.default.randomFloat(t.speed,1);return v.default.getPercentageOf(a,s,l)},shouldBeMistaken:function(s,a){var l=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n=arguments.length<=3||void 0===arguments[3]?null:arguments[3],i=10*t.accuracy;if(i>=8)return!1;if(s.length<=i)return!1;if(s.length===a.length)return!1;if(e.default.isNumber(l)){var _=s.length-l,c=i>=6?10-i:4;if(_>=c)return!1}if(e.default.isNumber(n)){var _=s.length-n,r=2*Math.max(i,2);if(_<=r)return!1}return v.default.randomFloat(0,.8)>t.accuracy}},{displayValue:{get:function(){return l},set:function(s){l=s,a(s)},configurable:!0,enumerable:!0},name:{get:function(){return s},configurable:!0,enumerable:!0}})},s.exports=t.default},function(s,t){"use strict";function a(s){return{}.toString.call(s)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={isNumber:function(s){return"number"==typeof s},isString:function(s){return"[object String]"===a(s)},isObject:function(s){return"[object Object]"===a(s)},isArray:function(s){return"[object Array]"===a(s)},isFunction:function(s){return"function"==typeof s}},s.exports=t.default},function(s,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={merge:function(s){for(var t=[].slice.call(arguments,1),a=0,l=t.length;a<l;a++){var n=t[a];for(var e in n)n.hasOwnProperty(e)&&(s[e]=n[e])}return s},random:function(s,t){return Math.floor(Math.random()*(t-s+1))+s},randomFloat:function(s,t){return Math.random()*(t-s)+s},getPercentageOf:function(s,t,a){return s-s*a+t*a}},s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){for(var t={},a=0,l=s.length,n=void 0;a<l;a++){n=s[a];for(var e=0,i=n.length;e<i;e++)t[n[e]]={x:e,y:a}}return t}Object.defineProperty(t,"__esModule",{value:!0});var e=a(2),i=l(e),v=a(3),_=l(v),c=a(5),r=l(c),p="en";for(var o in r.default)if(r.default.hasOwnProperty(o)){var h=r.default[o];r.default[o]={list:h,mapped:n(h)}}t.default={defaultLocale:p,supports:function(s){return i.default.isObject(r.default[s])},randomCharNear:function(s,t){if(!this.supports(t))throw new Error('locale "'+t+'" is not supported');var a=r.default[t].mapped,l=1,n=[],e=/[A-Z]/.test(s);s=s.toLowerCase();var i=a[s]||[],v=void 0;for(var c in a)a.hasOwnProperty(c)&&c!==s&&(v=a[c],Math.abs(i.x-v.x)<=l&&Math.abs(i.y-v.y)<=l&&n.push(c));var p=n.length>0?n[_.default.random(0,n.length-1)]:this.randomChar(t);return e&&(p=p.toUpperCase()),p},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var t=r.default[s].list.join("");return t.charAt(_.default.random(0,t.length-1))}},s.exports=t.default},function(s,t){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){var t=s.match(/<([^\s>]+)/);return Boolean(t)&&i.default.indexOf(t[1].toLowerCase())>-1}Object.defineProperty(t,"__esModule",{value:!0});var e=a(7),i=l(e);t.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var t=/<[^>]+>/gi,a=[],l=[],e=void 0,i=void 0;e=t.exec(s);)i={tagName:e[0],position:e.index},"/"===i.tagName.charAt(1)?i.opener=l.pop():"/"===i.tagName.charAt(i.tagName.length-2)||n(i.tagName)||l.push(i),a.push(i);return a},inject:function(s,t){for(var a=0,l=void 0;a<t.length;a++)l=t[a],s.length>0&&l.position<=s.length?s=s.substr(0,l.position)+l.tagName+s.substr(l.position):l.opener&&l.opener.position<s.length&&(s+=l.tagName);return s}},s.exports=t.default},function(s,t){s.exports=["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]}])})},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(580),alt:""}}),l("h3",[s._v("Guide")]),l("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(581),alt:""}}),l("h3",[s._v("Component")]),l("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(582),alt:""}}),l("h3",[s._v("Resource")]),l("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(583),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("A Desktop UI Library")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),l("img",{attrs:{src:a(584),alt:"Element"}})])])}]}},function(s,t,a){s.exports=a.p+"static/guide.0a8462c.png"},function(s,t,a){s.exports=a.p+"static/component.bd3411b.png"},function(s,t,a){s.exports=a.p+"static/resource.a72b8f8.png"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA74AAACRCAYAAADkbGR/AAAAAXNSR0IArs4c6QAAEK9JREFUeAHt3d1vHFcZB+Cd2U3txknUFKgDSBAwaaKmNGplQPS2t9wg1FwiQRoJlX+Cf6KlUeoScYWKUG+47RVSkUrUqIhEiZsQqjYoQRCixJTY8e6wJ/RY2+3uetfej/l4LFlnPTM7532fYzn+Zca7tZoPAgQIECBAgAABAgQIECBAgAABAgQIzFLg3uu/fjp8zrIGcxMgQGCWAtnN3z8dPmdZg7kJECiuQFLc0lVOgACBagiEwJvVmt8I3Sa1+vX9L/34L9XoXJcECBD4v0AIvM3a5sOfg/Va43py6Ad+DvrmIEBgJAHBdyQuBxMgQGC6Ap2hN84s/EYJIwECVRDoDL2xX+E3ShgJEBhWQPAdVspxBAgQmLJAr9AbSxB+o4SRAIEyC/QKvbFf4TdKGAkQGEZA8B1GyTEECBCYssCg0BtLEX6jhJEAgTIKDAq9sV/hN0oYCRDYTkDw3U7IfgIECExZYJjQG0sSfqOEkQCBMgkME3pjv8JvlDASIDBIQPAdpGMfAQIEpiwwSuiNpQm/UcJIgEAZBEYJvbFf4TdKGAkQ6CeQ9tthOwECBAgQIECAAAECBAgQKIOAK75lWEU9ECBQKoFRrvq62luqpdcMAQKfCoxy1dfVXt82BAgMIyD4DqPkGAIECExZYJjwK/ROeVFMR4DAVAWGCb9C71SXxGQECi0g+BZ6+RRPgECZBQaFX6G3zCuvNwIEosCg8Cv0RiUjAQLDCAi+wyg5hgABAjMS6BV+hd4ZLYZpCRCYiUCv8Cv0zmQpTEqg0AKCb6GXT/EECFRBoDP8Cr1VWHE9EiDQLdAZfoXebh1fEyBAgAABAgRKIhDCb/gsSTvaIECAwMgCIfyGz5Gf6AkECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECFRAIMuy5P6Zc0vZ2bOLvdpNem20jQABAgQIECBAgAABAgQIFEEghN67r64sJbX0iVDv/kea15LTp2911i74dmp4TIAAAQIECBAgQIAAAQKFEegOvbHw7vAr+EYZIwECBAgQIECAAAECBAgURqBf6I0NdIZfwTeqGAkQIECAAAECBAgQIECgEALbhd7YRAy/gm8UMRIgQIAAAQIECBAgQIBAIQTCC1ltbLZ6vpBVdwNp+29+0+6NviZAgAABAgQIECBAgAABAnkWmEsfrA1TX6NRay6k6Seu+A6j5RgCBAgQIECAAAECBAgQyJVAeOuiexv1pX5FhdD7aCO7lJw6dU/w7adkOwECBAgQIECAAAECBAjkWqBf+O0MvaEBwTfXy6g4AgQIECBAgAABAgQIEBgk0B1+u0NveK7gO0jQPgIECBAgQIAAAQIECBDIvUAMv71Cb+6LVyABAgQIECBAgAABAgQIEBhGYK39N7/Zysr+YY51DAECBAgQIECAAAECBAgQIECAAIHxCLTfeDsNn+M5m7MQIECAAAECBAgQINBLoNFro20ECExeIATety/dPhZmaj++nCRJa/KzmoEAAQIECBAgQIBA9QS8uFX11lzHORCIobcddR8L5bSv+d554anHhd8crI0SCBAgQIAAAQIEyicg+JZvTXWUc4Hu0BvLFX6jhJEAAQIECBAgQIDAeAUE3/F6OhuBgQL9Qm98kvAbJYwECBAgQIAAAQIExifgRXXGZ+lMBAgQIECAAAECBAgQIJBDAVd8c7goSiq3QL+rvq72lnvddUeAAAECBAgQIDA7gZ5XfF/MsvrsSjIzgXILhFdvDi9kFYJu7FTojRJGAgQIECBAgAABAuMX+NwV38Wb7y/U9jW/30jrl2/sPfHx+Kd0RgIEgkC88hsee0XnoOCDAAECBAgQIECAwGQEPhN8Q+jN9m08nyTpfJiukTQuCL+TgXdWAkEghN8weg/foOCDAAECBAgQIECAwGQEtoJvd+iN0wm/UcJIgAABAgQIECBAgAABAkUUeBh8+4Xe2JDwGyWMBAgQIECAAAECBAgQIFA0gXS70Bsa2sw2nz289u6hojWnXgIECBAgQIAAAQIECBAgkDb23p9Pk8aeQRRJq3l3YWHh9qBj7CNAgAABAgQIECBAgAABAnkUSG8c+N6/0mbz3aSWNnsVGELvF/Yt/PFicnyj137bCBAgQIAAAQIECBCorkD7xTqT137z3onXf/fe16uroPO8C2y9uNVX7p7/Yqte/25Wa229h6/Qm/flUx8BAgQIECBAgACB2QmE0HvmrQvP1FrZ10IVjST580s/eu7D2VVkZgK9BR6+lUrY9fcDy//svPIr9PYGs5UAAQIECORJIPzSmX1wbin769nFPNWlFgIEyi/QHXpDx5tZ9owrv+Vf+yJ2uHXFNxYfrvxuNupHv/ToI39ye3NUMRIgQIAAgfwJhF861y+tLNXT9IlQXWOueS355ulb+atURQQIlFHgl29dOJw0W9/u1dtcPf3DT3747J1e+2wjMAuBzwXfWRRhTgIECBAgQGA0ge7QG58t/EYJIwECkxZo/xxKX/vt+8tJ2vzMHSetVmP15ZMnrkx6fucnMIrA1q3OozzJsQQIECBAgMCMBf52bjFe6e2sZHO9vpRdfGVf5zaPCRAgMAmBJElaP3vxxPmsVd+600TonYS0c45DQPAdh6JzECBAgACBaQsc/vAfrXrz393Ttt+g8KPk+M/Xurf7mgABApMQ6Ay/Qu8khJ1zXAJudR6XpPMQIECAAIEpC2TZL9KND756NG3WD4apH4beb/30oymXYToCBAjUwp9ftD8yFATyKiD45nVl1EWAAAECBIYQiOH3kbS+lgi9Q4g5hAABAgQIECBAgAABAgQKJxCutBSuaAUTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGJC2RZll67dm354sWLhyY+mQkqIZBWoktNEiBAgAABAgQIECBQCIEQeldXV5dbrdaX0zQVfguxavkvMsl/iSokQIDA7gTCP6DhDEmStHZ3Js8mQIAAAQIEJikQQ2878C7GeTY3N7N2CD5//Pjxm3GbkcCoAoLvqGKOJ0CgUALhH9C3L90+Fop+4anHLwu/hVo+xRIgQIBAhQR6hd7YvvAbJYw7FRB8dyrneQQI5F4ght72dd7HQrHt6753hN/cL5sCCRAgQKCCAoNCb+QQfqOEcScCgu9O1DyHAIHcC3SH3liw8BsljAQIECBAIB8Cw4TeWKnwGyWMowp4catRxRxPgEDuBfqF3lB4uPobbn0Ox+S+EQUSIECAAIEKCFy9enVP+9/lfcO02mg0kvn5+QPDHOsYAp0CfvHr1PCYAAECBAgQIECAAIGpChw5cmR9bm7unWaz+Z/tJm4fs7q0tLS63XH2E+gWcKtzt4ivCRAohUC/q75udS7F8mqCAAECBEoocP369fn19fXn6/X6Qq/2Qug9duzYlV77bCOwnYDgu52Q/QQIFFagO/wKvYVdSoUTIECAQEUE+oVfobci3wATbFPwnSCuUxMgMHuBGH5DJV7RefbroQICBAgQILCdQHf4FXq3E7N/GAHBdxglxxAgUGiBEH5DA97Dt9DLqHgCBAgQqJBADL/tlm+4vblCC69VAgQIECBAgAABAgQIVEmg/R/XjSr1q1cCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECuxPIsizZ3Rk8mwABAvkTSPNXkooIECBAgAABAgRmIdAOvel/V1a+c/fVlaOzmN+cBAgQmJSA/9GblKzzEiBAgAABAgQKJPBp6F3ONmuLoexmK1k98PKpKwVqQakECBDoKyD49qWxgwABAgQIECBQDYHu0Bu7Fn6jhJEAgaILuNW56CuofgIECBAgQIDALgT6hd5wynqaPXl3xW3Pu+D1VAIEciLgim9OFkIZBAgQIECAAIFpCwwKvZ21NPe0b3s+5bbnThOPCRAoloArvsVaL9USIECAAAECBMYm8MkbbzwX/6Z30EnrD7In7585tzToGPsIECCQZwHBN8+rozYCBAgQIECAwAQFsvvpx82slW03RZYk63MH997a7jj7CRAgkFcBtzrndWXURYAAAQIECBCYgsDaK7861EofLNeTtOfvhSH0Lhzc/05y8uTaFMoxBQECBCYi0PMH3ERmclICBAgQIECAAIFcCvQLv0JvLpdLUQQI7EBA8N0BmqcQIECAAAECBMom0B1+hd6yrbB+CFRbQPCt9vrrngABAgQIECCwJRDDb5rWN9zevMXiAQECBAgQIECAAAECBAiUSWDt7NnF7M0395WpJ70QIEDgf01Qh63gZYluAAAAAElFTkSuQmCC"},function(s,t,a){s.exports=a.p+"static/banner-bg.75437e1.svg"},function(s,t,a){function l(s){a(586)}var n=a(13)(a(588),a(589),l,"data-v-b2da9546",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(577),e=l(n);t.default={mounted:function(){function s(t){t.addScene("产品设计师",1800,-5,800).addScene("交互设计师",1800,-5,500).addScene("视觉设计师",1800,-5,700).addScene("产品经理",1800,-4,600).addScene("前端工程师",1800,-5,800).addScene(function(a){s(t),a()})}var t=(0,e.default)();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:.5,accuracy:1}).addScene(2600).addScene("line2:只为守护世界和平",300,-6,1e3).addScene("让你少加班",300,-5).addScene("line2:只为这样的你: ",400).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(580),alt:""}}),l("h3",[s._v("指南")]),l("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(581),alt:""}}),l("h3",[s._v("组件")]),l("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(582),alt:""}}),l("h3",[s._v("资源")]),l("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(583),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("网站快速成型工具")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。")])]),l("img",{attrs:{src:a(584),alt:"Element"}})])])}]}},function(s,t,a){var l=a(13)(a(591),a(597),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(592),e=l(n);t.default={components:{PlayComponent:e.default}}},function(s,t,a){function l(s){a(593)}var n=a(13)(a(595),a(596),l,"data-v-253c8cb7",null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{},data:function(){return{value:"#bfcbd9",value2:null}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("el-button",{on:{click:function(t){s.value="#fff"}}},[s._v("Change Value")]),a("div",[s._v("Value: "+s._s(s.value))]),a("el-color-picker",{model:{value:s.value,callback:function(t){s.value=t},expression:"value"}}),a("div",[s._v("Value2: "+s._s(s.value2))]),a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)},staticRenderFns:[]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticStyle:{margin:"20px"}},[a("play-component")],1)},staticRenderFns:[]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t){},,,,,function(s,t,a){function l(s){a(991)}var n=a(13)(a(993),a(995),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n);t.default={data:function(){return{hovering:!1,isExpanded:!1}},props:{jsfiddle:Object,default:function(){return{}}},methods:{goJsfiddle:function(){var s=this.jsfiddle,t=s.script,a=s.html,l=s.style,n='<script src="//unpkg.com/vue/dist/vue.js"></script>\n<script src="//unpkg.com/element-ui/lib/index.js"></script>',e=(t||"").replace(/export default/,"var Main =").trim(),i=n+'\n<div id="app">\n'+a.trim()+"\n</div>",v='@import url("//unpkg.com/element-ui/lib/theme-default/index.css");\n'+(l||"").trim()+"\n";e=e?e+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')";var _={js:e,css:v,html:i,panel_js:3,panel_css:1},c=document.getElementById("fiddle-form")||document.createElement("form");c.innerHTML="";var r=document.createElement("textarea");c.method="post",c.action="https://jsfiddle.net/api/post/library/pure/",c.target="_blank";for(var p in _)r.name=p,r.value=_[p].toString(),c.appendChild(r.cloneNode());c.setAttribute("id","fiddle-form"),c.style.display="none",document.body.appendChild(c),c.submit()}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0]},codeAreaHeight:function(){return this.$el.getElementsByClassName("description").length>0?Math.max(this.$el.getElementsByClassName("description")[0].clientHeight,this.$el.getElementsByClassName("highlight")[0].clientHeight):this.$el.getElementsByClassName("highlight")[0].clientHeight;
+}},watch:{isExpanded:function(s){this.codeArea.style.height=s?this.codeAreaHeight+1+"px":"0"}},mounted:function(){var s=this;this.$nextTick(function(){var t=s.$el.getElementsByClassName("highlight")[0];0===s.$el.getElementsByClassName("description").length&&(t.style.width="100%",t.borderRight="none")})}}},function(s,t){s.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on jsfiddle.net"},footer:{feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}}]},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"demo-block",class:[s.blockClass,{hover:s.hovering}],on:{mouseenter:function(t){s.hovering=!0},mouseleave:function(t){s.hovering=!1}}},[s._t("source"),a("div",{staticClass:"meta"},[a("div",{staticClass:"description"},[s._t("default"),a("el-tooltip",{attrs:{effect:"dark",content:s.langConfig["tooltip-text"],placement:"right"}},[a("el-button",{attrs:{size:"small",type:"primary"},on:{click:s.goJsfiddle}},[s._v(s._s(s.langConfig["button-text"]))])],1)],2),s._t("highlight")],2),a("div",{staticClass:"demo-block-control",on:{click:function(t){s.isExpanded=!s.isExpanded}}},[a("transition",{attrs:{name:"arrow-slide"}},[a("i",{class:[s.iconClass,{hovering:s.hovering}]})]),a("transition",{attrs:{name:"text-slide"}},[a("span",{directives:[{name:"show",rawName:"v-show",value:s.hovering,expression:"hovering"}]},[s._v(s._s(s.controlText))])])],1)],2)},staticRenderFns:[]}},function(s,t,a){function l(s){a(997)}var n=a(13)(a(999),a(1e3),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n),i=a(598);t.default={data:function(){return{version:i.version}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0].footer}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("footer",{staticClass:"footer"},[l("div",{staticClass:"container"},[l("div",{staticClass:"footer-main"},[l("p",{staticClass:"footer-main-title"},[s._v("Element "+s._s(s.version)+" Lithium")]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[s._v(s._s(s.langConfig.feedback))]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+s.lang+".md",target:"_blank"}},[s._v(s._s(s.langConfig.contribution))])]),l("div",{staticClass:"footer-social"},[l("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[l("div",{staticClass:"footer-popover-title"},[s._v(s._s(s.langConfig.eleme)+" UED")]),l("img",{attrs:{src:a(1001),alt:""}})]),l("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),s._m(0)],1)])])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("a",{attrs:{href:"//github.com/elemefe",target:"_blank"}},[a("i",{staticClass:"doc-icon-github elementdoc"})])}]}},function(s,t,a){s.exports=a.p+"static/qrcode.a88f522.png"},function(s,t,a){function l(s){a(1003)}var n=a(13)(a(1005),a(1006),l,"data-v-7ad4e6e1",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n);t.default={data:function(){return{active:"",isHome:!1,headerStyle:{}}},watch:{"$route.path":{immediate:!0,handler:function(){this.isHome=/^home/.test(this.$route.name),this.headerStyle.backgroundColor="rgba(32, 160, 255, "+(this.isHome?"0":"1")+")"}}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0].header}},methods:{switchLang:function(s){this.lang!==s&&(localStorage.setItem("ELEMENT_LANGUAGE",s),this.$router.push(this.$route.path.replace(this.lang,s)))}},mounted:function(){function s(s){window.addEventListener("scroll",function(){s()},!1)}var t=this;s(function(){if(t.isHome){var s=200,a=Math.min(document.documentElement.scrollTop||document.body.scrollTop,s)/s;t.$refs.header.style.backgroundColor="rgba(32, 160, 255, "+a+")"}})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"headerWrapper"},[l("header",{ref:"header",staticClass:"header",class:{"header-home":s.isHome},style:s.headerStyle},[l("div",{staticClass:"container"},[l("h1",[l("router-link",{attrs:{to:"/"+s.lang}},[l("img",{staticClass:"nav-logo",attrs:{src:a(1007),alt:"element-logo"}}),l("img",{staticClass:"nav-logo-small",attrs:{src:a(1008),alt:"element-logo"}})])],1),l("ul",{staticClass:"nav"},[l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/guide"}},[s._v(s._s(s.langConfig.guide)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/component"}},[s._v(s._s(s.langConfig.components)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/resource",exact:""}},[s._v(s._s(s.langConfig.resource)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("span",{staticClass:"nav-lang",class:{active:"zh-CN"===s.lang},on:{click:function(t){s.switchLang("zh-CN")}}},[s._v("\n            中文\n          ")]),l("span",[s._v(" / ")]),l("span",{staticClass:"nav-lang",class:{active:"en-US"===s.lang},on:{click:function(t){s.switchLang("en-US")}}},[s._v("\n            En\n          ")])])])])])])},staticRenderFns:[]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t,a){function l(s){a(1010)}var n=a(13)(a(1012),a(1013),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n),i=a(598);t.default={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,versions:[],version:i.version,dropdownVisible:!1}},watch:{"$route.path":function(){this.handlePathChange()}},computed:{navStyle:function(){return this.isSmallScreen?{"padding-bottom":"60px"}:{}},isComponentPage:function(){return/^component-/.test(this.$route.name)},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.$route.meta.lang})[0].nav}},methods:{switchVersion:function(s){s!==this.version&&(location.href=location.origin+"/"+this.versions[s]+"/"+location.hash+" ")},handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var s=this;return this.isSmallScreen?void this.$nextTick(function(){s.hideAllMenu();for(var t=s.$el.querySelector("a.active"),a=t.parentNode;"UL"!==a.tagName;)a=a.parentNode;a.style.height="auto"}):void this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="auto"})},expandMenu:function(s){if(this.isSmallScreen){var t=s.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),s.currentTarget.nextElementSibling.style.height="auto")}},handleDropdownToggle:function(s){this.dropdownVisible=s}},created:function(){var s=this,t=new XMLHttpRequest;t.onreadystatechange=function(a){4===t.readyState&&200===t.status&&(s.versions=JSON.parse(t.responseText))},t.open("GET","/versions.json"),t.send()},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"side-nav",style:s.navStyle},[a("el-dropdown",{directives:[{name:"show",rawName:"v-show",value:s.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-dropdown",class:{"is-active":s.dropdownVisible},attrs:{trigger:"click"}},[a("span",[s._v("\n      "+s._s(s.langConfig.dropdown)+s._s(s.version)+"\n      "),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{offset:-80},on:{input:s.handleDropdownToggle},slot:"dropdown"},s._l(Object.keys(s.versions),function(t){return a("el-dropdown-item",{key:t,nativeOn:{click:function(a){s.switchVersion(t)}}},[s._v("\n        "+s._s(t)+"\n      ")])}))],1),a("ul",s._l(s.data,function(t){return a("li",{staticClass:"nav-item"},[t.path?a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}}):a("a",{on:{click:s.expandMenu}},[s._v(s._s(t.name))]),t.children?a("ul",{staticClass:"pure-menu-list sub-nav"},s._l(t.children,function(t){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}})],1)})):s._e(),t.groups?s._l(t.groups,function(t){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title",on:{click:s.expandMenu}},[s._v(s._s(t.groupName))]),a("ul",{staticClass:"pure-menu-list"},s._l(t.list,function(t){return t.disabled?s._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title)}})],1)}))])}):s._e()],2)}))],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(1015)}var n=a(13)(a(1017),a(1018),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n);t.default={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var s=this,t=e.default[this.lang];this.nav=t[0].children.concat(t[1]),t[2].groups.map(function(s){return s.list}).forEach(function(t){s.nav=s.nav.concat(t)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var s=0,t=this.nav.length;s<t;s++)if(this.nav[s].path===this.currentComponent){this.currentIndex=s;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(s){this.$router.push("/"+this.lang+"/component"+("prev"===s?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"footer-nav"},[s.leftNav?a("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(t){s.handleNavClick("prev")}}},[a("i",{staticClass:"el-icon-arrow-left"}),s._v("\n    "+s._s(s.leftNav.title||s.leftNav.name)+"\n  ")]):s._e(),s.rightNav?a("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(t){s.handleNavClick("next")}}},[s._v("\n    "+s._s(s.rightNav.title||s.rightNav.name)+"\n    "),a("i",{staticClass:"el-icon-arrow-right"})]):s._e()])},staticRenderFns:[]}},function(s,t){s.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"}}}]);
\ No newline at end of file
diff --git a/1.3/docs.2dddc2b.css b/1.3/docs.2dddc2b.css
new file mode 100644
index 000000000..f740f3805
--- /dev/null
+++ b/1.3/docs.2dddc2b.css
@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}.hljs,.hljs-subst{color:#000}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#756bb1}.hljs-comment,.hljs-quote{color:#636363}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp{color:#31a354}.hljs-deletion,.hljs-variable{color:#88f}.hljs-built_in,.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-title,.hljs-type{color:#3182bd}.hljs-emphasis{font-style:italic}.hljs-attribute{color:#e6550d}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:application/font-woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAwOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLW9mZiIgZD0iTTAgNDQ4YzAgMjgyLjc2NiAyMjkuMjM0IDUxMiA1MTIgNTEyczUxMi0yMjkuMjM0IDUxMi01MTJjMC0yODIuNzY2LTIyOS4yMzQtNTEyLTUxMi01MTJzLTUxMiAyMjkuMjM0LTUxMiA1MTJ6TTk0Ny4yIDQ0OGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMnMtNDM1LjItMTk0Ljg0OS00MzUuMi00MzUuMmMwLTI0MC4zNTEgMTk0Ljg0OS00MzUuMiA0MzUuMi00MzUuMnM0MzUuMiAxOTQuODQ5IDQzNS4yIDQzNS4yek0yOTQuNCA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNNjI3LjIgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTM2MS4xNDMgMjgxLjZjLTIyLjcxMSAwLTQxLjE0My0xOC42MzctNDEuMTQzLTQxLjZzMTguNDMyLTQxLjYgNDEuMTQzLTQxLjZoMzAxLjcxNGMyMi43MTEgMCA0MS4xNDMgMTguNjM3IDQxLjE0MyA0MS42cy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNmgtMzAxLjcxNHoiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAxOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTEiIGQ9Ik01MTIuMDAxIDk2MGMtMjgyLjc3MSAwLTUxMi4wMDEtMjI5LjIzLTUxMi4wMDEtNTEyLjAwMiAwLTI4Mi43NyAyMjkuMjMtNTExLjk5OCA1MTIuMDAxLTUxMS45OTggMjgyLjc2OSAwIDUxMS45OTkgMjI5LjIyNyA1MTEuOTk5IDUxMS45OThzLTIyOS4yMyA1MTIuMDAyLTUxMS45OTkgNTEyLjAwMnpNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTYyNy4yIDU4OC44NTNjMCAyOC4yNDcgMjIuNzI2IDUxLjE0NyA1MS4yIDUxLjE0NyAyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek02OTQuNTI5IDE4MS4xOTdsLTMuNDIyIDEuMjE2Yy01Ni4xNSAyNy44NzItMTE2LjM4OCA0Mi4wNDctMTc4Ljg4MiA0Mi4wNDctNjQuNTU2IDAtMTI1LjYxMS0xNC4zMTYtMTgxLjUxNS00Mi40NWwtMy4zODItMS4xMzJjLTIuMTAyLTAuNjI4LTQuOTQ1LTEuNTI5LTguNDg5LTEuNTI5LTIwLjU1NCAwLTM3LjIzOSAxOC4yOS0zNy4yMzkgNDAuNzM0IDAgMTAuNjU1IDQuNTcxIDIxLjM2MSAxMi4xMTQgMjkuMzk5bC0wLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAyOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTIiIGQ9Ik01MTItNjRjLTI4Mi43NjYgMC01MTIgMjI5LjIzNC01MTIgNTEyczIyOS4yMzQgNTEyIDUxMiA1MTJjMjgyLjc2NiAwIDUxMi0yMjkuMjM0IDUxMi01MTJzLTIyOS4yMzQtNTEyLTUxMi01MTJ6TTI5NC40IDU4OC44NTN2LTUxLjMwN2MwLTI4LjQ4MiAyMi45MjMtNTEuMTQ3IDUxLjItNTEuMTQ3IDI4LjQ3NCAwIDUxLjIgMjIuODk5IDUxLjIgNTEuMTQ3djUxLjMwN2MwIDI4LjQ4Mi0yMi45MjMgNTEuMTQ3LTUxLjIgNTEuMTQ3LTI4LjQ3NCAwLTUxLjItMjIuODk5LTUxLjItNTEuMTQ3ek02MjcuMiA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3pNMzYxLjE0MyAyODEuNmMtMjIuNzExIDAtNDEuMTQzLTE4LjYzNy00MS4xNDMtNDEuNnMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0YzIyLjcxMSAwIDQxLjE0MyAxOC42MzcgNDEuMTQzIDQxLjZzLTE4LjQzMiA0MS42LTQxLjE0MyA0MS42aC0zMDEuNzE0eiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGU5MDM7IiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMyIgZD0iTTUxMi4wMDEgOTYwYy0yODIuNzcgMC01MTIuMDAxLTIyOS4yMy01MTIuMDAxLTUxMS45OTlzMjI5LjIzLTUxMi4wMDEgNTEyLjAwMS01MTIuMDAxYzI4Mi43NyAwIDUxMS45OTkgMjI5LjIzIDUxMS45OTkgNTExLjk5OXMtMjI5LjIyOSA1MTIuMDAxLTUxMS45OTkgNTEyLjAwMXpNODE3LjQ5NSAzMDUuNTY1Yy0wLjQ0NS0xLjQ4NS0wLjk2My0yLjkzOS0xLjU2OS00LjM1LTAuNjc2LTEuNTcyLTEuNDU1LTMuMDg5LTIuMzE3LTQuNTU2LTU1LjYzMS0xMDcuNjEzLTE2OS41MTgtMTgxLjQ1OS0zMDEuMzIzLTE4MS40NTktMC4wOTYgMC0wLjE5IDAuMDAyLTAuMjg2IDAuMDAycy0wLjE5LTAuMDAyLTAuMjg2LTAuMDAyYy0xMzEuODA0IDAtMjQ1LjY5MyA3My44NDUtMzAxLjMyMyAxODEuNDU5LTAuODYyIDEuNDY3LTEuNjQxIDIuOTg0LTIuMzE3IDQuNTU2LTAuNjA2IDEuNDEtMS4xMjQgMi44NjUtMS41NjkgNC4zNS0xLjEwMyAzLjY4LTEuNzA1IDcuNTY5LTEuNzA1IDExLjU5NyAwIDYuNTY2IDEuNTc5IDEyLjc3MSA0LjM3MiAxOC4yODIgNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWgwLjY3NmM0MS40MTEtODEuNDUzIDEyNy4xMzEtMTM3LjU0NCAyMjYuNTA3LTEzNy42NTIgOTkuMzc1IDAuMTA4IDE4NS4wOTUgNTYuMiAyMjYuNTA3IDEzNy42NTJoMC42NzZjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIzIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIyLTIyLjk1NWMyLjc5NC01LjUxMSA0LjM3Mi0xMS43MTUgNC4zNzItMTguMjgyIDAtNC4wMjktMC42MDItNy45MTgtMS43MDUtMTEuNTk3ek02MjcuMiA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6IiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==#icomoon) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\E900"}.icon-rate-face-1:before{content:"\E901"}.icon-rate-face-2:before{content:"\E902"}.icon-rate-face-3:before{content:"\E903"}body,html{margin:0;padding:0}#app,body,html{height:100%}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;overflow:auto;font-weight:400;-webkit-font-smoothing:antialiased}a{color:#4078c0;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#f9fafc;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 120px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0 30px;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h2:hover a,.page-container h3 a:hover,.page-container h3:hover a,.page-container h4 a:hover,.page-container h4:hover a,.page-container h5 a:hover,.page-container h5:hover a{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}}.page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}.page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}.clearfix[data-v-01b04186]:after,.clearfix[data-v-01b04186]:before{display:table;content:""}.clearfix[data-v-01b04186]:after{clear:both}.share-button[data-v-01b04186]{width:36px;padding:10px}.mark[data-v-01b04186]{margin-top:8px;line-height:1;float:right}.item[data-v-01b04186]{margin-right:40px}.clearfix[data-v-10f2e1a8]:after,.clearfix[data-v-10f2e1a8]:before{display:table;content:""}.clearfix[data-v-10f2e1a8]:after{clear:both}.text[data-v-10f2e1a8]{font-size:14px}.time[data-v-10f2e1a8]{font-size:13px;color:#999}.bottom[data-v-10f2e1a8]{margin-top:13px;line-height:12px}.item[data-v-10f2e1a8]{padding:18px 0}.button[data-v-10f2e1a8]{padding:0;float:right}.image[data-v-10f2e1a8]{width:100%;display:block}.box-card[data-v-10f2e1a8]{width:480px}.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}.demo-input.demo-en-US .el-select .el-input{width:110px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}.demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}.demo-badge.demo-box .el-dropdown{vertical-align:middle}.clearfix[data-v-39800af8]:after,.clearfix[data-v-39800af8]:before{display:table;content:""}.clearfix[data-v-39800af8]:after{clear:both}.share-button[data-v-39800af8]{width:36px;padding:10px}.mark[data-v-39800af8]{margin-top:8px;line-height:1;float:right}.item[data-v-39800af8]{margin-right:40px}.demo-box.demo-button .el-row{margin-bottom:10px}.demo-box.demo-button .el-button+.el-button{margin-left:10px}.demo-box.demo-button .el-button-group{margin-bottom:20px}.demo-box.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-box.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-box.demo-button .intro-block{padding:0}.demo-button .intro-block .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-button .intro-block .block:last-child{border-bottom:none}.demo-button .intro-block .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-button .intro-block .wrapper{float:right;margin-right:20px}.clearfix[data-v-13d5050c]:after,.clearfix[data-v-13d5050c]:before{display:table;content:""}.clearfix[data-v-13d5050c]:after{clear:both}.text[data-v-13d5050c]{font-size:14px}.time[data-v-13d5050c]{font-size:13px;color:#999}.bottom[data-v-13d5050c]{margin-top:13px;line-height:12px}.item[data-v-13d5050c]{padding:18px 0}.button[data-v-13d5050c]{padding:0;float:right}.image[data-v-13d5050c]{width:100%;display:block}.box-card[data-v-13d5050c]{width:480px}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .el-carousel__item:nth-child(2n+1){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}.demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-box.demo-checkbox .checkbox{margin-right:5px}.demo-box.demo-checkbox .checkbox+.checkbox{margin-left:10px}.demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}.demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue-light{background-color:#58b7ff}.bg-blue,.bg-info{background-color:#20a0ff}.bg-blue-dark{background-color:#1d8ce0}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-black{background-color:#1f2d3d}.bg-black-light{background-color:#324057}.bg-black-lighter{background-color:#475669}.bg-silver{background-color:#8492a6}.bg-silver-light{background-color:#99a9bf}.bg-silver-lighter{background-color:#c0ccda}.bg-gray{background-color:#d3dce6}.bg-gray-light{background-color:#e5e9f2}.bg-gray-lighter{background-color:#eff2f7}.bg-white-dark{background-color:#f9fafc}.color-gray{color:#5e6d82}.demo-block.demo-date-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}.demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#20a0ff}.demo-box .el-icon-caret-bottom{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-form.demo-zh-CN .el-select .el-input{width:360px}.demo-form.demo-zh-CN .el-form{width:440px}.demo-form.demo-zh-CN .line{text-align:center}.demo-form.demo-zh-CN .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-zh-CN .el-checkbox-group:after,.demo-form.demo-zh-CN .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-zh-CN .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-zh-CN .demo-form-normal{width:440px}.demo-form.demo-zh-CN .demo-form-inline{width:auto}.demo-form.demo-zh-CN .demo-form-inline .el-input{width:150px}.demo-form.demo-zh-CN .demo-form-inline>*{margin-right:10px}.demo-form.demo-zh-CN .demo-ruleForm{width:460px}.demo-form.demo-zh-CN .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-zh-CN .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-zh-CN .fr{float:right}ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}.icon-list li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.demo-icon .source>i{font-size:24px;color:#8492a6;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li span{display:inline-block;line-height:normal;vertical-align:middle;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}.icon-list li i{display:block;font-size:24px;margin-bottom:15px;color:#8492a6}.icon-list li:hover{color:#5cb6ff}.demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}.demo-input.demo-zh-CN .el-select .el-input{width:110px}.demo-input.demo-zh-CN .el-input{width:180px}.demo-input.demo-zh-CN .el-textarea{width:414px}.demo-input.demo-zh-CN .el-input-group{width:100%}.demo-input.demo-zh-CN .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-zh-CN .demo-autocomplete{text-align:center}.demo-input.demo-zh-CN .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-zh-CN .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-zh-CN .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}.demo-loading .el-table{border:none}.demo-box.demo-menu .el-menu-demo{padding-left:55px}.demo-box.demo-menu .el-menu-vertical-demo{width:200px;min-height:400px}.demo-box.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-box.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-box.demo-menu .tac{text-align:center}.demo-box.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}.demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{float:right;width:70%;margin:5px 20px 0 0}.demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}.demo-box.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-box.demo-progress .el-progress--circle{margin-right:15px}.demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-select .el-select{width:240px}.demo-box.demo-slider .source{padding:0}.demo-box.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-box.demo-slider .block:last-child{border-bottom:none}.demo-box.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-box.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}.demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}.el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}.demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:24px;line-height:22px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:78px;margin-left:10px;vertical-align:bottom}.demo-box.demo-tag .input-new-tag .el-input__inner{height:24px}.demo-box .el-date-editor+.el-date-editor{margin-left:10px}.demo-tooltip .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip .box{width:400px}.demo-tooltip .box .top{text-align:center}.demo-tooltip .box .left{float:left;width:60px}.demo-tooltip .box .right{float:right;width:60px}.demo-tooltip .box .bottom{clear:both;text-align:center}.demo-tooltip .box .item{margin:4px}.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip .box .el-tooltip{margin-left:0}.demo-transfer .transfer-footer{margin-left:20px;padding:6px 5px}.transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#20a0ff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}.demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-typo-box{height:200px;width:200px;position:relative;border:1px solid #eaeefb;font-size:40px;color:#1f2d3d;text-align:center;line-height:162px;padding-bottom:36px;box-sizing:border-box;display:inline-block;margin-right:17px;border-radius:4px}.demo-typo-box .name{position:absolute;bottom:0;width:100%;height:35px;border-top:1px solid #eaeefb;font-size:14px;color:#8492a6;line-height:35px;text-align:left;text-indent:10px;font-family:Helvetica Neue}.demo-typo-size .h1{font-size:20px}.demo-typo-size .h2{font-size:18px}.demo-typo-size .h3{font-size:16px}.demo-typo-size .text-regular{font-size:14px}.demo-typo-size .text-small{font-size:13px}.demo-typo-size .text-smaller{font-size:12px}.demo-typo-size .color-dark-light{color:#99a9bf}.typo-PingFang{font-family:PingFang SC}.typo-Hiragino{font-family:Hiragino Sans GB}.typo-Microsoft{font-family:Microsoft YaHei}.typo-Helvetica-Neue{font-family:Helvetica Neue}.typo-Helvetica{font-family:Helvetica}.typo-Arial{font-family:Arial}.upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:hover{border-color:#20a0ff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}.cards[data-v-f413aa2a]{margin:30px 0 70px}.card[data-v-f413aa2a]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-f413aa2a]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-f413aa2a]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-f413aa2a]{font-size:14px;color:#99a9bf}.cards[data-v-001a30c3]{margin:30px 0 70px}.card[data-v-001a30c3]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-001a30c3]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-001a30c3]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-001a30c3]{font-size:14px;color:#99a9bf}h3[data-v-d0518674]{margin-bottom:15px}.block[data-v-d0518674]{margin-bottom:55px}p[data-v-d0518674]{margin:0 0 15px}.nav-demos p[data-v-d0518674]{margin-bottom:50px}.nav-demos h5[data-v-d0518674]{margin:0}.nav-demos img[data-v-d0518674]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-d0518674]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-d0518674]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-d0518674]{display:block;width:100%}.mask[data-v-d0518674]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-d0518674],.fade-leave-active[data-v-d0518674]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-d0518674],.fade-leave-active[data-v-d0518674]{opacity:0}h3[data-v-30267424]{margin-bottom:15px}.block[data-v-30267424]{margin-bottom:55px}p[data-v-30267424]{margin:0 0 15px}.nav-demos p[data-v-30267424]{margin-bottom:50px}.nav-demos h5[data-v-30267424]{margin:0}.nav-demos img[data-v-30267424]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-30267424]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-30267424]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-30267424]{display:block;width:100%}.mask[data-v-30267424]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-30267424],.zoom-leave-active[data-v-30267424]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-30267424],.zoom-leave-active[data-v-30267424]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-30267424],.fade-leave-active[data-v-30267424]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-30267424],.fade-leave-active[data-v-30267424]{opacity:0}.cards .container[data-v-bc99180a]:after,.cards .container[data-v-bc99180a]:before{display:table;content:""}.cards .container[data-v-bc99180a]:after{clear:both}.page-resource[data-v-bc99180a]{padding-top:55px;box-sizing:border-box}.cards[data-v-bc99180a]{margin:35px auto 110px}.cards .container[data-v-bc99180a]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-bc99180a]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-bc99180a]{font-size:28px;margin:0}p[data-v-bc99180a]{font-size:14px;color:#5e6d82}.card[data-v-bc99180a]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-bc99180a]{margin:75px auto 35px;height:87px}.card h3[data-v-bc99180a]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-bc99180a]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-bc99180a]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-bc99180a]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-bc99180a]{height:auto;padding-bottom:20px}.cards h3[data-v-bc99180a]{height:auto}}.cards .container[data-v-22ed63d3]:after,.cards .container[data-v-22ed63d3]:before{display:table;content:""}.cards .container[data-v-22ed63d3]:after{clear:both}.page-resource[data-v-22ed63d3]{padding-top:55px;box-sizing:border-box}.cards[data-v-22ed63d3]{margin:35px auto 110px}.cards .container[data-v-22ed63d3]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-22ed63d3]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-22ed63d3]{font-size:28px;margin:0}p[data-v-22ed63d3]{font-size:14px;color:#5e6d82}.card[data-v-22ed63d3]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-22ed63d3]{margin:75px auto 35px;height:87px}.card h3[data-v-22ed63d3]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-22ed63d3]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.8}.card a[data-v-22ed63d3]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-22ed63d3]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-22ed63d3]{height:auto;padding-bottom:20px}.cards h3[data-v-22ed63d3]{height:auto}}.cards .container[data-v-05bad635]:after,.cards .container[data-v-05bad635]:before{display:table;content:""}.cards .container[data-v-05bad635]:after{clear:both}.actor[data-v-05bad635]{min-height:65px}.actor[data-v-05bad635]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-05bad635]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-05bad635]{position:relative}.banner img[data-v-05bad635]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-05bad635]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-05bad635]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-05bad635]{padding-top:110px;padding-left:30px;font-size:42px;position:relative;z-index:10}.banner-desc h2[data-v-05bad635]{font-size:50px;margin:0;color:#fff}.banner-desc p[data-v-05bad635]{font-size:14px;opacity:.8;width:420px;line-height:1.6;padding-left:3px}.cards[data-v-05bad635]{margin:0 auto 110px;width:1140px}.cards .container[data-v-05bad635]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-05bad635]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-05bad635]{width:160px;height:120px}.card[data-v-05bad635]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-05bad635]{margin:66px auto 60px}.card h3[data-v-05bad635]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-05bad635]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.6}.card a[data-v-05bad635]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-05bad635]:hover{color:#fff;background:#20a0ff}.card[data-v-05bad635]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-05bad635],.cards[data-v-05bad635]{width:100%}.banner .container[data-v-05bad635]{width:100%;box-sizing:border-box}.banner img[data-v-05bad635]{right:0}}@media (max-width:1000px){.banner .container img[data-v-05bad635]{display:none}}@media (max-width:768px){.cards li[data-v-05bad635]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-05bad635]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-05bad635],.banner-stars[data-v-05bad635]{display:none}.banner-desc h2[data-v-05bad635]{font-size:32px}.banner-desc p[data-v-05bad635]{width:auto}}.cards .container[data-v-b2da9546]:after,.cards .container[data-v-b2da9546]:before{display:table;content:""}.cards .container[data-v-b2da9546]:after{clear:both}.actor[data-v-b2da9546]{min-height:65px}.actor[data-v-b2da9546]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-b2da9546]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-b2da9546]{position:relative}.banner img[data-v-b2da9546]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-b2da9546]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-b2da9546]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-b2da9546]{padding-top:110px;padding-left:30px;font-size:46px;position:relative;z-index:10}.banner-desc h2[data-v-b2da9546]{font-size:46px;margin:0;color:#fff}.banner-desc p[data-v-b2da9546]{font-size:14px;opacity:.8;width:420px;line-height:1.8;padding-left:3px}.cards[data-v-b2da9546]{margin:0 auto 110px;width:1140px}.cards .container[data-v-b2da9546]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-b2da9546]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-b2da9546]{width:160px;height:120px}.card[data-v-b2da9546]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-b2da9546]{margin:66px auto 60px}.card h3[data-v-b2da9546]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-b2da9546]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.8}.card a[data-v-b2da9546]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-b2da9546]:hover{color:#fff;background:#20a0ff}.card[data-v-b2da9546]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-b2da9546],.cards[data-v-b2da9546]{width:100%}.banner .container[data-v-b2da9546]{width:100%;box-sizing:border-box}.banner img[data-v-b2da9546]{right:0}}@media (max-width:1000px){.banner .container img[data-v-b2da9546]{display:none}}@media (max-width:768px){.cards li[data-v-b2da9546]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-b2da9546]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-b2da9546],.banner-stars[data-v-b2da9546]{display:none}.banner-desc h2[data-v-b2da9546]{font-size:32px}.banner-desc p[data-v-b2da9546]{width:auto}}.el-progress-bar__inner:after,.el-transfer-panel .el-transfer-panel__footer:after,.el-upload-cover:after,.el-upload-list--picture-card .el-upload-list__item-actions:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-slider__button-wrapper:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-slider:after,.el-slider:before{display:table;content:""}.el-slider:after{clear:both}.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-form-item__content:after{clear:both}.el-form-item:after,.el-form-item:before{display:table;content:""}.el-form-item:after{clear:both}.el-breadcrumb:after,.el-breadcrumb:before{display:table;content:""}.el-breadcrumb:after{clear:both}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-autocomplete-suggestion.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-pagination:after,.el-pagination:before{display:table;content:""}.el-pagination:after{clear:both}@font-face{font-family:element-icons;src:url(data:application/font-woff;base64,d09GRgABAAAAAB9EABAAAAAANAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcdCWJ3kdERUYAAAGIAAAAHQAAACAAWAAET1MvMgAAAagAAABNAAAAYFdvXOBjbWFwAAAB+AAAAFAAAAFS5mHtc2N2dCAAAAJIAAAAGAAAACQNZf70ZnBnbQAAAmAAAAT8AAAJljD3npVnYXNwAAAHXAAAAAgAAAAIAAAAEGdseWYAAAdkAAAUPAAAIUw4RPqwaGVhZAAAG6AAAAAvAAAANgxJKwtoaGVhAAAb0AAAAB4AAAAkCQwFDGhtdHgAABvwAAAAVgAAAKyk5AaSbG9jYQAAHEgAAABYAAAAWJwQpAxtYXhwAAAcoAAAACAAAAAgAU4CJG5hbWUAABzAAAABNQAAAit/uX3PcG9zdAAAHfgAAACyAAABsMLAXoJwcmVwAAAerAAAAJUAAACVpbm+ZnicY2BgYGQAgjO2i86D6MufP7fDaABY8wj8AAB4nGNgZGBg4ANiCQYQYGJgBEItIGYB8xgABhgAXQAAAHicY2Bh4WX8wsDKwMA0k+kMAwNDP4RmfM1gzMgJFGVgY2aAAUYBBgQISHNNYTjAUPFMnbnhfwNDDHMDQwNIDUiOWQKsRIGBEQCQ/wz4AAAAeJxjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETEC64pnKM/X//8Eshmdq////75ZikWKG6gIDRjYGOJcRpIeJARUwMtAMMNPOaJIAAAr1C6J4nGNgQANGDEbMEv8fMjf8b4DRAEVmCF94nJ1VaXfTRhSVvGRP2pLEUETbMROnNBqZsAUDLgQpsgvp4kBoJegiJzFd+AN87Gf9mqfQntOP/LTeO14SWnpO2xxL776ZO2/TexNxjKjseSCuUUdKXveksv5UKvGzpK7rXp4o6fWSumynnpIWUStNlczF/SO5RHUuVrJJsEnG616inqs874PSSzKsKEsi2iLayrwsTVNPHD9NtTi9ZJCmgZSMgp1Ko48QqlEvkaoOZUqHXr2eipsFUjYa8aijonoQKu4czzmljTpgpHKVw1yxWW3ke0nW8/qP0kSn2Nt+nGDDY/QjV4FUjMzA9jQeh08k09FeIjORf+y4TpSFUhtcAK9qsMegSvGhuPFBthPI1HjN8XVRqTQyFee6z7LZLB2PlRDlwd/YoZQbur+Ds9OmqFZjcfvAMwY5KZQoekgWgA5Tmaf2CNo8tEBmjfqj4hzwdQgvshBlKs+ULOhQBzJndveTYtrdSddkcaBfBjJvdveS3cfDRa+O9WW7vmAKZzF6khSLixHchzLrp0y71AhHGRdzwMU8XuLWtELIyAKMSiPMUVv4ntmoa5wdY290Ho/VU2TSRfzdTH49OKlY4TjLekfcSJy7x67rwlUgiwinGu8njizqUGWw+vvSkussOGGYZ8VCxZcXvncR+S8xbj+Qd0zhUr5rihLle6YoU54xRYVyGYWlXDHFFOWqKaYpa6aYoTxrilnKc0am/X/p+334Pocz5+Gb0oNvygvwTfkBfFN+CN+UH8E3pYJvyjp8U16Eb0pt4G0pUxGqmLF0+O0lWrWhajkzuMA+D2TNiPZFbwTSMEp11Ukpdb+lVf4k+euix2Prk5K6NWlsiLu6abP4+HTGb25dMuqGnatPjCPloT109dg0oVP7zeHfzl3dKi65q4hqw6g2IpgEgDbotwLxTfNsOxDzll18/EMwAtTPqTVUU3Xt1JUaD/K8q7sYnuTA44hjoI3rrq7ASxNTVkPz4WcpMhX7g7yplWrnsHX5ZFs1hzakwtsi9pVknKbtveRVSZWV96q0Xj6fhiF6ehbXhLZs3cmkEqFRM87x8K4qRdmRlnLUP0Lnl6K+B5xxdkHrwzHuRN1BtTXsdPj5ZiNrCyaGprS9E6BkLF0VY1HlWZxjdA1rHW/cEp6upycW8Sk2mY/CSnV9lI9uI80rdllm0ahKdXSX9lnsqzb9MjtoWB1nP2mqNu7qYVuNKlI9Vb4GtAd2Vt34UA8rPuqgUVU12+jayGM0LmvGfwzIYlz560arJtPv4JZqp81izV1Bc9+YLPdOL2+9yX4r56aRpv9Woy0jl/0cjvltEeDfOSh2U9ZAvTVpiHEB2QsYLtVE5w7N3cYg4jr7H53T/W/NwiA5q22N2Tz14erpKJI7THmcZZtZ1vUozVG0k8Q+RWKrw4nBTY3hWG7KBgbk7j+s38M94K4siw+8bSSAuM/axKie6uDuHlcjNOwruQ8YmWPHuQ2wA+ASxObYtSsdALvSJecOwGfkEDwgh+AhOQS75NwE+Jwcgi/IIfiSHIKvyLkF0COHYI8cgkfkEDwmpw2wTw7BE3IIviaH4BtyWgAJOQQpOQRPySF4ZmRzUuZvqch1oO8sugH0ve0aKFtQfjByZcLOqFh23yKyDywi9dDI1Qn1iIqlDiwi9blFpP5o5NqE+hMVS/3ZIlJ/sYjUF8aXmYGU13oveUcHfwIrvqx+AAEAAf//AA94nKVaC3Bc1Xk+/zn3uXe1e3fva6V9aXe1u5JWXq32aUlIun7IGGTZlsAPGTABHEUOIQkUcAgMESUEKMnQItl0SId2mEwyzWNipqV5kpB0ChNDQzLBtBPaztQJM23iaWdo+gi1rvufu7ItOWCcZnX3nHPP8z/nf33/WRFKsoRAlX6RMCKTPrdACGGUsH2EAtApQinsErAEWwiRJVHAbiwihku1SCZSrEVyWdD/7ZVX6BdX9mbpPI4VycDZf2bfZjFikwoZIbPkIByZOm7s3u9eTYF0hDpIaJ6wEITYQQKKAtfroCoBST0YgaAkSMGDRBO0w2FQiBRUpP0kIItU0ALCXBRCoY4Z0tERCG2OTx13cMapS8yoqIH533LKGE654/KmFOYva05350XTwTzOFwLl0P9vwrm5Obf3mmtGR6tDjnPNwWsOXrd/dHZ0dmpLqzE0Uh1xKk5lJjIUi/RarmGXQCpBNkSTkGnUC416mZbAyoiWaZshmpMKJShmZOxRzJbpGDhZybRr1Wa94EhyiKVgVKo2i2UoForQqI/TUajaSYDOeNc10Xwiyv4QArFi6iHvavoMWOlcKJQOdW/wrhpIZs3Ozm5DORKMRoMd0einFUnUBCqEQ/ktM7vdHsdWRVUUJe9zYrjL+na6j6Yh2Fns2tGnJ4SO7nj0pkfqzshI3lEBFhfBiHeHvjAR6Yrgc1+XbfSE9A4l1tWRixgmHPm5FjOCycLPUIRR9h4QCF0kSdLvFgNAiQMCpS4AoWSBARXoggiCcCN2TJKk4ZiOFC3l7WYLmmWQZBXKIEuW6UClZjs2/zrwL9H+EDwfpYVG1Lvdu9WoG2YUvgf8QwMAn1KkDljSN3RT3TsGCxHQ9Zite7fzZhE4SQSLZxdRZzhdWTed7HSsAJGAgMvbyDTvMoPUw2SfRfUSFDg9KZ+eFNKTyxah0igUC/xbBOnSC8LCpen16SFnF+nZy6aniasWQmAjO0KAx1JtIT3NVpN/W/RtpMe7zacHPuj98So98PhvQQ9+F5Fvn2jzzUE+BZBj1EVeUYHzjdAF3nM936AgySCloNni54Tk1PGccnhG/FukMVzX2+Kvi8Qc9df1Js6vSz9+abp9uhg5yr5OnyQacVyT0wnT/IRmeNtkPYKH0xaeQi6TlRx4KrErAR9ppadXxOl069kExOH9jR07Gv6Za2c/wzrYZhIk0l8EREDVK9RxqG1FTKkIUIhj5+aOHU3vs5CP745fmAc+8i7jm7jhgoTj7RbQt+Jx7ym+GMy/43jcy7E1e7mI0f5eoFl1wJZwL4XWRXuh9+H0n21OTTX9ucbP/rtYZgdIlIw8p+J4cKeO96DljKDHoAt8RuQawaXQ/IXX190495xlWroQLYko14U6rqniwraJvMzRnt6Ed29yeCYBLj2U3D2cWNmX6Isk4CFe9l6ghxLDu5NYh/qMMixwnQqTAhl1N6aAMi7AAlkggigsSCAycQH9GFvw3dg0d2OzBL3YNl3XC3rBjHU6umyUCJpHM0Wr47ReBgZSdpAW6hNIUhr8BCmjH3ztW4/t3v3Yt9qZ7D2mGIr8Q1muyab8R1DFtKoobPF8D5553/Mek2Xlh4rf+AQMKUoVh+H5XaA9TUqk4VZjukIErn94QCKIBOaRYgGl/xD6UkGcJqIozPBdTVrRLrMrKpkllPeqY5th1EdJRprRTmSLnO4iWg9sinaPg16G7hDoNg2c0FKapp04oUEAS5inAxdeG2CffvTR094vMIWvnNC0QJq3pbRA4OWXA2sGrKiPnj7fd90+wqTG91Hrz8QEgfJ9UBBQjedxDwSfQ3ju63THTJgJR8d9COh40LNUU9QMAWvWB6GQDeMmMJHMNO4KE7s6gdvEhDdfxIsRWW7g8S8fxaQhSUePShJ/P7rM32X56Hqe0EnZUmqKsrSkYGbJy0uY1GV5eVnGzFKWuI6f503eza7lDNcYLsEwg9xBneGcQDFWkWIZ7aKKBCOVaIwwQdVUuX6iP6HEu8caNU2w4GEsWeYoFuBhrLIs7x4s+DU/Xy149/i9rd/ojOPJqq0kHIGRPvKkq+mAIutG0WZNTB3XUAPz6O+AyQzkeY7mJCbPKSARIk1jJpFZEYhEtiHQsbFz6kJnbPWb9hJZZjOEsYCMunt5syEg0XrMTE/ejJjdqlPK1MYRLhRylVwFs6xkVaxKDjPTdmqNXLbQVi4bkQltnpx/fHlBWfrxsrKw/Pj8mwfMoPZp2ZA/EwgaB9jy/OGjyuHl5cPK0cPzy+zLtv56IPC6bvuyB6t8SpJRMugOjLYatd5U25cFOcdom2PU5xjzOTa4oSfXZwl6ybiki81fsvU9/C8lv5t/pu/pLtfoXQLRdcXdMNyoDVWKyUSMb77jXTZfHshl/c2/iz+fgAq68/w7NJ739RX2tiKG3tlpUgnAI+/a/B57p8HL2Dkl7z/7EHsY940+jGsnAURVQHjM8QFCGfONPJdeyibrZj3CnQwq43n/vNa/fb1rexcM1OPbVj61LV6DDeteb4nFIFHZurVCvxqLeW8Obd06xGMiUkIcdxLXd0gc7cMzqyrnowW4XgOVKLKq7AuATFBp9hJUkRnUIEICEo8tqti5h3eGhffo65ba3fwKSSXS/rUDGJOnMJPZLB/K1c9JJGKxRDqRTiVj8Vg8Gsk3MhE9aJUQ9ucsrnsIEmqZarMRqSNwaOQAQzf+pT/wPvxkNVEsJFghUSjGa0+u/B19wXsZ4ULojjuKiTP/kygWE0xJFO8482E6tvLXMHbWt0ESWcSzwD/SidHjANlItpLd5Ab3ADdPQIS5sBhiWKAy0DkiBwNUUWVlrkOjqiSp0zxXpRkdJFWazOe6ugjZOb39ys2brhhtNiqDfb25gfxAV7Yrm07iAp1NoxaJlLhRwVhFSkLO5DC9vaN6YRDERr1Z82MTf48Z3C0gsvCxVbbQYO9Spr+fiT3S2fcKHcrF6B/EcqlQ2Lu3J5HM4R4XG1Mri1NwT9jWdTv8dNgOh89n9Pv3x/OFrvsB7P6uQqErlhEF6nbjxz3zwlQDLT5pTMHPtUhE874Y1PUg7H3nMpfpPXiOX8Jz7ECJGnabaNAFxDEMkS+j81wMBAbCHFd6X7y5A6VkEoFwPGYbOg4L1qUweqE1HM4Zpi/ljUiNV+DJWPAN709mR+j4yOzsSKY/6YVSfb9O9uPDFr0nVn49PDs7TH8xPHvmuWR/XwqW+1MA/cl1tkZA5Bl1w7KE9IhkDNtujEO41GJ5KLZkB11eIXvttVCDN089f8/P7ipf/+Bfeq/sgTffeP6eN+4qP3g9158LeCFGekjdHSIgcdyGIsIQ3zDcp0iID3j4PkUyGdGzmUTcMvVYJIZwTV8PGIAHrDxeNXw/E+EvjYsQgvdGur801l9KZqtZfC4CBCdLYyV8vNNOJuN4/xvr7o6twQB+PEIEypAZGLUTKrRJJWwaXSQnkZFJy8rlDdEoRcwUtFFXrh1HpwBJzJbBd4LnoNNjuuPod790550vnX7pTifjwOJjvJo34ptfe+dLd2Mn7uYvnFeaDJIJst2d1CSVoVIxtHdzAUFhvp33C2jpfasxWa1ku6M6JSOtykR1or/YPZgd7HL0dDQdkEmYhoOhEicxCaaNEX1zDO0ju+h9fXv9ovZ6AeZ/Nbhly+CvKpvplqELRfhvzDZXzlW0S3DdlsH/rGzFmqGtNH+hYeUNrOc931pf78vcSdx3iZikQj7qhnosXURbkrMpqgWGGnE0pLYPJrmDC2wigsBtIdMYN7P92Gr6ng+x59zaNrdzTTVjwvRqo8CN6F+VWrFYN/IRMnyvKaE6zlocxkAkJaBmjdMJiISEHMrfILDFFdK3Lzr69AP3D9z/wNOj0X19Zxap3JkoOYxYpaQjSeHaZ+77dF/fIw/fWyyw0khPNFxdvHn3rps/UQsbPSPe2ytvMdWOhkKGIctUD234vf3bJ2+6OZv1MR4MIZGvop9Lu4l1vtyP1hBjiESjGguVjAyGTr6y15u72M2Zcjlz5mlM4dXy5jI+xPdbBAI4338RZD/6roybEpk/3TTPoe14EJUb/MNReZTrFAqxcFE+efMkPvDquizQrl3ztNdc5WGYDJFR0N3gaJVSeah3lYdB5FKVyCIV5YOESiKVDhFJECWMeQQmCuyQbwOUNn8Z46EbaMD5y7lfa4+k87/dUC4aQ5ccykeJMhHn1g50m5c7Bq339OpIBtv4VZ0NZHhjo14u9eQSXZahSiQMIRUZt94p51iZoo6FgSHcLAzSMsUXGkG3luHuCri/8j3X0tjevWP0pzz9FEhxw0yJ4vGAo0UFdgMNJOMJWd7en6ZLqX7vKvc6Fx9W2ju28iN/WGVsr/dJqgQ1UfT+1QgI4m1Mi0ZVdR+8kiqVUt4+SG4Yn9g/Pj6wGmus2p+4j7ZEQsVp1EPGUS6qkCjSGayik0YuZ+S6eVSa8S1fpm2IIxkuNrlMxDfO8DVvKV0qpeG20hUluI0XvSVe/AEmv9HUxrnFs99nz7MRlNskKbo9NsqqgqEl5RdV/EIPyxjd0xsJScSxk2wI4VJPW1RtMQQFjL/Gqe3YURljZR4hU+HYsdeOHYMDU9/42tar6/WlF1+8+n2JK182jGjDfIk3vXZs4Iqe1uTVL/7Ncr1+9fu8//jICaOBarHqC7+M53Et+RC5m9zuqh+69YN1gV87tO+N7VWfgGKHfoJyZV2VO343Ygj81CjsOd+LW6Su1bv2OWzltxTnBlKYROEJ3n3XHbd/+LadO2KOiEa7DBgeF3n8xAMR/w0lhkf//N4Sg1AULcDISpZ4wYdIaYxgsMaxsR+/zvTfEOsjXEr7t2atcZiAcT5Vq8kLrTaiGoK2vKFtYWdYIqJPZDJhUdQ69AGjW5L0YjA4+FBFCxZ1c8BAEewIimI4k5nQIwnUb1SDRCTs+kOCHeEBsz1Eq2zeUtG0Xt0Y4GLboYmCnsm4up4QuB3yhGs/9rE/P3JkD7yoJwVmbNw4EdaLWkenFmZUUjuCAwPBDlWSY0FDEAKFSHhi43CUCUndrNo5SX7HMdqGDZo/RjMFphV0fWLjRuPCGO+tuz5/Fz4oTjXEYX+Lsn4L2exO1IbQ4+/fi6ETjYQpEZnLAQplPhADkcJvAJVbbtq+7YrR3kKiy0E4lufwhPqX6vUWvyzNc37wUJLzDdEqHnut6vPDyfO4kl/O88oqr7JMzsx236KIXUzkgyXJpixyBrWQeey2eJ/j9DXHm30OP7olzQ51hEJ6eti0YzHbHE6Hw1hha3CYB1Axy9o4fqEpyVu8J+Hc50OBWBBHh9J/qvU1J5r+zGlVZPicVHVRoqzTtFsZf3LGJFFXX2OiKIiqiFVWZ6eFk2Y2WmZMkAU98BNRFUQlEBDROgqvqyE0maytz/TsI8IonvEV5BDZ4rqpLgpCfxG9Kp6zWxMpwkoBhAVuPBfQQYnkMMF1fJMqziIXxG2Hbtm9a3Sk2UjGo3jMou1kJbmJwstFuoUSXhhc1RIeufpqgIIvj0PR1wQsO2iReOeqgy++KrVHczVoVtvqkjqnSBK/jmLD4QDTgAp1NZE+HkICmWL8sne7fgM6blnGQOwGfXvvLw0FgbsQejaVUGsCBKmqn8gdyD5wojkcqovR6LOD9vhpp6ze0Hll5w1q2Tk9bg8+G42K9dBw84Q1PKKCwtToqd49XU8FFRYCgdqs0XMyIqPTjJzsaTAbwWcYbfdTXXt6T0VVpoB6xLJqR7r7x045zfBTfZsli2atkyMjJ60staTNfU+Fm86psf7uI0FuLs+dfZHEXOviu2x0MRSl1r92e89DKdLd1rB1ORsLBIOXQd8qRln1NTpJkA1k0t1M0NNSUfJxt8hxt6Tg0UvCgTUAXOb32pOpJJC+Yk8uuSE1EHOiEVUhOujoZEUffa9GCzSaDQFi9Oo4B7DZwpgfIiZRD7mVowRx+Myj3/nRdx6dwUz86TdvvfWbPPF+aiYSvYk/w9RcRPy+0O7A+7En2l0w8Y4mjTeNZNJ4LlFMkvWxjkNypOT28l9GBY4SsBqty9yFa+m2vbcsw/HvRNfdSJNVO9zwI9aIjwEujnB+5Uc27eeiW+iVcnYolxv6p85crhOMzmy2k8fuebR1b5yPK0bJFvIBssO9ioSIqoTUfeEOlLMAlUCR5jhC5PAQTxrjeE2Tp4ksazNEk7XJ+UM3Hbxu7trZXTuuunKTa9SNBv/UdKeE0Sj/4dEnmP9q6LzHu8Fj9hRwmI0xPDo3tM2ixftEzoWyuTbHRgGtJB+S5oyD+4NqCaUsUFKDXwmqA2rQT77iV/hN+1aeCQQordJAwBuBcrcov472aCaobprYsPLDDRObeL8fDwYa8b+PNwKDP1aD8EtvkU8Ji7zpXcqeST+28kg4FgzG6D/slCiVbsEVVx5pzexs0XtxZTX40VguF/tocK0sxEmNuFy2y0kq8zBfAmmByIJ8GIVcgGmqoK8Bhn0PoG7yO38QJoEMVXpyGOxHwx0BBUUoDnGVh3B+XJlsR5uj6DRsHpv5P99CcdwHP1yQuENpthweJqP+luk4TaFeffyJZG/yCS7T7UIyCbec2lKc2Dnxuc9/7v5NmyZ2vfranlPh/pT3hU3Hjz9YLj/op/D2Eh+zlOhLnC+s/OPP9vzk1Z3upk2fwLE4Q++WU+FUP0QwAPnkV48/ODj44PGvXri33IXnYGFMsMvd0d1JBRlcSeUZnsc8IjpRBvEQYjmRymL71oP/AwKZVfhvuNscm5JSf082mbCHnCE9HNQUmVjUCqCuZ87rBwrTuVseQHDUvuyJ+N63sfrTjo3CJYTPDMXz+UaezeTrhbz37YSxG992G4l4Xv+uMWx8V88vFrrAxU5xfu3Fc++FrgL9kjXn3cdvfuCTc1Y+Hou+blmvR2Px/P8BEpxdcHicY2BkYGAA4iUXFTLj+W2+MsizMIDA5c+f2xH0/wZWPeYGIJeDgQkkCgBf1AyCAHicY2BkYGBu+N/AEMOawAAErHoMjAyoQBsAVCkDJAAAeJxjLGNQYgACxlAGBuaXDDosQDYLAyMjEDOA2YwMzEA2NxgD2awJDHYQNWiYkYERiEHsVCDWBuIGIA7FqhYTq0P1GrPYMTCBMUJOFUz7MzAAAGi0Bh0AAAAAACgAKAAoAWQBsAH4AkACjAKyAtIC8gMYA1oDuAQcBIYE1gVaBdgGVAaUBxoHvggOCDQIiAjMCUgJyAnwCioLDAtMC5QMgg00DfIOQg6qDvgPsBA0EKYAAQAAACsAdwAGAAAAAAACACYANABsAAAAigF3AAAAAHicdY9Na8JAEIbfaNQWivTY45BL9bBhE6L4cZX4D3oXSTSQGkjWj0v/QQs99dxjf2ZfN0uhBxNm55mZd2dnADzgCx6un4cBHh134CNw3CW9Ovap+XbcQ+pNHfcx8D6o9Px7Zob21pU7uMOT4y5WeHbsU/PpuId3/DjuY+i9IUMJhQJbVDgAWamKbUX4y7RhagNjfY0drwlihND0C9r/Nm1uysycFlMVMUJaHUxa1btM4lDLQtxjpKmaq1hH1Nya54WVGg0r7QORe3xJM/xzbHCkr7Cn5jqqYIQTNSGHSDBmrNhbMLNU85zYDgpru4x20cV2TyyfeQasBzbK7dlwmKxuCg4ecY2lGJNvjqbaFwcjo5MO58lYVCkzUbVMtKi1xJruIlEi6izBOhCVi2puLvsLTjBRRQAAAHicbc3LNsJxGEbh3/47JHKIQomcwlomfV8Uw5Cb6ApMzLoCF46lPfSu9a49fEpV/vb9VbL8t/vfU6oyp2KFVdZYp8YGdTbZosE2O+yyR5N9DmjR5pAjjunQ5YQep5zR55wLLrnimgE33HJXW3x+zMbDoQ2bdmQf7KMd24l9ss92al/sq32zM/u+bOiHfuiHfuiHfuiHfuiHfuiHfuiHfuiHfuqnfuqnfuqnbk5+APaSXBUAAEu4AMhSWLEBAY5ZuQgACABjILABI0QgsAMjcLAORSAgS7gADlFLsAZTWliwNBuwKFlgZiCKVViwAiVhsAFFYyNisAIjRLMKCQUEK7MKCwUEK7MODwUEK1myBCgJRVJEswoNBgQrsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAAA) format("woff"),url(static/element-icons.b02bdc1.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-arrow-down:before{content:"\E600"}.el-icon-arrow-left:before{content:"\E601"}.el-icon-arrow-right:before{content:"\E602"}.el-icon-arrow-up:before{content:"\E603"}.el-icon-caret-bottom:before{content:"\E604"}.el-icon-caret-left:before{content:"\E605"}.el-icon-caret-right:before{content:"\E606"}.el-icon-caret-top:before{content:"\E607"}.el-icon-check:before{content:"\E608"}.el-icon-circle-check:before{content:"\E609"}.el-icon-circle-close:before{content:"\E60A"}.el-icon-circle-cross:before{content:"\E60B"}.el-icon-close:before{content:"\E60C"}.el-icon-upload:before{content:"\E60D"}.el-icon-d-arrow-left:before{content:"\E60E"}.el-icon-d-arrow-right:before{content:"\E60F"}.el-icon-d-caret:before{content:"\E610"}.el-icon-date:before{content:"\E611"}.el-icon-delete:before{content:"\E612"}.el-icon-document:before{content:"\E613"}.el-icon-edit:before{content:"\E614"}.el-icon-information:before{content:"\E615"}.el-icon-loading:before{content:"\E616"}.el-icon-menu:before{content:"\E617"}.el-icon-message:before{content:"\E618"}.el-icon-minus:before{content:"\E619"}.el-icon-more:before{content:"\E61A"}.el-icon-picture:before{content:"\E61B"}.el-icon-plus:before{content:"\E61C"}.el-icon-search:before{content:"\E61D"}.el-icon-setting:before{content:"\E61E"}.el-icon-share:before{content:"\E61F"}.el-icon-star-off:before{content:"\E620"}.el-icon-star-on:before{content:"\E621"}.el-icon-time:before{content:"\E622"}.el-icon-warning:before{content:"\E623"}.el-icon-delete2:before{content:"\E624"}.el-icon-upload2:before{content:"\E627"}.el-icon-view:before{content:"\E626"}.el-icon-loading{animation:rotating 1s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-pagination{white-space:nowrap;padding:2px 5px;color:#48576a}.el-pagination button,.el-pagination span{display:inline-block;font-size:13px;min-width:28px;height:28px;line-height:28px;vertical-align:top;box-sizing:border-box}.el-pagination .el-select .el-input{width:110px}.el-pagination .el-select .el-input input{padding-right:25px;border-radius:2px;height:28px}.el-pagination button{border:none;padding:0 6px;background:transparent}.el-pagination button:focus{outline:none}.el-pagination button:hover{color:#20a0ff}.el-pagination button.disabled{color:#e4e4e4;background-color:#fff;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:50% no-repeat;background-size:16px;background-color:#fff;border:1px solid #d1dbe5;cursor:pointer;margin:0;color:#97a8be}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px}.el-pagination .btn-prev{border-radius:2px 0 0 2px;border-right:0}.el-pagination .btn-next{border-radius:0 2px 2px 0;border-left:0}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.el-pagination--small .arrow.disabled{visibility:hidden}.el-pagination--small .el-pager li{border-radius:2px}.el-pagination__sizes{margin:0 10px 0 0}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;border-color:#d1dbe5}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#20a0ff}.el-pagination__jump{margin-left:10px}.el-pagination__total{margin:0 10px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{border:1px solid #d1dbe5;border-radius:2px;line-height:18px;padding:4px 2px;width:30px;text-align:center;margin:0 6px;box-sizing:border-box;transition:border .3s}.el-pagination__editor::-webkit-inner-spin-button,.el-pagination__editor::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination__editor:focus{outline:none;border-color:#20a0ff}.el-pager{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0;padding:0}.el-pager,.el-pager li{display:inline-block;vertical-align:top;margin:0}.el-pager li{padding:0 4px;border:1px solid #d1dbe5;border-right:0;background:#fff;font-size:13px;min-width:28px;height:28px;line-height:28px;cursor:pointer;box-sizing:border-box;text-align:center}.el-pager li:last-child{border-right:1px solid #d1dbe5}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#97a8be}.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pager li.active+li{border-left:0;padding-left:5px}.el-pager li:hover{color:#20a0ff}.el-pager li.active{border-color:#20a0ff;background-color:#20a0ff;color:#fff;cursor:default}.el-dialog{position:absolute;left:50%;transform:translateX(-50%);background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;margin-bottom:50px}.el-dialog--tiny{width:30%}.el-dialog--small{width:50%}.el-dialog--large{width:90%}.el-dialog--full{width:100%;top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{top:0;right:0;bottom:0;left:0;position:fixed;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 0}.el-dialog__close{cursor:pointer;color:#bfcbd9}.el-dialog__close:hover{color:#20a0ff}.el-dialog__title{line-height:1;font-size:16px;font-weight:700;color:#1f2d3d}.el-dialog__body{padding:30px 20px;color:#48576a;font-size:14px}.el-dialog__headerbtn{float:right}.el-dialog__footer{padding:10px 20px 15px;text-align:right;box-sizing:border-box}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-autocomplete{position:relative;display:inline-block}.el-autocomplete-suggestion{margin:5px 0;box-shadow:0 0 6px 0 rgba(0,0,0,.04),0 2px 4px 0 rgba(0,0,0,.12)}.el-autocomplete-suggestion li{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer;color:#48576a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li:hover{background-color:#e4e8f1}.el-autocomplete-suggestion li.highlighted{background-color:#20a0ff;color:#fff}.el-autocomplete-suggestion li:active{background-color:#0082e6}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #d1dbe5}.el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.el-autocomplete-suggestion.is-loading li:hover{background-color:#fff}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-autocomplete-suggestion__wrap{max-height:280px;overflow:auto;background-color:#fff;border:1px solid #d1dbe5;padding:6px 0;border-radius:2px;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-dropdown{display:inline-block;position:relative;color:#48576a;font-size:14px}.el-dropdown .el-button-group{display:block}.el-dropdown .el-dropdown__caret-button{padding-right:5px;padding-left:5px}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown-menu{margin:5px 0;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);padding:6px 0;z-index:10;position:absolute;top:0;left:0;min-width:100px}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer}.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#e4e8f1;color:#48576a}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bfcbd9;pointer-events:none}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #d1dbe5}.el-dropdown-menu__item--divided:before{content:"";height:6px;display:block;margin:0 -10px;background-color:#fff}.el-menu-item,.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#48576a;padding:0 20px;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu{border-radius:2px;position:relative;margin:0;padding-left:0;background-color:#eef1f6}.el-menu,.el-menu li{list-style:none}.el-menu--dark{background-color:#324157}.el-menu--dark .el-menu-item,.el-menu--dark .el-submenu__title{color:#bfcbd9}.el-menu--dark .el-menu-item:hover,.el-menu--dark .el-submenu__title:hover{background-color:#48576a}.el-menu--dark .el-submenu .el-menu{background-color:#1f2d3d}.el-menu--dark .el-submenu .el-menu .el-menu-item:hover{background-color:#48576a}.el-menu--horizontal .el-menu-item{float:left;height:60px;line-height:60px;margin:0;cursor:pointer;position:relative;box-sizing:border-box;border-bottom:5px solid transparent}.el-menu--horizontal .el-menu-item a,.el-menu--horizontal .el-menu-item a:hover{color:inherit}.el-menu--horizontal .el-menu-item:hover{background-color:#d1dbe5}.el-menu--horizontal .el-submenu{float:left;position:relative}.el-menu--horizontal .el-submenu>.el-menu{position:absolute;top:65px;left:0;border:1px solid #d1dbe5;padding:5px 0;background-color:#fff;z-index:100;min-width:100%;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-menu--horizontal .el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:5px solid transparent}.el-menu--horizontal .el-submenu .el-menu-item{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px}.el-menu--horizontal .el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:5px;color:#97a8be;margin-top:-3px}.el-menu--horizontal .el-menu-item:hover,.el-menu--horizontal .el-submenu__title:hover{background-color:#eef1f6}.el-menu--horizontal>.el-menu-item:hover,.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{border-bottom:5px solid #20a0ff}.el-menu--horizontal.el-menu--dark .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu__title:hover{background-color:#324157}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title{color:#48576a}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover{background-color:#d1dbe5}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active{color:#20a0ff}.el-menu-item [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-menu-item:first-child{margin-left:0}.el-menu-item:last-child{margin-right:0}.el-menu-item:hover{background-color:#d1dbe5}.el-menu-item.is-active{color:#20a0ff}.el-submenu [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-submenu .el-menu{background-color:#e4e8f1}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px}.el-submenu .el-menu-item:hover{background-color:#d1dbe5}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-active .el-submenu__title{border-bottom-color:#20a0ff}.el-submenu__title{position:relative}.el-submenu__title:hover{background-color:#d1dbe5}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding-top:15px;line-height:normal;font-size:14px;padding-left:20px;color:#97a8be}.el-radio{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio+.el-radio{margin-left:15px}.el-radio__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-radio__input.is-focus .el-radio__inner{border-color:#20a0ff}.el-radio__input.is-checked .el-radio__inner{border-color:#20a0ff;background:#20a0ff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-disabled .el-radio__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#eef1f6}.el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#fff}.el-radio__input.is-disabled+.el-radio__label{color:#bbb;cursor:not-allowed}.el-radio__inner{border:1px solid #bfcbd9;border-radius:100%;width:18px;height:18px;border-radius:50%;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#20a0ff}.el-radio__inner:after{width:6px;height:6px;border-radius:50%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(.71,-.46,.88,.6)}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio__label{font-size:14px;padding-left:5px}.el-radio-group{display:inline-block;font-size:0;line-height:1;vertical-align:middle}.el-radio-group .el-radio{font-size:14px}.el-radio-button{position:relative;display:inline-block}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-radio-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:10px 15px;font-size:14px;border-radius:0}.el-radio-button__inner:hover{color:#20a0ff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1;left:-999px}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-radio-button--large .el-radio-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-radio-button--small .el-radio-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner{padding:4px;font-size:12px;border-radius:0}.el-switch{display:inline-block;position:relative;font-size:14px;line-height:22px;height:22px;vertical-align:middle}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-switch.is-disabled .el-switch__core{border-color:#e4e8f1!important;background:#e4e8f1!important}.el-switch.is-disabled .el-switch__core span{background-color:#fbfdff!important}.el-switch.is-disabled .el-switch__core~.el-switch__label *{color:#fbfdff!important}.el-switch.is-disabled .el-switch__input:checked+.el-switch__core{border-color:#e4e8f1;background-color:#e4e8f1}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;width:46px;height:22px;left:0;top:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-switch__label,.el-switch__label *{position:absolute;display:inline-block;font-size:14px}.el-switch__label *{line-height:1;top:4px;color:#fff}.el-switch__label--left i{left:6px}.el-switch__label--right i{right:6px}.el-switch__input{display:none}.el-switch__input:checked+.el-switch__core{border-color:#20a0ff;background-color:#20a0ff}.el-switch__core{margin:0;display:inline-block;position:relative;width:46px;height:22px;border:1px solid #bfcbd9;outline:none;border-radius:12px;box-sizing:border-box;background:#bfcbd9;cursor:pointer;transition:border-color .3s,background-color .3s}.el-switch__core .el-switch__button{top:0;left:0;position:absolute;border-radius:100%;transition:transform .3s;width:16px;height:16px;background-color:#fff}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-select-dropdown{position:absolute;z-index:1001;border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);box-sizing:border-box;margin:5px 0}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#20a0ff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#e4e8f1}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:10px;font-family:element-icons;content:"\E608";font-size:11px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.el-select-dropdown__wrap{max-height:274px}.el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;box-sizing:border-box}.el-select-dropdown__item{font-size:14px;padding:8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#e4e8f1}.el-select-dropdown__item.selected{color:#fff;background-color:#20a0ff}.el-select-dropdown__item.selected.hover{background-color:#1c8de0}.el-select-dropdown__item span{line-height:1.5!important}.el-select-dropdown__item.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-group{margin:0;padding:0}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select-group__wrap{list-style:none;margin:0;padding:0}.el-select-group__title{padding-left:10px;font-size:12px;color:#999;height:30px;line-height:30px}.el-select{display:inline-block;position:relative}.el-select:hover .el-input__inner{border-color:#8391a5}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#20a0ff}.el-select .el-input .el-input__icon{color:#bfcbd9;font-size:12px;transition:transform .3s;transform:translateY(-50%) rotate(180deg);line-height:16px;top:50%;cursor:pointer}.el-select .el-input .el-input__icon.is-show-close{transition:0s;width:16px;height:16px;font-size:14px;right:8px;text-align:center;transform:translateY(-50%) rotate(180deg);border-radius:100%;color:#bfcbd9}.el-select .el-input .el-input__icon.is-show-close:hover{color:#97a8be}.el-select .el-input .el-input__icon.is-reverse{transform:translateY(-50%)}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#d1dbe5}.el-select>.el-input{display:block}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{height:24px;line-height:24px;box-sizing:border-box;margin:3px 0 3px 6px}.el-select__input{border:none;outline:none;padding:0;margin-left:10px;color:#666;font-size:14px;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background-color:transparent}.el-select__input.is-mini{height:14px}.el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#bfcbd9;line-height:18px;font-size:12px}.el-select__close:hover{color:#97a8be}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%)}.el-select__tag{display:inline-block;height:24px;line-height:24px;font-size:14px;border-radius:4px;color:#fff;background-color:#20a0ff}.el-select__tag .el-icon-close{font-size:12px}.el-table{position:relative;overflow:hidden;box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;border:1px solid #dfe6ec;font-size:14px;color:#1f2d3d}.el-table .el-tooltip.cell{white-space:nowrap}.el-table td,.el-table th{height:40px;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.is-left,.el-table th.is-left{text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #dfe6ec}.el-table td.gutter,.el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.el-table td.is-hidden>*,.el-table th.is-hidden>*{visibility:hidden}.el-table:before{left:0;bottom:0;width:100%;height:1px}.el-table:after,.el-table:before{content:"";position:absolute;background-color:#dfe6ec;z-index:1}.el-table:after{top:0;right:0;width:1px;height:100%}.el-table th{background-color:#eef1f6;text-align:left}.el-table th,.el-table th>div{white-space:nowrap;overflow:hidden}.el-table th>div{display:inline-block;padding-left:18px;padding-right:18px;line-height:40px;text-overflow:ellipsis}.el-table td>div,.el-table th>div{box-sizing:border-box}.el-table th.required>div:before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.el-table th>.cell{position:relative;word-wrap:normal;text-overflow:ellipsis;display:inline-block;line-height:30px;vertical-align:middle;width:100%;box-sizing:border-box}.el-table th>.cell.highlight{color:#20a0ff}.el-table .caret-wrapper{position:relative;cursor:pointer;display:inline-block;vertical-align:middle;margin-left:5px;margin-top:-2px;width:16px;height:30px;overflow:visible;overflow:initial}.el-table .sort-caret{display:inline-block;width:0;height:0;border:0;content:"";position:absolute;left:3px;z-index:2}.el-table .sort-caret.ascending{top:9px;border-top:none;border-bottom:5px solid #97a8be}.el-table .sort-caret.ascending,.el-table .sort-caret.descending{border-right:5px solid transparent;border-left:5px solid transparent}.el-table .sort-caret.descending{bottom:9px;border-top:5px solid #97a8be;border-bottom:none}.el-table .ascending .sort-caret.ascending{border-bottom-color:#48576a}.el-table .descending .sort-caret.descending{border-top-color:#48576a}.el-table td.gutter{width:0}.el-table .cell{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:24px;padding-left:18px;padding-right:18px}.el-table tr input[type=checkbox]{margin:0}.el-table tr{background-color:#fff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-table__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.el-table__expand-column .cell{padding:0;text-align:center}.el-table__expand-icon{position:relative;cursor:pointer;color:#666;font-size:12px;transition:transform .2s ease-in-out;height:40px}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expanded-cell{padding:20px 50px;background-color:#fbfdff;box-shadow:inset 0 2px 0 #f4f4f4}.el-table__expanded-cell:hover{background-color:#fbfdff!important}.el-table--fit{border-right:0;border-bottom:0}.el-table--fit td.gutter,.el-table--fit th.gutter{border-right-width:1px}.el-table--border td,.el-table--border th{border-right:1px solid #dfe6ec}.el-table--border th{border-bottom:1px solid #dfe6ec}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;box-shadow:1px 0 8px #d3d4d6;overflow-x:hidden}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#dfe6ec;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#eef1f6;border-bottom:1px solid #dfe6ec}.el-table__fixed-right{top:0;left:auto;right:0;box-shadow:-1px 0 8px #d3d4d6}.el-table__fixed-right .el-table__fixed-body-wrapper,.el-table__fixed-right .el-table__fixed-footer-wrapper,.el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.el-table__fixed-header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__fixed-footer-wrapper{position:absolute;left:0;bottom:0;z-index:3}.el-table__fixed-footer-wrapper tbody td{border-top:1px solid #dfe6ec;background-color:#fbfdff;color:#1f2d3d}.el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.el-table__body-wrapper,.el-table__footer-wrapper,.el-table__header-wrapper{width:100%}.el-table__footer-wrapper{margin-top:-1px}.el-table__footer-wrapper td{border-top:1px solid #dfe6ec}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper thead div,.el-table__header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#fbfdff;color:#1f2d3d}.el-table__body-wrapper{overflow:auto;position:relative}.el-table--striped .el-table__body tr:nth-child(2n) td{background:#fafafa;background-clip:padding-box}.el-table--striped .el-table__body tr:nth-child(2n).current-row td{background:#edf7ff}.el-table__body tr.hover-row>td{background-color:#eef1f6}.el-table__body tr.current-row>td{background:#edf7ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #dfe6ec;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;margin-left:5px;cursor:pointer}.el-table__column-filter-trigger i{color:#97a8be}.el-table--enable-row-transition .el-table__body td{transition:background-color .25s ease}.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#eef1f6;background-clip:padding-box}.el-table--fluid-height .el-table__fixed,.el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.el-table-column--selection .cell{padding-left:14px;padding-right:14px}.el-table-filter{border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);box-sizing:border-box;margin:2px 0}.el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.el-table-filter__list-item:hover{background-color:#e4e8f1;color:#48576a}.el-table-filter__list-item.is-active{background-color:#20a0ff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #d1dbe5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#8391a5;cursor:pointer;font-size:14px;padding:0 3px}.el-table-filter__bottom button:hover{color:#20a0ff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group .el-checkbox{display:block;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-date-table td{width:32px;height:32px;box-sizing:border-box;text-align:center;cursor:pointer}.el-date-table td.next-month,.el-date-table td.prev-month{color:#ddd}.el-date-table td.today{color:#20a0ff;position:relative}.el-date-table td.today:before{content:" ";position:absolute;top:0;right:0;width:0;height:0;border-top:.5em solid #20a0ff;border-left:.5em solid transparent}.el-date-table td.available:hover{background-color:#e4e8f1}.el-date-table td.in-range{background-color:#d2ecff}.el-date-table td.in-range:hover{background-color:#afddff}.el-date-table td.current:not(.disabled),.el-date-table td.end-date,.el-date-table td.start-date{background-color:#20a0ff!important;color:#fff}.el-date-table td.disabled{background-color:#f4f4f4;opacity:1;cursor:not-allowed;color:#ccc}.el-date-table td.week{font-size:80%;color:#8391a5}.el-date-table th{padding:5px;color:#8391a5;font-weight:400}.el-date-table.is-week-mode .el-date-table__row:hover{background-color:#e4e8f1}.el-date-table.is-week-mode .el-date-table__row.current{background-color:#d2ecff}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-month-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-month-table td .cell:hover{background-color:#e4e8f1}.el-month-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-month-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#97a8be}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-year-table td .cell:hover{background-color:#e4e8f1}.el-year-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-year-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-date-range-picker{min-width:520px}.el-date-range-picker table{table-layout:fixed;width:100%}.el-date-range-picker .el-picker-panel__body{min-width:513px}.el-date-range-picker .el-picker-panel__content{margin:0}.el-date-range-picker.has-sidebar.has-time{min-width:766px}.el-date-range-picker.has-sidebar{min-width:620px}.el-date-range-picker.has-time{min-width:660px}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header button{float:left}.el-date-range-picker__header div{font-size:14px;margin-right:50px}.el-date-range-picker__content{float:left;width:50%;box-sizing:border-box;margin:0;padding:16px}.el-date-range-picker__content.is-right .el-date-range-picker__header button{float:right}.el-date-range-picker__content.is-right .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.el-date-range-picker__editors-wrap{box-sizing:border-box;display:table-cell}.el-date-range-picker__editors-wrap.is-right{text-align:right}.el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#97a8be}.el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.el-time-range-picker{min-width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.el-picker-panel,.el-time-range-picker__body{border-radius:2px;border:1px solid #d1dbe5}.el-picker-panel{color:#48576a;box-shadow:0 2px 6px #ccc;background:#fff;line-height:20px;margin:5px 0}.el-picker-panel__body-wrapper:after,.el-picker-panel__body:after{content:"";display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#48576a;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{background-color:#e4e8f1}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#20a0ff}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{font-size:12px;color:#97a8be;border:0;background:transparent;cursor:pointer;outline:none;margin-top:3px}.el-picker-panel__icon-btn:hover{color:#20a0ff}.el-picker-panel__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;box-sizing:border-box;padding-top:6px;background-color:#fbfdff}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-date-picker{min-width:254px}.el-date-picker .el-picker-panel__content{min-width:224px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker.has-sidebar.has-time{min-width:434px}.el-date-picker.has-sidebar{min-width:370px}.el-date-picker.has-time{min-width:324px}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-picker__header{margin:12px;text-align:center}.el-date-picker__header-label{font-size:14px;padding:0 5px;line-height:22px;text-align:center;cursor:pointer}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#20a0ff}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.time-select{margin:5px 0;min-width:0}.time-select .el-picker-panel__content{max-height:200px;margin:0}.time-select-item{padding:8px 10px;font-size:14px}.time-select-item.selected:not(.disabled){background-color:#20a0ff;color:#fff}.time-select-item.selected:not(.disabled):hover{background-color:#20a0ff}.time-select-item.disabled{color:#d1dbe5;cursor:not-allowed}.time-select-item:hover{background-color:#e4e8f1;cursor:pointer}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.el-date-editor{position:relative;display:inline-block}.el-date-editor .el-picker-panel{position:absolute;min-width:180px;box-sizing:border-box;box-shadow:0 2px 6px #ccc;background:#fff;z-index:10;top:41px}.el-date-editor.el-input{width:193px}.el-date-editor--daterange.el-input{width:220px}.el-date-editor--datetimerange.el-input{width:350px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33%}.el-time-spinner.has-seconds .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){margin-left:1%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__list{padding:0;margin:0;list-style:none;text-align:center}.el-time-spinner__list:after,.el-time-spinner__list:before{content:"";display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#e4e8f1;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#fff}.el-time-spinner__item.disabled{color:#d1dbe5;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #d1dbe5;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:":";top:50%;color:#fff;position:absolute;font-size:14px;margin-top:-15px;line-height:16px;background-color:#20a0ff;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left}.el-time-panel__content:after{left:50%;margin-left:-2px}.el-time-panel__content:before{padding-left:50%;margin-right:-2px}.el-time-panel__content.has-seconds:after{left:66.66667%}.el-time-panel__content.has-seconds:before{padding-left:33.33333%}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:none;font-size:12px;color:#8391a5}.el-time-panel__btn.confirm{font-weight:800;color:#20a0ff}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:2px;border:1px solid #d1dbe5;padding:10px;z-index:2000;font-size:12px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-popover .popper__arrow,.el-popover .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popover .popper__arrow{border-width:6px}.el-popover .popper__arrow:after{content:" ";border-width:6px}.el-popover[x-placement^=top]{margin-bottom:12px}.el-popover[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#d1dbe5;border-bottom-width:0}.el-popover[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popover[x-placement^=bottom]{margin-top:12px}.el-popover[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#d1dbe5}.el-popover[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popover[x-placement^=right]{margin-left:12px}.el-popover[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#d1dbe5;border-left-width:0}.el-popover[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popover[x-placement^=left]{margin-right:12px}.el-popover[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#d1dbe5}.el-popover[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-popover__title{color:#1f2d3d;font-size:13px;line-height:1;margin-bottom:9px}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-message-box{text-align:left;display:inline-block;vertical-align:middle;background-color:#fff;width:420px;border-radius:3px;font-size:16px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:20px 20px 0}.el-message-box__content{padding:30px 20px;color:#48576a;font-size:14px;position:relative}.el-message-box__close{display:inline-block;position:absolute;top:19px;right:20px;color:#999;cursor:pointer;line-height:20px;text-align:center}.el-message-box__close:hover{color:#20a0ff}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#ff4949}.el-message-box__errormsg{color:#ff4949;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:16px;font-weight:700;height:18px;color:#333}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:1.4}.el-message-box__btns{padding:10px 20px 15px;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:36px!important}.el-message-box__status.el-icon-circle-check{color:#13ce66}.el-message-box__status.el-icon-information{color:#50bfff}.el-message-box__status.el-icon-warning{color:#f7ba2a}.el-message-box__status.el-icon-circle-cross{color:#ff4949}.msgbox-fade-enter-active{animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{animation:msgbox-fade-out .3s}@keyframes msgbox-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-breadcrumb{font-size:13px;line-height:1}.el-breadcrumb__separator{margin:0 8px;color:#bfcbd9}.el-breadcrumb__item{float:left}.el-breadcrumb__item:last-child .el-breadcrumb__item__inner,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{color:#97a8be;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-breadcrumb__item__inner,.el-breadcrumb__item__inner a{transition:color .15s linear;color:#48576a}.el-breadcrumb__item__inner:hover,.el-breadcrumb__item__inner a:hover{color:#20a0ff;cursor:pointer}.el-form--label-left .el-form-item__label{text-align:left}.el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}.el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.el-form--inline .el-form-item__label{float:none;display:inline-block}.el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item{margin-bottom:22px}.el-form-item .el-form-item{margin-bottom:0}.el-form-item .el-form-item .el-form-item__content{margin-left:0!important}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner,.el-form-item.is-error .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-textarea__inner{border-color:#ff4949}.el-form-item.is-required .el-form-item__label:before{content:"*";color:#ff4949;margin-right:4px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#48576a;line-height:1;padding:11px 12px 11px 0;box-sizing:border-box}.el-form-item__content{line-height:36px;position:relative;font-size:14px}.el-form-item__error{color:#ff4949;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-tabs__header{border-bottom:1px solid #d1dbe5;padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:3px;background-color:#20a0ff;z-index:1;transition:transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;transition:all .15s}.el-tabs__new-tab .el-icon-plus{transform:scale(.8)}.el-tabs__new-tab:hover{color:#20a0ff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap.is-scrollable{padding:0 15px}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav-next,.el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#8391a5}.el-tabs__nav-next{right:0}.el-tabs__nav-prev{left:0}.el-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left}.el-tabs__item{padding:0 16px;height:42px;box-sizing:border-box;line-height:42px;display:inline-block;list-style:none;font-size:14px;color:#8391a5;position:relative}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.el-tabs__item .el-icon-close:before{transform:scale(.7);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#97a8be;color:#fff}.el-tabs__item:hover{color:#1f2d3d;cursor:pointer}.el-tabs__item.is-disabled{color:#bbb;cursor:default}.el-tabs__item.is-active{color:#20a0ff}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;transform-origin:100% 50%}.el-tabs--card>.el-tabs__header .el-tabs__item{border:1px solid transparent;transition:all .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-right:9px;padding-left:9px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border:1px solid #d1dbe5;border-bottom-color:#fff;border-radius:4px 4px 0 0}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-right:16px;padding-left:16px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{width:14px}.el-tabs--border-card{background:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card>.el-tabs__content{padding:15px}.el-tabs--border-card>.el-tabs__header{background-color:#eef1f6;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;border-top:0;margin-right:-1px;margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{background-color:#fff;border-right-color:#d1dbe5;border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:first-child{border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:last-child{border-right-color:#d1dbe5}.slideInLeft-transition,.slideInRight-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave .3s}.slideInLeft-enter{animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave .3s}@keyframes slideInRight-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(-100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(-100%);opacity:0}}.el-tag{background-color:#8391a5;display:inline-block;padding:0 5px;height:24px;line-height:22px;font-size:12px;color:#fff;border-radius:4px;box-sizing:border-box;border:1px solid transparent;white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;transform:scale(.75);height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-2px}.el-tag .el-icon-close:hover{background-color:#fff;color:#8391a5}.el-tag--gray{background-color:#e4e8f1;border-color:#e4e8f1;color:#48576a}.el-tag--gray .el-tag__close:hover{background-color:#48576a;color:#fff}.el-tag--gray.is-hit{border-color:#48576a}.el-tag--primary{background-color:rgba(32,160,255,.1);border-color:rgba(32,160,255,.2);color:#20a0ff}.el-tag--primary .el-tag__close:hover{background-color:#20a0ff;color:#fff}.el-tag--primary.is-hit{border-color:#20a0ff}.el-tag--success{background-color:rgba(18,206,102,.1);border-color:rgba(18,206,102,.2);color:#13ce66}.el-tag--success .el-tag__close:hover{background-color:#13ce66;color:#fff}.el-tag--success.is-hit{border-color:#13ce66}.el-tag--warning{background-color:rgba(247,186,41,.1);border-color:rgba(247,186,41,.2);color:#f7ba2a}.el-tag--warning .el-tag__close:hover{background-color:#f7ba2a;color:#fff}.el-tag--warning.is-hit{border-color:#f7ba2a}.el-tag--danger{background-color:rgba(255,73,73,.1);border-color:rgba(255,73,73,.2);color:#ff4949}.el-tag--danger .el-tag__close:hover{background-color:#ff4949;color:#fff}.el-tag--danger.is-hit{border-color:#ff4949}.el-tree{cursor:default;background:#fff;border:1px solid #d1dbe5}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.el-tree-node{white-space:nowrap}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree-node__content{line-height:36px;height:36px;cursor:pointer}.el-tree-node__content>.el-checkbox,.el-tree-node__content>.el-tree-node__expand-icon{margin-right:8px}.el-tree-node__content>.el-checkbox{vertical-align:middle}.el-tree-node__content:hover{background:#e4e8f1}.el-tree-node__expand-icon{display:inline-block;cursor:pointer;width:0;height:0;vertical-align:middle;margin-left:10px;border:6px solid transparent;border-right-width:0;border-left-color:#97a8be;border-left-width:7px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon:hover{border-left-color:#999}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{border-color:transparent;cursor:default}.el-tree-node__label,.el-tree-node__loading-icon{font-size:14px;vertical-align:middle;display:inline-block}.el-tree-node__loading-icon{margin-right:4px;color:#97a8be}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#edf7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;color:#fff;opacity:1;display:table;transition:opacity .2s}.el-alert .el-alert__description{color:#fff;font-size:12px;margin:5px 0 0}.el-alert--success{background-color:#13ce66}.el-alert--info{background-color:#50bfff}.el-alert--warning{background-color:#f7ba2a}.el-alert--error{background-color:#ff4949}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px;display:table-cell;color:#fff;vertical-align:middle}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert__closebtn{font-size:12px;color:#fff;opacity:1;top:12px;right:15px;position:absolute;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}.el-notification{width:330px;padding:20px;box-sizing:border-box;border-radius:2px;position:fixed;right:16px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);transition:opacity .3s,transform .3s,right .3s,top .4s;overflow:hidden}.el-notification .el-icon-circle-check{color:#13ce66}.el-notification .el-icon-circle-cross{color:#ff4949}.el-notification .el-icon-information{color:#50bfff}.el-notification .el-icon-warning{color:#f7ba2a}.el-notification__group{margin-left:0}.el-notification__group.is-with-icon{margin-left:55px}.el-notification__title{font-weight:400;font-size:16px;color:#1f2d3d;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:10px 0 0;color:#8391a5;text-align:justify}.el-notification__icon{width:40px;height:40px;font-size:40px;float:left;position:relative;top:3px}.el-notification__closeBtn{top:20px;right:20px;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-notification__closeBtn:hover{color:#97a8be}.el-notification-fade-enter{transform:translateX(100%);right:0}.el-notification-fade-leave-active{opacity:0}.el-input-number{display:inline-block;overflow:hidden;width:180px;position:relative}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:82px}.el-input-number.is-without-controls .el-input__inner{padding-right:10px}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#d1dbe5;color:#d1dbe5}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#d1dbe5;cursor:not-allowed}.el-input-number__decrease,.el-input-number__increase{height:auto;border-left:1px solid #bfcbd9;width:36px;line-height:34px;top:1px;text-align:center;color:#97a8be;cursor:pointer;position:absolute;z-index:1}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#20a0ff}.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#20a0ff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#d1dbe5;cursor:not-allowed}.el-input-number__increase{right:0}.el-input-number__decrease{right:37px}.el-input-number--large{width:200px}.el-input-number--large .el-input-number__decrease,.el-input-number--large .el-input-number__increase{line-height:42px;width:42px;font-size:16px}.el-input-number--large .el-input-number__decrease{right:43px}.el-input-number--large .el-input__inner{padding-right:94px}.el-input-number--small{width:130px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{line-height:30px;width:30px;font-size:13px}.el-input-number--small .el-input-number__decrease{right:31px}.el-input-number--small .el-input__inner{padding-right:70px}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow:after{content:" ";border-width:5px}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper.is-light{background:#fff;border:1px solid #1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow:after{border-top-color:#fff}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow:after{border-bottom-color:#fff}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow:after{border-left-color:#fff}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-tooltip__popper.is-dark{background:#1f2d3d;color:#fff}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:4px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:4px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-16px;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:64px}.el-slider.is-vertical.el-slider--with-input .el-slider__input{overflow:visible;float:none;position:absolute;bottom:22px;width:36px;margin-top:15px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner{text-align:center;padding-left:5px;padding-right:5px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{top:30px;margin-top:-1px;border:1px solid #bfcbd9;line-height:20px;box-sizing:border-box;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease{width:18px;right:18px;border-bottom-left-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{width:19px;border-bottom-right-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner{border-bottom-left-radius:0;border-bottom-right-radius:0}.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase{border-color:#8391a5}.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase{border-color:#20a0ff}.el-slider__runway{width:100%;height:4px;margin:16px 0;background-color:#e4e8f1;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.el-slider__runway.show-input{margin-right:160px;width:auto}.el-slider__runway.disabled{cursor:default}.el-slider__runway.disabled .el-slider__bar,.el-slider__runway.disabled .el-slider__button{background-color:#bfcbd9}.el-slider__runway.disabled .el-slider__button-wrapper.dragging,.el-slider__runway.disabled .el-slider__button-wrapper.hover,.el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{transform:scale(1)}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{cursor:not-allowed}.el-slider__input{float:right;margin-top:3px}.el-slider__bar{height:4px;background-color:#20a0ff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{width:36px;height:36px;position:absolute;z-index:1001;top:-16px;transform:translateX(-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button-wrapper .el-tooltip{vertical-align:middle;display:inline-block}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__button{width:12px;height:12px;background-color:#20a0ff;border-radius:50%;transition:.2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.5);background-color:#1c8de0}.el-slider__button.hover,.el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__stop{position:absolute;width:4px;height:4px;border-radius:100%;background-color:#bfcbd9;transform:translateX(-50%)}.el-loading-mask{position:absolute;z-index:10000;background-color:hsla(0,0%,100%,.9);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{width:50px;height:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#20a0ff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{width:42px;height:42px;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#20a0ff;stroke-linecap:round}.el-loading-fade-enter,.el-loading-fade-leave-active{opacity:0}@keyframes loading-rotate{to{transform:rotate(1turn)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.el-row{position:relative;box-sizing:border-box}.el-row--flex{display:-ms-flexbox;display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-align-bottom{-ms-flex-align:end;align-items:flex-end}.el-row--flex.is-align-middle{-ms-flex-align:center;align-items:center}.el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.el-row--flex.is-justify-space-between{-ms-flex-pack:justify;justify-content:space-between}.el-row--flex.is-justify-end{-ms-flex-pack:end;justify-content:flex-end}.el-row--flex.is-justify-center{-ms-flex-pack:center;justify-content:center}.el-col-1,.el-col-2,.el-col-3,.el-col-4,.el-col-5,.el-col-6,.el-col-7,.el-col-8,.el-col-9,.el-col-10,.el-col-11,.el-col-12,.el-col-13,.el-col-14,.el-col-15,.el-col-16,.el-col-17,.el-col-18,.el-col-19,.el-col-20,.el-col-21,.el-col-22,.el-col-23,.el-col-24{float:left;box-sizing:border-box}.el-col-0{width:0}.el-col-offset-0{margin-left:0}.el-col-pull-0{position:relative;right:0}.el-col-push-0{position:relative;left:0}.el-col-1{width:4.16667%}.el-col-offset-1{margin-left:4.16667%}.el-col-pull-1{position:relative;right:4.16667%}.el-col-push-1{position:relative;left:4.16667%}.el-col-2{width:8.33333%}.el-col-offset-2{margin-left:8.33333%}.el-col-pull-2{position:relative;right:8.33333%}.el-col-push-2{position:relative;left:8.33333%}.el-col-3{width:12.5%}.el-col-offset-3{margin-left:12.5%}.el-col-pull-3{position:relative;right:12.5%}.el-col-push-3{position:relative;left:12.5%}.el-col-4{width:16.66667%}.el-col-offset-4{margin-left:16.66667%}.el-col-pull-4{position:relative;right:16.66667%}.el-col-push-4{position:relative;left:16.66667%}.el-col-5{width:20.83333%}.el-col-offset-5{margin-left:20.83333%}.el-col-pull-5{position:relative;right:20.83333%}.el-col-push-5{position:relative;left:20.83333%}.el-col-6{width:25%}.el-col-offset-6{margin-left:25%}.el-col-pull-6{position:relative;right:25%}.el-col-push-6{position:relative;left:25%}.el-col-7{width:29.16667%}.el-col-offset-7{margin-left:29.16667%}.el-col-pull-7{position:relative;right:29.16667%}.el-col-push-7{position:relative;left:29.16667%}.el-col-8{width:33.33333%}.el-col-offset-8{margin-left:33.33333%}.el-col-pull-8{position:relative;right:33.33333%}.el-col-push-8{position:relative;left:33.33333%}.el-col-9{width:37.5%}.el-col-offset-9{margin-left:37.5%}.el-col-pull-9{position:relative;right:37.5%}.el-col-push-9{position:relative;left:37.5%}.el-col-10{width:41.66667%}.el-col-offset-10{margin-left:41.66667%}.el-col-pull-10{position:relative;right:41.66667%}.el-col-push-10{position:relative;left:41.66667%}.el-col-11{width:45.83333%}.el-col-offset-11{margin-left:45.83333%}.el-col-pull-11{position:relative;right:45.83333%}.el-col-push-11{position:relative;left:45.83333%}.el-col-12{width:50%}.el-col-offset-12{margin-left:50%}.el-col-pull-12{position:relative;right:50%}.el-col-push-12{position:relative;left:50%}.el-col-13{width:54.16667%}.el-col-offset-13{margin-left:54.16667%}.el-col-pull-13{position:relative;right:54.16667%}.el-col-push-13{position:relative;left:54.16667%}.el-col-14{width:58.33333%}.el-col-offset-14{margin-left:58.33333%}.el-col-pull-14{position:relative;right:58.33333%}.el-col-push-14{position:relative;left:58.33333%}.el-col-15{width:62.5%}.el-col-offset-15{margin-left:62.5%}.el-col-pull-15{position:relative;right:62.5%}.el-col-push-15{position:relative;left:62.5%}.el-col-16{width:66.66667%}.el-col-offset-16{margin-left:66.66667%}.el-col-pull-16{position:relative;right:66.66667%}.el-col-push-16{position:relative;left:66.66667%}.el-col-17{width:70.83333%}.el-col-offset-17{margin-left:70.83333%}.el-col-pull-17{position:relative;right:70.83333%}.el-col-push-17{position:relative;left:70.83333%}.el-col-18{width:75%}.el-col-offset-18{margin-left:75%}.el-col-pull-18{position:relative;right:75%}.el-col-push-18{position:relative;left:75%}.el-col-19{width:79.16667%}.el-col-offset-19{margin-left:79.16667%}.el-col-pull-19{position:relative;right:79.16667%}.el-col-push-19{position:relative;left:79.16667%}.el-col-20{width:83.33333%}.el-col-offset-20{margin-left:83.33333%}.el-col-pull-20{position:relative;right:83.33333%}.el-col-push-20{position:relative;left:83.33333%}.el-col-21{width:87.5%}.el-col-offset-21{margin-left:87.5%}.el-col-pull-21{position:relative;right:87.5%}.el-col-push-21{position:relative;left:87.5%}.el-col-22{width:91.66667%}.el-col-offset-22{margin-left:91.66667%}.el-col-pull-22{position:relative;right:91.66667%}.el-col-push-22{position:relative;left:91.66667%}.el-col-23{width:95.83333%}.el-col-offset-23{margin-left:95.83333%}.el-col-pull-23{position:relative;right:95.83333%}.el-col-push-23{position:relative;left:95.83333%}.el-col-24{width:100%}.el-col-offset-24{margin-left:100%}.el-col-pull-24{position:relative;right:100%}.el-col-push-24{position:relative;left:100%}@media (max-width:768px){.el-col-xs-0{width:0}.el-col-xs-offset-0{margin-left:0}.el-col-xs-pull-0{position:relative;right:0}.el-col-xs-push-0{position:relative;left:0}.el-col-xs-1{width:4.16667%}.el-col-xs-offset-1{margin-left:4.16667%}.el-col-xs-pull-1{position:relative;right:4.16667%}.el-col-xs-push-1{position:relative;left:4.16667%}.el-col-xs-2{width:8.33333%}.el-col-xs-offset-2{margin-left:8.33333%}.el-col-xs-pull-2{position:relative;right:8.33333%}.el-col-xs-push-2{position:relative;left:8.33333%}.el-col-xs-3{width:12.5%}.el-col-xs-offset-3{margin-left:12.5%}.el-col-xs-pull-3{position:relative;right:12.5%}.el-col-xs-push-3{position:relative;left:12.5%}.el-col-xs-4{width:16.66667%}.el-col-xs-offset-4{margin-left:16.66667%}.el-col-xs-pull-4{position:relative;right:16.66667%}.el-col-xs-push-4{position:relative;left:16.66667%}.el-col-xs-5{width:20.83333%}.el-col-xs-offset-5{margin-left:20.83333%}.el-col-xs-pull-5{position:relative;right:20.83333%}.el-col-xs-push-5{position:relative;left:20.83333%}.el-col-xs-6{width:25%}.el-col-xs-offset-6{margin-left:25%}.el-col-xs-pull-6{position:relative;right:25%}.el-col-xs-push-6{position:relative;left:25%}.el-col-xs-7{width:29.16667%}.el-col-xs-offset-7{margin-left:29.16667%}.el-col-xs-pull-7{position:relative;right:29.16667%}.el-col-xs-push-7{position:relative;left:29.16667%}.el-col-xs-8{width:33.33333%}.el-col-xs-offset-8{margin-left:33.33333%}.el-col-xs-pull-8{position:relative;right:33.33333%}.el-col-xs-push-8{position:relative;left:33.33333%}.el-col-xs-9{width:37.5%}.el-col-xs-offset-9{margin-left:37.5%}.el-col-xs-pull-9{position:relative;right:37.5%}.el-col-xs-push-9{position:relative;left:37.5%}.el-col-xs-10{width:41.66667%}.el-col-xs-offset-10{margin-left:41.66667%}.el-col-xs-pull-10{position:relative;right:41.66667%}.el-col-xs-push-10{position:relative;left:41.66667%}.el-col-xs-11{width:45.83333%}.el-col-xs-offset-11{margin-left:45.83333%}.el-col-xs-pull-11{position:relative;right:45.83333%}.el-col-xs-push-11{position:relative;left:45.83333%}.el-col-xs-12{width:50%}.el-col-xs-offset-12{margin-left:50%}.el-col-xs-pull-12{position:relative;right:50%}.el-col-xs-push-12{position:relative;left:50%}.el-col-xs-13{width:54.16667%}.el-col-xs-offset-13{margin-left:54.16667%}.el-col-xs-pull-13{position:relative;right:54.16667%}.el-col-xs-push-13{position:relative;left:54.16667%}.el-col-xs-14{width:58.33333%}.el-col-xs-offset-14{margin-left:58.33333%}.el-col-xs-pull-14{position:relative;right:58.33333%}.el-col-xs-push-14{position:relative;left:58.33333%}.el-col-xs-15{width:62.5%}.el-col-xs-offset-15{margin-left:62.5%}.el-col-xs-pull-15{position:relative;right:62.5%}.el-col-xs-push-15{position:relative;left:62.5%}.el-col-xs-16{width:66.66667%}.el-col-xs-offset-16{margin-left:66.66667%}.el-col-xs-pull-16{position:relative;right:66.66667%}.el-col-xs-push-16{position:relative;left:66.66667%}.el-col-xs-17{width:70.83333%}.el-col-xs-offset-17{margin-left:70.83333%}.el-col-xs-pull-17{position:relative;right:70.83333%}.el-col-xs-push-17{position:relative;left:70.83333%}.el-col-xs-18{width:75%}.el-col-xs-offset-18{margin-left:75%}.el-col-xs-pull-18{position:relative;right:75%}.el-col-xs-push-18{position:relative;left:75%}.el-col-xs-19{width:79.16667%}.el-col-xs-offset-19{margin-left:79.16667%}.el-col-xs-pull-19{position:relative;right:79.16667%}.el-col-xs-push-19{position:relative;left:79.16667%}.el-col-xs-20{width:83.33333%}.el-col-xs-offset-20{margin-left:83.33333%}.el-col-xs-pull-20{position:relative;right:83.33333%}.el-col-xs-push-20{position:relative;left:83.33333%}.el-col-xs-21{width:87.5%}.el-col-xs-offset-21{margin-left:87.5%}.el-col-xs-pull-21{position:relative;right:87.5%}.el-col-xs-push-21{position:relative;left:87.5%}.el-col-xs-22{width:91.66667%}.el-col-xs-offset-22{margin-left:91.66667%}.el-col-xs-pull-22{position:relative;right:91.66667%}.el-col-xs-push-22{position:relative;left:91.66667%}.el-col-xs-23{width:95.83333%}.el-col-xs-offset-23{margin-left:95.83333%}.el-col-xs-pull-23{position:relative;right:95.83333%}.el-col-xs-push-23{position:relative;left:95.83333%}.el-col-xs-24{width:100%}.el-col-xs-offset-24{margin-left:100%}.el-col-xs-pull-24{position:relative;right:100%}.el-col-xs-push-24{position:relative;left:100%}}@media (min-width:768px){.el-col-sm-0{width:0}.el-col-sm-offset-0{margin-left:0}.el-col-sm-pull-0{position:relative;right:0}.el-col-sm-push-0{position:relative;left:0}.el-col-sm-1{width:4.16667%}.el-col-sm-offset-1{margin-left:4.16667%}.el-col-sm-pull-1{position:relative;right:4.16667%}.el-col-sm-push-1{position:relative;left:4.16667%}.el-col-sm-2{width:8.33333%}.el-col-sm-offset-2{margin-left:8.33333%}.el-col-sm-pull-2{position:relative;right:8.33333%}.el-col-sm-push-2{position:relative;left:8.33333%}.el-col-sm-3{width:12.5%}.el-col-sm-offset-3{margin-left:12.5%}.el-col-sm-pull-3{position:relative;right:12.5%}.el-col-sm-push-3{position:relative;left:12.5%}.el-col-sm-4{width:16.66667%}.el-col-sm-offset-4{margin-left:16.66667%}.el-col-sm-pull-4{position:relative;right:16.66667%}.el-col-sm-push-4{position:relative;left:16.66667%}.el-col-sm-5{width:20.83333%}.el-col-sm-offset-5{margin-left:20.83333%}.el-col-sm-pull-5{position:relative;right:20.83333%}.el-col-sm-push-5{position:relative;left:20.83333%}.el-col-sm-6{width:25%}.el-col-sm-offset-6{margin-left:25%}.el-col-sm-pull-6{position:relative;right:25%}.el-col-sm-push-6{position:relative;left:25%}.el-col-sm-7{width:29.16667%}.el-col-sm-offset-7{margin-left:29.16667%}.el-col-sm-pull-7{position:relative;right:29.16667%}.el-col-sm-push-7{position:relative;left:29.16667%}.el-col-sm-8{width:33.33333%}.el-col-sm-offset-8{margin-left:33.33333%}.el-col-sm-pull-8{position:relative;right:33.33333%}.el-col-sm-push-8{position:relative;left:33.33333%}.el-col-sm-9{width:37.5%}.el-col-sm-offset-9{margin-left:37.5%}.el-col-sm-pull-9{position:relative;right:37.5%}.el-col-sm-push-9{position:relative;left:37.5%}.el-col-sm-10{width:41.66667%}.el-col-sm-offset-10{margin-left:41.66667%}.el-col-sm-pull-10{position:relative;right:41.66667%}.el-col-sm-push-10{position:relative;left:41.66667%}.el-col-sm-11{width:45.83333%}.el-col-sm-offset-11{margin-left:45.83333%}.el-col-sm-pull-11{position:relative;right:45.83333%}.el-col-sm-push-11{position:relative;left:45.83333%}.el-col-sm-12{width:50%}.el-col-sm-offset-12{margin-left:50%}.el-col-sm-pull-12{position:relative;right:50%}.el-col-sm-push-12{position:relative;left:50%}.el-col-sm-13{width:54.16667%}.el-col-sm-offset-13{margin-left:54.16667%}.el-col-sm-pull-13{position:relative;right:54.16667%}.el-col-sm-push-13{position:relative;left:54.16667%}.el-col-sm-14{width:58.33333%}.el-col-sm-offset-14{margin-left:58.33333%}.el-col-sm-pull-14{position:relative;right:58.33333%}.el-col-sm-push-14{position:relative;left:58.33333%}.el-col-sm-15{width:62.5%}.el-col-sm-offset-15{margin-left:62.5%}.el-col-sm-pull-15{position:relative;right:62.5%}.el-col-sm-push-15{position:relative;left:62.5%}.el-col-sm-16{width:66.66667%}.el-col-sm-offset-16{margin-left:66.66667%}.el-col-sm-pull-16{position:relative;right:66.66667%}.el-col-sm-push-16{position:relative;left:66.66667%}.el-col-sm-17{width:70.83333%}.el-col-sm-offset-17{margin-left:70.83333%}.el-col-sm-pull-17{position:relative;right:70.83333%}.el-col-sm-push-17{position:relative;left:70.83333%}.el-col-sm-18{width:75%}.el-col-sm-offset-18{margin-left:75%}.el-col-sm-pull-18{position:relative;right:75%}.el-col-sm-push-18{position:relative;left:75%}.el-col-sm-19{width:79.16667%}.el-col-sm-offset-19{margin-left:79.16667%}.el-col-sm-pull-19{position:relative;right:79.16667%}.el-col-sm-push-19{position:relative;left:79.16667%}.el-col-sm-20{width:83.33333%}.el-col-sm-offset-20{margin-left:83.33333%}.el-col-sm-pull-20{position:relative;right:83.33333%}.el-col-sm-push-20{position:relative;left:83.33333%}.el-col-sm-21{width:87.5%}.el-col-sm-offset-21{margin-left:87.5%}.el-col-sm-pull-21{position:relative;right:87.5%}.el-col-sm-push-21{position:relative;left:87.5%}.el-col-sm-22{width:91.66667%}.el-col-sm-offset-22{margin-left:91.66667%}.el-col-sm-pull-22{position:relative;right:91.66667%}.el-col-sm-push-22{position:relative;left:91.66667%}.el-col-sm-23{width:95.83333%}.el-col-sm-offset-23{margin-left:95.83333%}.el-col-sm-pull-23{position:relative;right:95.83333%}.el-col-sm-push-23{position:relative;left:95.83333%}.el-col-sm-24{width:100%}.el-col-sm-offset-24{margin-left:100%}.el-col-sm-pull-24{position:relative;right:100%}.el-col-sm-push-24{position:relative;left:100%}}@media (min-width:992px){.el-col-md-0{width:0}.el-col-md-offset-0{margin-left:0}.el-col-md-pull-0{position:relative;right:0}.el-col-md-push-0{position:relative;left:0}.el-col-md-1{width:4.16667%}.el-col-md-offset-1{margin-left:4.16667%}.el-col-md-pull-1{position:relative;right:4.16667%}.el-col-md-push-1{position:relative;left:4.16667%}.el-col-md-2{width:8.33333%}.el-col-md-offset-2{margin-left:8.33333%}.el-col-md-pull-2{position:relative;right:8.33333%}.el-col-md-push-2{position:relative;left:8.33333%}.el-col-md-3{width:12.5%}.el-col-md-offset-3{margin-left:12.5%}.el-col-md-pull-3{position:relative;right:12.5%}.el-col-md-push-3{position:relative;left:12.5%}.el-col-md-4{width:16.66667%}.el-col-md-offset-4{margin-left:16.66667%}.el-col-md-pull-4{position:relative;right:16.66667%}.el-col-md-push-4{position:relative;left:16.66667%}.el-col-md-5{width:20.83333%}.el-col-md-offset-5{margin-left:20.83333%}.el-col-md-pull-5{position:relative;right:20.83333%}.el-col-md-push-5{position:relative;left:20.83333%}.el-col-md-6{width:25%}.el-col-md-offset-6{margin-left:25%}.el-col-md-pull-6{position:relative;right:25%}.el-col-md-push-6{position:relative;left:25%}.el-col-md-7{width:29.16667%}.el-col-md-offset-7{margin-left:29.16667%}.el-col-md-pull-7{position:relative;right:29.16667%}.el-col-md-push-7{position:relative;left:29.16667%}.el-col-md-8{width:33.33333%}.el-col-md-offset-8{margin-left:33.33333%}.el-col-md-pull-8{position:relative;right:33.33333%}.el-col-md-push-8{position:relative;left:33.33333%}.el-col-md-9{width:37.5%}.el-col-md-offset-9{margin-left:37.5%}.el-col-md-pull-9{position:relative;right:37.5%}.el-col-md-push-9{position:relative;left:37.5%}.el-col-md-10{width:41.66667%}.el-col-md-offset-10{margin-left:41.66667%}.el-col-md-pull-10{position:relative;right:41.66667%}.el-col-md-push-10{position:relative;left:41.66667%}.el-col-md-11{width:45.83333%}.el-col-md-offset-11{margin-left:45.83333%}.el-col-md-pull-11{position:relative;right:45.83333%}.el-col-md-push-11{position:relative;left:45.83333%}.el-col-md-12{width:50%}.el-col-md-offset-12{margin-left:50%}.el-col-md-pull-12{position:relative;right:50%}.el-col-md-push-12{position:relative;left:50%}.el-col-md-13{width:54.16667%}.el-col-md-offset-13{margin-left:54.16667%}.el-col-md-pull-13{position:relative;right:54.16667%}.el-col-md-push-13{position:relative;left:54.16667%}.el-col-md-14{width:58.33333%}.el-col-md-offset-14{margin-left:58.33333%}.el-col-md-pull-14{position:relative;right:58.33333%}.el-col-md-push-14{position:relative;left:58.33333%}.el-col-md-15{width:62.5%}.el-col-md-offset-15{margin-left:62.5%}.el-col-md-pull-15{position:relative;right:62.5%}.el-col-md-push-15{position:relative;left:62.5%}.el-col-md-16{width:66.66667%}.el-col-md-offset-16{margin-left:66.66667%}.el-col-md-pull-16{position:relative;right:66.66667%}.el-col-md-push-16{position:relative;left:66.66667%}.el-col-md-17{width:70.83333%}.el-col-md-offset-17{margin-left:70.83333%}.el-col-md-pull-17{position:relative;right:70.83333%}.el-col-md-push-17{position:relative;left:70.83333%}.el-col-md-18{width:75%}.el-col-md-offset-18{margin-left:75%}.el-col-md-pull-18{position:relative;right:75%}.el-col-md-push-18{position:relative;left:75%}.el-col-md-19{width:79.16667%}.el-col-md-offset-19{margin-left:79.16667%}.el-col-md-pull-19{position:relative;right:79.16667%}.el-col-md-push-19{position:relative;left:79.16667%}.el-col-md-20{width:83.33333%}.el-col-md-offset-20{margin-left:83.33333%}.el-col-md-pull-20{position:relative;right:83.33333%}.el-col-md-push-20{position:relative;left:83.33333%}.el-col-md-21{width:87.5%}.el-col-md-offset-21{margin-left:87.5%}.el-col-md-pull-21{position:relative;right:87.5%}.el-col-md-push-21{position:relative;left:87.5%}.el-col-md-22{width:91.66667%}.el-col-md-offset-22{margin-left:91.66667%}.el-col-md-pull-22{position:relative;right:91.66667%}.el-col-md-push-22{position:relative;left:91.66667%}.el-col-md-23{width:95.83333%}.el-col-md-offset-23{margin-left:95.83333%}.el-col-md-pull-23{position:relative;right:95.83333%}.el-col-md-push-23{position:relative;left:95.83333%}.el-col-md-24{width:100%}.el-col-md-offset-24{margin-left:100%}.el-col-md-pull-24{position:relative;right:100%}.el-col-md-push-24{position:relative;left:100%}}@media (min-width:1200px){.el-col-lg-0{width:0}.el-col-lg-offset-0{margin-left:0}.el-col-lg-pull-0{position:relative;right:0}.el-col-lg-push-0{position:relative;left:0}.el-col-lg-1{width:4.16667%}.el-col-lg-offset-1{margin-left:4.16667%}.el-col-lg-pull-1{position:relative;right:4.16667%}.el-col-lg-push-1{position:relative;left:4.16667%}.el-col-lg-2{width:8.33333%}.el-col-lg-offset-2{margin-left:8.33333%}.el-col-lg-pull-2{position:relative;right:8.33333%}.el-col-lg-push-2{position:relative;left:8.33333%}.el-col-lg-3{width:12.5%}.el-col-lg-offset-3{margin-left:12.5%}.el-col-lg-pull-3{position:relative;right:12.5%}.el-col-lg-push-3{position:relative;left:12.5%}.el-col-lg-4{width:16.66667%}.el-col-lg-offset-4{margin-left:16.66667%}.el-col-lg-pull-4{position:relative;right:16.66667%}.el-col-lg-push-4{position:relative;left:16.66667%}.el-col-lg-5{width:20.83333%}.el-col-lg-offset-5{margin-left:20.83333%}.el-col-lg-pull-5{position:relative;right:20.83333%}.el-col-lg-push-5{position:relative;left:20.83333%}.el-col-lg-6{width:25%}.el-col-lg-offset-6{margin-left:25%}.el-col-lg-pull-6{position:relative;right:25%}.el-col-lg-push-6{position:relative;left:25%}.el-col-lg-7{width:29.16667%}.el-col-lg-offset-7{margin-left:29.16667%}.el-col-lg-pull-7{position:relative;right:29.16667%}.el-col-lg-push-7{position:relative;left:29.16667%}.el-col-lg-8{width:33.33333%}.el-col-lg-offset-8{margin-left:33.33333%}.el-col-lg-pull-8{position:relative;right:33.33333%}.el-col-lg-push-8{position:relative;left:33.33333%}.el-col-lg-9{width:37.5%}.el-col-lg-offset-9{margin-left:37.5%}.el-col-lg-pull-9{position:relative;right:37.5%}.el-col-lg-push-9{position:relative;left:37.5%}.el-col-lg-10{width:41.66667%}.el-col-lg-offset-10{margin-left:41.66667%}.el-col-lg-pull-10{position:relative;right:41.66667%}.el-col-lg-push-10{position:relative;left:41.66667%}.el-col-lg-11{width:45.83333%}.el-col-lg-offset-11{margin-left:45.83333%}.el-col-lg-pull-11{position:relative;right:45.83333%}.el-col-lg-push-11{position:relative;left:45.83333%}.el-col-lg-12{width:50%}.el-col-lg-offset-12{margin-left:50%}.el-col-lg-pull-12{position:relative;right:50%}.el-col-lg-push-12{position:relative;left:50%}.el-col-lg-13{width:54.16667%}.el-col-lg-offset-13{margin-left:54.16667%}.el-col-lg-pull-13{position:relative;right:54.16667%}.el-col-lg-push-13{position:relative;left:54.16667%}.el-col-lg-14{width:58.33333%}.el-col-lg-offset-14{margin-left:58.33333%}.el-col-lg-pull-14{position:relative;right:58.33333%}.el-col-lg-push-14{position:relative;left:58.33333%}.el-col-lg-15{width:62.5%}.el-col-lg-offset-15{margin-left:62.5%}.el-col-lg-pull-15{position:relative;right:62.5%}.el-col-lg-push-15{position:relative;left:62.5%}.el-col-lg-16{width:66.66667%}.el-col-lg-offset-16{margin-left:66.66667%}.el-col-lg-pull-16{position:relative;right:66.66667%}.el-col-lg-push-16{position:relative;left:66.66667%}.el-col-lg-17{width:70.83333%}.el-col-lg-offset-17{margin-left:70.83333%}.el-col-lg-pull-17{position:relative;right:70.83333%}.el-col-lg-push-17{position:relative;left:70.83333%}.el-col-lg-18{width:75%}.el-col-lg-offset-18{margin-left:75%}.el-col-lg-pull-18{position:relative;right:75%}.el-col-lg-push-18{position:relative;left:75%}.el-col-lg-19{width:79.16667%}.el-col-lg-offset-19{margin-left:79.16667%}.el-col-lg-pull-19{position:relative;right:79.16667%}.el-col-lg-push-19{position:relative;left:79.16667%}.el-col-lg-20{width:83.33333%}.el-col-lg-offset-20{margin-left:83.33333%}.el-col-lg-pull-20{position:relative;right:83.33333%}.el-col-lg-push-20{position:relative;left:83.33333%}.el-col-lg-21{width:87.5%}.el-col-lg-offset-21{margin-left:87.5%}.el-col-lg-pull-21{position:relative;right:87.5%}.el-col-lg-push-21{position:relative;left:87.5%}.el-col-lg-22{width:91.66667%}.el-col-lg-offset-22{margin-left:91.66667%}.el-col-lg-pull-22{position:relative;right:91.66667%}.el-col-lg-push-22{position:relative;left:91.66667%}.el-col-lg-23{width:95.83333%}.el-col-lg-offset-23{margin-left:95.83333%}.el-col-lg-pull-23{position:relative;right:95.83333%}.el-col-lg-push-23{position:relative;left:95.83333%}.el-col-lg-24{width:100%}.el-col-lg-offset-24{margin-left:100%}.el-col-lg-pull-24{position:relative;right:100%}.el-col-lg-push-24{position:relative;left:100%}}.el-upload{display:inline-block;text-align:center;cursor:pointer}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#8391a5;margin-top:7px}.el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;cursor:pointer;line-height:146px;vertical-align:top}.el-upload--picture-card i{font-size:28px;color:#8c939d}.el-upload--picture-card:hover{border-color:#20a0ff;color:#20a0ff}.el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:360px;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.el-upload-dragger .el-upload__text{color:#97a8be;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#20a0ff;font-style:normal}.el-upload-dragger .el-icon-upload{font-size:67px;color:#97a8be;margin:40px 0 16px;line-height:50px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:1px solid rgba(191,203,217,.2);margin-top:7px;padding-top:5px}.el-upload-dragger:hover{border-color:#20a0ff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #20a0ff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#48576a;line-height:1.8;margin-top:5px;box-sizing:border-box;border-radius:4px;width:100%;position:relative}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item .el-progress{position:absolute;bottom:-3px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;top:-10px;right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-check,.el-upload-list__item .el-icon-circle-check{color:#13ce66}.el-upload-list__item .el-icon-close{display:none;cursor:pointer;opacity:.75;transform:scale(.7);color:#48576a}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item:hover{background-color:#eef1f6}.el-upload-list__item:hover .el-icon-close{display:inline-block}.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#20a0ff;cursor:pointer}.el-upload-list__item.is-success:hover .el-icon-check,.el-upload-list__item.is-success:hover .el-icon-circle-check{display:none}.el-upload-list__item-name{color:#48576a;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;transition:color .3s;white-space:nowrap}.el-upload-list__item-name [class^=el-icon]{color:#97a8be;margin-right:7px;height:100%;line-height:inherit}.el-upload-list__item-status-label{position:absolute;right:10px;top:0;line-height:inherit}.el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#48576a;display:none}.el-upload-list__item-delete:hover{color:#20a0ff}.el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.el-upload-list--picture-card .el-upload-list__item .el-icon-check,.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture-card .el-upload-list__item-name,.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;transform:rotate(-45deg) scale(.8)}.el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);transition:opacity .3s}.el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.el-upload-list--picture-card .el-progress{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.el-upload-list--picture .el-upload-list__item .el-icon-check,.el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:transparent;box-shadow:none;top:-2px;right:-12px}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label .el-icon-close{transform:rotate(45deg) scale(.7)}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;margin-left:-80px}.el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 1px 1px #ccc}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;transform:rotate(-45deg) scale(.8)}.el-upload-list--picture .el-progress{position:static}.el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-upload-cover img{display:block;width:100%;height:100%}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-cover__label i{font-size:12px;margin-top:11px;transform:rotate(-45deg) scale(.8);color:#fff}.el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-upload-cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;margin-top:60px}.el-upload-cover__interact .btn i{margin-top:0}.el-upload-cover__interact .btn span{opacity:0;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#48576a}.el-progress{position:relative;line-height:1}.el-progress.is-exception .el-progress-bar__inner{background-color:#ff4949}.el-progress.is-exception .el-progress__text{color:#ff4949}.el-progress.is-success .el-progress-bar__inner{background-color:#13ce66}.el-progress.is-success .el-progress__text{color:#13ce66}.el-progress__text{font-size:14px;color:#48576a;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;transform:translateY(-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#e4e8f1;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;border-radius:2px 0 0 2px;background-color:#20a0ff;text-align:right;border-radius:100px;line-height:1}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}to{background-position:32px 0}}.el-time-spinner{width:100%;white-space:nowrap}.el-spinner{display:inline-block;vertical-align:middle}.el-spinner-inner{animation:rotate 2s linear infinite;width:50px;height:50px}.el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.el-message{box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);min-width:300px;padding:10px 12px;box-sizing:border-box;border-radius:2px;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#fff;transition:opacity .3s,transform .4s;overflow:hidden}.el-message .el-icon-circle-check{color:#13ce66}.el-message .el-icon-circle-cross{color:#ff4949}.el-message .el-icon-information{color:#50bfff}.el-message .el-icon-warning{color:#f7ba2a}.el-message__group{margin-left:38px;position:relative;height:20px;line-height:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.el-message__group p{font-size:14px;margin:0 34px 0 0;white-space:nowrap;color:#8391a5;text-align:justify}.el-message__group.is-with-icon{margin-left:0}.el-message__img{width:40px;height:40px;position:absolute;left:0;top:0}.el-message__icon{vertical-align:middle;margin-right:8px}.el-message__closeBtn{top:3px;right:0;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-message__closeBtn:hover{color:#97a8be}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;transform:translate(-50%,-100%)}.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#ff4949;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff}.el-badge__content.is-dot{width:8px;height:8px;padding:0;right:0;border-radius:50%}.el-badge__content.is-fixed{top:0;right:10px;position:absolute;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-card{border:1px solid #d1dbe5;border-radius:4px;background-color:#fff;overflow:hidden;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-card__header{padding:18px 20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.el-rate__item{font-size:0;vertical-align:middle}.el-rate__icon,.el-rate__item{display:inline-block;position:relative}.el-rate__icon{font-size:18px;margin-right:6px;color:#bfcbd9;transition:.3s}.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal{position:absolute;top:0;left:0;display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{font-size:0}.el-steps>:last-child .el-step__line{display:none}.el-steps.is-horizontal{white-space:nowrap}.el-steps.is-horizontal.is-center{text-align:center}.el-step{position:relative;vertical-align:top}.el-step:last-child .el-step__main{padding-right:0}.el-step.is-vertical .el-step__head,.el-step.is-vertical .el-step__main{display:inline-block}.el-step.is-vertical .el-step__main{padding-left:10px}.el-step.is-horizontal,.el-step__line{display:inline-block}.el-step__line{position:absolute;border-color:inherit;background-color:#bfcbd9}.el-step__line.is-vertical{width:2px;box-sizing:border-box;top:32px;bottom:0;left:15px}.el-step__line.is-horizontal{top:15px;height:2px;left:32px;right:0}.el-step__line.is-icon.is-horizontal{right:4px}.el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;transition:all .15s;width:0;height:0}.el-step__icon{display:block;line-height:28px}.el-step__icon>*{line-height:inherit;vertical-align:middle}.el-step__head{width:28px;height:28px;border-radius:50%;background-color:transparent;text-align:center;line-height:28px;font-size:28px;vertical-align:top;transition:all .15s}.el-step__head.is-finish{color:#20a0ff;border-color:#20a0ff}.el-step__head.is-error{color:#ff4949;border-color:#ff4949}.el-step__head.is-success{color:#13ce66;border-color:#13ce66}.el-step__head.is-process,.el-step__head.is-wait{color:#bfcbd9;border-color:#bfcbd9}.el-step__head.is-text{font-size:14px;border-width:2px;border-style:solid}.el-step__head.is-text.is-finish{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-step__head.is-text.is-error{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-step__head.is-text.is-success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-step__head.is-text.is-wait{color:#bfcbd9;background-color:#fff;border-color:#bfcbd9}.el-step__head.is-text.is-process{color:#fff;background-color:#bfcbd9;border-color:#bfcbd9}.el-step__main{white-space:normal;padding-right:10px;text-align:left}.el-step__title{font-size:14px;line-height:32px;display:inline-block}.el-step__title.is-finish{font-weight:700;color:#20a0ff}.el-step__title.is-error{font-weight:700;color:#ff4949}.el-step__title.is-success{font-weight:700;color:#13ce66}.el-step__title.is-wait{font-weight:400;color:#97a8be}.el-step__title.is-process{font-weight:700;color:#48576a}.el-step__description{font-size:12px;font-weight:400;line-height:14px}.el-step__description.is-finish{color:#20a0ff}.el-step__description.is-error{color:#ff4949}.el-step__description.is-success{color:#13ce66}.el-step__description.is-wait{color:#bfcbd9}.el-step__description.is-process{color:#8391a5}.el-carousel{overflow-x:hidden;position:relative}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:none;padding:0;margin:0;width:36px;height:36px;cursor:pointer;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#fff;position:absolute;top:50%;z-index:10;transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__indicators{position:absolute;list-style:none;bottom:0;left:50%;transform:translateX(-50%);margin:0;padding:0;z-index:2}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#8391a5;opacity:.24}.el-carousel__indicator{display:inline-block;background-color:transparent;padding:12px 4px;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.3s}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{transform:translateY(-50%) translateX(10px);opacity:0}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active .el-scrollbar__bar,.el-scrollbar:focus .el-scrollbar__bar,.el-scrollbar:hover .el-scrollbar__bar{opacity:1;transition:opacity .34s ease-out}.el-scrollbar__wrap{overflow:scroll}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(151,168,190,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(151,168,190,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;transition:opacity .12s ease-out}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;transition:.4s ease-in-out;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card{width:50%}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;transition:.2s}.el-collapse{border:1px solid #dfe6ec;border-radius:0}.el-collapse-item:last-child{margin-bottom:-1px}.el-collapse-item.is-active>.el-collapse-item__header .el-collapse-item__header__arrow{transform:rotate(90deg)}.el-collapse-item__header{height:43px;line-height:43px;padding-left:15px;background-color:#fff;color:#48576a;cursor:pointer;border-bottom:1px solid #dfe6ec;font-size:13px}.el-collapse-item__header__arrow{margin-right:8px;transition:transform .3s}.el-collapse-item__wrap{will-change:height;background-color:#fbfdff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #dfe6ec}.el-collapse-item__content{padding:10px 15px;font-size:13px;color:#1f2d3d;line-height:1.769230769230769}.el-cascader{display:inline-block;position:relative}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-caret-bottom{transition:transform .3s}.el-cascader .el-icon-caret-bottom.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#bbb}.el-cascader__label{position:absolute;left:0;top:0;height:100%;line-height:34px;padding:0 25px 0 10px;color:#1f2d3d;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:left}.el-cascader__label span{color:#97a8be}.el-cascader--large{font-size:16px}.el-cascader--large .el-cascader__label{line-height:40px}.el-cascader--small{font-size:13px}.el-cascader--small .el-cascader__label{line-height:28px}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #d1dbe5;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #d1dbe5;background-color:#fff;box-sizing:border-box;margin:0;padding:6px 0;min-width:160px}.el-cascader-menu:last-child{border-right:0}.el-cascader-menu__item{font-size:14px;padding:8px 30px 8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-cascader-menu__item:hover{background-color:#e4e8f1}.el-cascader-menu__item.selected{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.selected.hover{background-color:#1c8de0}.el-cascader-menu__item.is-active{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.is-active:hover{background-color:#1c8de0}.el-cascader-menu__item.is-disabled{color:#bfcbd9;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\E606";font-size:12px;transform:scale(.8);color:#bfcbd9;position:absolute;right:10px;margin-top:1px}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-hue-slider__bar{position:relative;background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.el-color-svpanel__black{background:linear-gradient(0deg,#000,transparent)}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper:after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:6px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#1f2d3d}.el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.el-color-dropdown__btn:hover{color:#20a0ff;border-color:#20a0ff}.el-color-dropdown__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:#4db3ff}.el-color-picker{display:inline-block;position:relative;line-height:normal}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:36px;padding:6px;border:1px solid #bfcbd9;border-radius:4px;font-size:0}.el-color-picker__color{position:relative;display:inline-block;box-sizing:border-box;border:1px solid #666;width:22px;height:22px;text-align:center}.el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.el-color-picker__empty{font-size:12px;vertical-align:middle;color:#666;position:absolute;top:4px;left:4px}.el-color-picker__icon{display:inline-block;position:relative;top:-6px;margin-left:8px;width:12px;color:#888;font-size:12px}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12)}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input.is-disabled .el-input__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::placeholder{color:#bfcbd9}.el-input.is-active .el-input__inner{outline:none;border-color:#20a0ff}.el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #bfcbd9;box-sizing:border-box;color:#1f2d3d;display:block;font-size:inherit;height:36px;line-height:1;outline:none;padding:3px 10px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::-webkit-input-placeholder{color:#97a8be}.el-input__inner::-moz-placeholder{color:#97a8be}.el-input__inner:-ms-input-placeholder{color:#97a8be}.el-input__inner::placeholder{color:#97a8be}.el-input__inner:hover{border-color:#8391a5}.el-input__inner:focus{outline:none;border-color:#20a0ff}.el-input__icon{position:absolute;width:35px;height:100%;right:0;top:0;text-align:center;color:#bfcbd9;transition:all .3s}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__icon+.el-input__inner{padding-right:35px}.el-input__icon.is-clickable:hover{cursor:pointer;color:#8391a5}.el-input__icon.is-clickable:hover+.el-input__inner{border-color:#8391a5}.el-input--large{font-size:16px}.el-input--large .el-input__inner{height:42px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:30px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:22px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#fbfdff;color:#97a8be;vertical-align:middle;display:table-cell;position:relative;border:1px solid #bfcbd9;border-radius:4px;padding:0 10px;width:1%;white-space:nowrap}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:block;margin:-10px}.el-input-group__append .el-button,.el-input-group__append .el-select .el-input__inner,.el-input-group__append .el-select:hover .el-input__inner,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select .el-input__inner,.el-input-group__prepend .el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append{border-left:0}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-textarea{display:inline-block;width:100%;vertical-align:bottom}.el-textarea.is-disabled .el-textarea__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#bfcbd9}.el-textarea__inner{display:block;resize:vertical;padding:5px 7px;line-height:1.5;box-sizing:border-box;width:100%;font-size:14px;color:#1f2d3d;background-color:#fff;background-image:none;border:1px solid #bfcbd9;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#97a8be}.el-textarea__inner::-moz-placeholder{color:#97a8be}.el-textarea__inner:-ms-input-placeholder{color:#97a8be}.el-textarea__inner::placeholder{color:#97a8be}.el-textarea__inner:hover{border-color:#8391a5}.el-textarea__inner:focus{outline:none;border-color:#20a0ff}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #bfcbd9;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#20a0ff;border-color:#20a0ff}.el-button:active{color:#1d90e6;border-color:#1d90e6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#d1dbe5;color:#bfcbd9}.el-button.is-active{color:#1d90e6;border-color:#1d90e6}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--primary{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-button--primary:focus,.el-button--primary:hover{background:#4db3ff;border-color:#4db3ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#1d90e6;border-color:#1d90e6;color:#fff}.el-button--primary.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button--primary.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-button--success:focus,.el-button--success:hover{background:#42d885;border-color:#42d885;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#11b95c;border-color:#11b95c;color:#fff}.el-button--success.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#fff;border-color:#13ce66;color:#13ce66}.el-button--success.is-plain:active{background:#fff;border-color:#11b95c;color:#11b95c;outline:none}.el-button--warning{color:#fff;background-color:#f7ba2a;border-color:#f7ba2a}.el-button--warning:focus,.el-button--warning:hover{background:#f9c855;border-color:#f9c855;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#dea726;border-color:#dea726;color:#fff}.el-button--warning.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#fff;border-color:#f7ba2a;color:#f7ba2a}.el-button--warning.is-plain:active{background:#fff;border-color:#dea726;color:#dea726;outline:none}.el-button--danger{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-button--danger:focus,.el-button--danger:hover{background:#ff6d6d;border-color:#ff6d6d;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#e64242;border-color:#e64242;color:#fff}.el-button--danger.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#fff;border-color:#ff4949;color:#ff4949}.el-button--danger.is-plain:active{background:#fff;border-color:#e64242;color:#e64242;outline:none}.el-button--info{color:#fff;background-color:#50bfff;border-color:#50bfff}.el-button--info:focus,.el-button--info:hover{background:#73ccff;border-color:#73ccff;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#48ace6;border-color:#48ace6;color:#fff}.el-button--info.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#fff;border-color:#50bfff;color:#50bfff}.el-button--info.is-plain:active{background:#fff;border-color:#48ace6;color:#48ace6;outline:none}.el-button--large{padding:11px 19px;font-size:16px;border-radius:4px}.el-button--small{padding:7px 9px;font-size:12px;border-radius:4px}.el-button--mini{padding:4px;font-size:12px;border-radius:4px}.el-button--text{border:none;color:#20a0ff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#4db3ff}.el-button--text:active{color:#1d90e6}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group .el-button--primary:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button{float:left;position:relative}.el-button-group .el-button+.el-button{margin-left:0}.el-button-group .el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group .el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group .el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group .el-button:not(:last-child){margin-right:-1px}.el-button-group .el-button.is-active,.el-button-group .el-button:active,.el-button-group .el-button:focus,.el-button-group .el-button:hover{z-index:1}.el-checkbox{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-checkbox+.el-checkbox{margin-left:15px}.el-checkbox__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;border:1px solid #fff;margin-top:-1px;left:3px;right:3px;top:50%}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#20a0ff}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#eef1f6}.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#fff}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{border-color:#fff}.el-checkbox__input.is-disabled+.el-checkbox__label{color:#bbb;cursor:not-allowed}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #bfcbd9;border-radius:4px;box-sizing:border-box;width:18px;height:18px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:hover{border-color:#20a0ff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:2px solid #fff;border-left:0;border-top:0;height:8px;left:5px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:4px;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;visibility:hidden;left:-999px}.el-checkbox__label{font-size:14px;padding-left:5px}.el-checkbox-button{position:relative;display:inline-block;@.is-focus{& .el-checkbox-button__inner{border-color:#20a0ff}}}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:0}.el-checkbox-button__inner:hover{color:#20a0ff}.el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.el-checkbox-button__original{opacity:0;outline:none;position:absolute;margin:0;visibility:hidden;left:-999px}.el-checkbox-button--large .el-checkbox-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner{padding:4px;font-size:12px;border-radius:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 10px}.el-transfer__buttons .el-button{display:block;margin:0 auto;padding:8px 12px}.el-transfer__buttons .el-button:first-child{margin-bottom:6px}.el-transfer__buttons .el-button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #d1dbe5;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);display:inline-block;vertical-align:middle;width:200px;box-sizing:border-box;position:relative}.el-transfer-panel .el-transfer-panel__header{height:36px;line-height:36px;background:#fbfdff;margin:0;padding-left:20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box;color:#1f2d3d}.el-transfer-panel .el-transfer-panel__footer{height:36px;background:#fff;margin:0;padding:0;border-top:1px solid #d1dbe5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#8391a5}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:32px;line-height:32px;padding:6px 20px 0;color:#8391a5}.el-transfer-panel .el-checkbox__label{padding-left:14px}.el-transfer-panel .el-checkbox__inner{width:14px;height:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner:after{height:6px;width:3px;left:4px}.el-transfer-panel__body{padding-bottom:36px;height:246px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;overflow:auto;box-sizing:border-box}.el-transfer-panel__list.is-filterable{height:214px}.el-transfer-panel__item{height:32px;line-height:32px;padding-left:20px;display:block}.el-transfer-panel__item .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box;padding-left:28px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:9px}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:#48576a}.el-transfer-panel__item:hover{background:#e4e8f1}.el-transfer-panel__filter{margin-top:10px;text-align:center;padding:0 10px;width:100%;box-sizing:border-box}.el-transfer-panel__filter .el-input__inner{height:22px;width:100%;display:inline-block;box-sizing:border-box}.el-transfer-panel__filter .el-input__icon{right:10px}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.demo-block{border:1px solid #eaeefb;border-radius:4px;transition:.2s}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#f9fafc;border-top:1px solid #eaeefb;clear:both;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:18px 24px;width:40%;box-sizing:border-box;border-left:1px solid #eaeefb;float:right;font-size:14px;line-height:1.8;color:#5e6d82;word-break:break-word}.demo-block .description p{margin:0 0 12px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;transform:translateY(-2px);display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px}.demo-block .highlight{width:60%;border-right:1px solid #eaeefb}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:36px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;transition:.2s;position:relative}.demo-block .demo-block-control i{font-size:12px;line-height:36px;transition:.3s}.demo-block .demo-block-control i.hovering{transform:translateX(-40px)}.demo-block .demo-block-control span{position:absolute;transform:translateX(-30px);font-size:14px;line-height:36px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#20a0ff;background-color:#f9fafc}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;transform:translateX(10px)}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.footer{height:120px;background-color:#324057;color:#a4aebd;width:100%;z-index:1000;margin-top:-120px}.footer *{word-spacing:0}.footer .container{height:100%;box-sizing:border-box}.footer .footer-main{font-size:0;padding-top:40px;display:inline-block}.footer .footer-main .footer-main-title{line-height:1;font-size:22px;margin:0}.footer .footer-main .footer-main-link{display:inline-block;margin:12px 18px 0 0;line-height:1;font-size:12px;color:#768193}.footer .footer-main .footer-main-link a{color:#768193;text-decoration:none}.footer .footer-social{float:right;line-height:120px}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#8d99ab;background-color:transparent;width:32px;height:32px;font-size:32px;vertical-align:middle}.footer .footer-social .elementdoc:hover{transform:scale(1.2)}.footer .footer-social .doc-icon-weixin{margin-right:36px}.footer .footer-social .doc-icon-weixin:hover{color:#fff}.footer .footer-social .doc-icon-github{margin-right:0}.footer .footer-social .doc-icon-github:hover{color:#fff}.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.footer-popover img{width:100px;height:100px;margin:10px}@media (max-width:768px){.footer .footer-social{display:none}}.header .nav[data-v-7ad4e6e1]:after,.header .nav[data-v-7ad4e6e1]:before{display:table;content:""}.header .nav[data-v-7ad4e6e1]:after{clear:both}.headerWrapper[data-v-7ad4e6e1]{height:80px}.header[data-v-7ad4e6e1]{height:80px;background-color:#20a0ff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-7ad4e6e1]{height:100%;box-sizing:border-box}.header h1[data-v-7ad4e6e1]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-7ad4e6e1]{color:#fff;text-decoration:none;display:block}.header h1 span[data-v-7ad4e6e1]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-7ad4e6e1]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav-logo-small[data-v-7ad4e6e1],.header .nav-logo[data-v-7ad4e6e1]{vertical-align:sub}.header .nav-logo-small[data-v-7ad4e6e1]{display:none}.header .nav-item[data-v-7ad4e6e1]{margin:0;float:left;list-style:none;position:relative;cursor:pointer;margin-left:20px}.header .nav-item a[data-v-7ad4e6e1]{text-decoration:none;color:#fff;display:block;padding:0 20px;opacity:.8}.header .nav-item a.active[data-v-7ad4e6e1],.header .nav-item a[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item a.active[data-v-7ad4e6e1]{font-weight:700}.header .nav-item a.active[data-v-7ad4e6e1]:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:4px;background:#99d2fc}.header .nav-item[data-v-7ad4e6e1]:last-child{cursor:default;margin-left:34px}.header .nav-item:last-child span[data-v-7ad4e6e1]{opacity:.8}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]{cursor:pointer;display:inline-block;height:100%}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item:last-child .nav-lang.active[data-v-7ad4e6e1]{font-weight:700;opacity:1}.header-home[data-v-7ad4e6e1]{position:fixed;top:0;background-color:rgba(32,160,255,0)}@media (max-width:850px){.header .nav-logo[data-v-7ad4e6e1]{display:none}.header .nav-logo-small[data-v-7ad4e6e1]{display:inline-block}.header .nav-item[data-v-7ad4e6e1]{margin-left:6px}.header .nav-item a[data-v-7ad4e6e1]{padding:0 5px}.header .nav-item[data-v-7ad4e6e1]:last-child{margin-left:10px}}@media (max-width:700px){.header .container[data-v-7ad4e6e1]{padding:0 12px}.header .nav-item a[data-v-7ad4e6e1],.header .nav-lang[data-v-7ad4e6e1]{font-size:12px;vertical-align:top}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-dropdown{margin-bottom:6px;width:100%}.side-nav .nav-dropdown span{display:block;width:100%;font-size:16px;color:#5e6d82;line-height:40px;transition:.2s;padding-bottom:6px;border-bottom:1px solid #eaeefb}.side-nav .nav-dropdown span:hover{cursor:pointer}.side-nav .nav-dropdown i{transition:.2s;font-size:12px;color:#d3dce6}.side-nav .nav-dropdown.is-active i,.side-nav .nav-dropdown.is-active span,.side-nav .nav-dropdown:hover i,.side-nav .nav-dropdown:hover span{color:#20a0ff}.side-nav .nav-dropdown.is-active i{transform:rotate(180deg) translateY(2px)}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}.nav-dropdown-list{width:120px;margin-top:-8px}.nav-dropdown-list li{font-size:14px}.footer-nav{padding:24px 0;color:#99a9bf;font-size:14px}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#d9def1;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#20a0ff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px}
\ No newline at end of file
diff --git a/1.3/element-ui.44813ae.js b/1.3/element-ui.44813ae.js
new file mode 100644
index 000000000..92bf1578b
--- /dev/null
+++ b/1.3/element-ui.44813ae.js
@@ -0,0 +1,13 @@
+webpackJsonp([1,2],[function(e,t,i){e.exports=i(598)},,function(e,t){e.exports=Vue},,,,,,,,,,,function(e,t){e.exports=function(e,t,i,n,s){var o,a=e=e||{},r=typeof e.default;"object"!==r&&"function"!==r||(o=e,a=e.default);var l="function"==typeof a?a.options:a;t&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns),n&&(l._scopeId=n);var u;if(s?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},l._ssrRegister=u):i&&(u=i),u){var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,u):[u]}return{esModule:o,exports:a,options:l}}},,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.i18n=t.use=t.t=void 0;var s=i(16),o=n(s),a=i(2),r=n(a),l=i(17),u=n(l),c=i(18),d=n(c),h=(0,d.default)(r.default),f=o.default,p=!1,m=function(){var e=Object.getPrototypeOf(this||r.default).$t;if("function"==typeof e&&r.default.locale)return p||(p=!0,r.default.locale(r.default.config.lang,(0,u.default)(f,r.default.locale(r.default.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},v=t.t=function(e,t){var i=m.apply(this,arguments);if(null!==i&&void 0!==i)return i;for(var n=e.split("."),s=f,o=0,a=n.length;o<a;o++){var r=n[o];if(i=s[r],o===a-1)return h(i,t);if(!i)return"";s=i}return""},g=t.use=function(e){f=e||f},y=t.i18n=function(e){m=e||m};t.default={use:g,t:v,i18n:y}},function(e,t){"use strict";t.__esModule=!0,t.default={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){var n,s;!function(o,a){n=a,s="function"==typeof n?n.call(t,i,t,e):n,!(void 0!==s&&(e.exports=s))}(this,function(){function e(e){var t=e&&"object"==typeof e;return t&&"[object RegExp]"!==Object.prototype.toString.call(e)&&"[object Date]"!==Object.prototype.toString.call(e)}function t(e){return Array.isArray(e)?[]:{}}function i(i,n){var s=n&&n.clone===!0;return s&&e(i)?o(t(i),i,n):i}function n(t,n,s){var a=t.slice();return n.forEach(function(n,r){"undefined"==typeof a[r]?a[r]=i(n,s):e(n)?a[r]=o(t[r],n,s):t.indexOf(n)===-1&&a.push(i(n,s))}),a}function s(t,n,s){var a={};return e(t)&&Object.keys(t).forEach(function(e){a[e]=i(t[e],s)}),Object.keys(n).forEach(function(r){e(n[r])&&t[r]?a[r]=o(t[r],n[r],s):a[r]=i(n[r],s)}),a}function o(e,t,o){var a=Array.isArray(t),r=o||{arrayMerge:n},l=r.arrayMerge||n;return a?Array.isArray(e)?l(e,t,o):i(t,o):s(e,t,o)}return o.all=function(e,t){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,i){return o(e,i,t)})},o})},function(e,t,i){"use strict";t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=function(e){function t(e){for(var t=arguments.length,i=Array(t>1?t-1:0),a=1;a<t;a++)i[a-1]=arguments[a];return 1===i.length&&"object"===n(i[0])&&(i=i[0]),i&&i.hasOwnProperty||(i={}),e.replace(o,function(t,n,o,a){var r=void 0;return"{"===e[a-1]&&"}"===e[a+t.length]?o:(r=(0,s.hasOwn)(i,o)?i[o]:null,null===r||void 0===r?"":r)})}return t};var s=i(19),o=/(%|)\{([0-9a-zA-Z_]+)\}/g},function(e,t){"use strict";function i(e,t){return o.call(e,t)}function n(e,t){for(var i in t)e[i]=t[i];return e}function s(e){for(var t={},i=0;i<e.length;i++)e[i]&&n(t,e[i]);return t}t.__esModule=!0,t.hasOwn=i,t.toObject=s;var o=Object.prototype.hasOwnProperty},,,,,,,,,,,,function(e,t){e.exports=function(e,t,i,n){function s(){function s(){a=Number(new Date),i.apply(l,c)}function r(){o=void 0}var l=this,u=Number(new Date)-a,c=arguments;n&&!o&&s(),o&&clearTimeout(o),void 0===n&&u>e?s():t!==!0&&(o=setTimeout(n?r:s,void 0===n?e-u:e))}var o,a=0;return"boolean"!=typeof t&&(n=i,i=t,t=void 0),s}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!e||!t)return!1;if(t.indexOf(" ")!==-1)throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):(" "+e.className+" ").indexOf(" "+t+" ")>-1}function o(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),o=0,a=n.length;o<a;o++){var r=n[o];r&&(e.classList?e.classList.add(r):s(e,r)||(i+=" "+r))}e.classList||(e.className=i)}}function a(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",o=0,a=i.length;o<a;o++){var r=i[o];r&&(e.classList?e.classList.remove(r):s(e,r)&&(n=n.replace(" "+r+" "," ")))}e.classList||(e.className=m(n))}}function r(e,t,i){if(e&&t)if("object"===("undefined"==typeof t?"undefined":l(t)))for(var n in t)t.hasOwnProperty(n)&&r(e,n,t[n]);else t=v(t),"opacity"===t&&p<9?e.style.filter=isNaN(i)?"":"alpha(opacity="+100*i+")":e.style[t]=i}t.__esModule=!0,t.getStyle=t.once=t.off=t.on=void 0;var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.hasClass=s,t.addClass=o,t.removeClass=a,t.setStyle=r;var u=i(2),c=n(u),d=c.default.prototype.$isServer,h=/([\:\-\_]+(.))/g,f=/^moz([A-Z])/,p=d?0:Number(document.documentMode),m=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},v=function(e){return e.replace(h,function(e,t,i,n){return n?i.toUpperCase():i}).replace(f,"Moz$1")},g=t.on=function(){return!d&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)}}(),y=t.off=function(){return!d&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)}}();t.once=function(e,t,i){var n=function n(){i&&i.apply(this,arguments),y(e,t,n)};g(e,t,n)},t.getStyle=p<9?function(e,t){if(!d){if(!e||!t)return null;t=v(t),"float"===t&&(t="styleFloat");try{switch(t){case"opacity":try{return e.filters.item("alpha").opacity/100}catch(e){return 1}default:return e.style[t]||e.currentStyle?e.currentStyle[t]:null}}catch(i){return e.style[t]}}}:function(e,t){if(!d){if(!e||!t)return null;t=v(t),"float"===t&&(t="cssFloat");try{var i=document.defaultView.getComputedStyle(e,"");return e.style[t]||i?i[t]:null}catch(i){return e.style[t]}}}},,,,,,,function(e,t,i){var n;!function(s){"use strict";function o(e,t){for(var i=[],n=0,s=e.length;n<s;n++)i.push(e[n].substr(0,t));return i}function a(e){return function(t,i,n){var s=n[e].indexOf(i.charAt(0).toUpperCase()+i.substr(1).toLowerCase());~s&&(t.month=s)}}function r(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var l={},u=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,c=/\d\d?/,d=/\d{3}/,h=/\d{4}/,f=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,p=function(){},m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],v=["January","February","March","April","May","June","July","August","September","October","November","December"],g=o(v,3),y=o(m,3);l.i18n={dayNamesShort:y,dayNames:m,monthNamesShort:g,monthNames:v,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][e%10>3?0:(e-e%10!==10)*e%10]}};var b={D:function(e){return e.getDay()},DD:function(e){return r(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return r(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return r(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return r(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return r(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return r(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return r(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return r(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return r(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(t>0?"-":"+")+r(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},_={d:[c,function(e,t){e.day=t}],M:[c,function(e,t){e.month=t-1}],yy:[c,function(e,t){var i=new Date,n=+(""+i.getFullYear()).substr(0,2);e.year=""+(t>68?n-1:n)+t}],h:[c,function(e,t){e.hour=t}],m:[c,function(e,t){e.minute=t}],s:[c,function(e,t){e.second=t}],yyyy:[h,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[d,function(e,t){e.millisecond=t}],D:[c,p],ddd:[f,p],MMM:[f,a("monthNamesShort")],MMMM:[f,a("monthNames")],a:[f,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=+(60*n[1])+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};_.DD=_.D,_.dddd=_.ddd,_.Do=_.dd=_.d,_.mm=_.m,_.hh=_.H=_.HH=_.h,_.MM=_.M,_.ss=_.s,_.A=_.a,l.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},l.format=function(e,t,i){var n=i||l.i18n;if("number"==typeof e&&(e=new Date(e)),"[object Date]"!==Object.prototype.toString.call(e)||isNaN(e.getTime()))throw new Error("Invalid Date in fecha.format");return t=l.masks[t]||t||l.masks.default,t.replace(u,function(t){return t in b?b[t](e,n):t.slice(1,t.length-1)})},l.parse=function(e,t,i){var n=i||l.i18n;if("string"!=typeof t)throw new Error("Invalid format in fecha.parse");if(t=l.masks[t]||t,e.length>1e3)return!1;var s=!0,o={};if(t.replace(u,function(t){if(_[t]){var i=_[t],a=e.search(i[0]);~a?e.replace(i[0],function(t){return i[1](o,t,n),e=e.substr(a+t.length),t}):s=!1}return _[t]?"":t.slice(1,t.length-1)}),!s)return!1;var a=new Date;o.isPm===!0&&null!=o.hour&&12!==+o.hour?o.hour=+o.hour+12:o.isPm===!1&&12===+o.hour&&(o.hour=0);var r;return null!=o.timezoneOffset?(o.minute=+(o.minute||0)-+o.timezoneOffset,r=new Date(Date.UTC(o.year||a.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0))):r=new Date(o.year||a.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0),r},"undefined"!=typeof e&&e.exports?e.exports=l:(n=function(){return l}.call(t,i,t,e),!(void 0!==n&&(e.exports=n)))}(void 0)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(599),o=n(s),a=i(639),r=n(a),l=i(643),u=n(l),c=i(650),d=n(c),h=i(661),f=n(h),p=i(665),m=n(p),v=i(669),g=n(v),y=i(673),b=n(y),_=i(678),C=n(_),x=i(682),w=n(x),M=i(609),k=n(M),S=i(686),D=n(S),I=i(690),N=n(I),T=i(694),E=n(T),$=i(698),O=n($),A=i(702),P=n(A),L=i(706),z=n(L),j=i(710),F=n(j),V=i(714),R=n(V),B=i(604),W=n(B),H=i(638),Y=n(H),U=i(718),q=n(U),G=i(653),Z=n(G),Q=i(657),K=n(Q),J=i(722),X=n(J),ee=i(739),te=n(ee),ie=i(741),ne=n(ie),se=i(768),oe=n(se),ae=i(773),re=n(ae),le=i(778),ue=n(le),ce=i(729),de=n(ce),he=i(783),fe=n(he),pe=i(788),me=n(pe),ve=i(792),ge=n(ve),ye=i(796),be=n(ye),_e=i(800),Ce=n(_e),xe=i(829),we=n(xe),Me=i(837),ke=n(Me),Se=i(626),De=n(Se),Ie=i(841),Ne=n(Ie),Te=i(851),Ee=n(Te),$e=i(855),Oe=n($e),Ae=i(860),Pe=n(Ae),Le=i(867),ze=n(Le),je=i(873),Fe=n(je),Ve=i(877),Re=n(Ve),Be=i(881),We=n(Be),He=i(883),Ye=n(He),Ue=i(888),qe=n(Ue),Ge=i(902),Ze=n(Ge),Qe=i(906),Ke=n(Qe),Je=i(916),Xe=n(Je),et=i(920),tt=n(et),it=i(924),nt=n(it),st=i(928),ot=n(st),at=i(932),rt=n(at),lt=i(936),ut=n(lt),ct=i(630),dt=n(ct),ht=i(940),ft=n(ht),pt=i(944),mt=n(pt),vt=i(948),gt=n(vt),yt=i(952),bt=n(yt),_t=i(959),Ct=n(_t),xt=i(977),wt=n(xt),Mt=i(15),kt=n(Mt),St=i(984),Dt=n(St),It=[o.default,r.default,u.default,d.default,f.default,m.default,g.default,b.default,C.default,w.default,k.default,D.default,N.default,E.default,O.default,P.default,z.default,F.default,R.default,W.default,Y.default,q.default,Z.default,K.default,X.default,te.default,ne.default,oe.default,re.default,ue.default,de.default,me.default,ge.default,be.default,Ce.default,we.default,ke.default,De.default,Ne.default,Ee.default,Pe.default,Fe.default,Re.default,We.default,Ye.default,qe.default,Ze.default,Xe.default,tt.default,nt.default,ot.default,rt.default,ut.default,dt.default,ft.default,mt.default,gt.default,bt.default,Ct.default,wt.default,Dt.default],Nt=function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.installed||(kt.default.use(i.locale),kt.default.i18n(i.i18n),It.map(function(e){t.component(e.name,e)}),t.use(ze.default.directive),t.prototype.$loading=ze.default.service,t.prototype.$msgbox=fe.default,t.prototype.$alert=fe.default.alert,t.prototype.$confirm=fe.default.confirm,t.prototype.$prompt=fe.default.prompt,t.prototype.$notify=Oe.default,t.prototype.$message=Ke.default)};"undefined"!=typeof window&&window.Vue&&Nt(window.Vue),e.exports={version:"1.3.0-beta.1",locale:kt.default.use,i18n:kt.default.i18n,install:Nt,CollapseTransition:Dt.default,Loading:ze.default,Pagination:o.default,Dialog:r.default,Autocomplete:u.default,Dropdown:d.default,DropdownMenu:f.default,DropdownItem:m.default,Menu:g.default,Submenu:b.default,MenuItem:C.default,MenuItemGroup:w.default,Input:k.default,InputNumber:D.default,Radio:N.default,RadioGroup:E.default,RadioButton:O.default,Checkbox:P.default,CheckboxButton:z.default,CheckboxGroup:F.default,Switch:R.default,Select:W.default,Option:Y.default,OptionGroup:q.default,Button:Z.default,ButtonGroup:K.default,Table:X.default,TableColumn:te.default,DatePicker:ne.default,TimeSelect:oe.default,TimePicker:re.default,Popover:ue.default,Tooltip:de.default,MessageBox:fe.default,Breadcrumb:me.default,BreadcrumbItem:ge.default,Form:be.default,FormItem:Ce.default,Tabs:we.default,TabPane:ke.default,Tag:De.default,Tree:Ne.default,Alert:Ee.default,Notification:Oe.default,Slider:Pe.default,Icon:Fe.default,Row:Re.default,Col:We.default,Upload:Ye.default,Progress:qe.default,Spinner:Ze.default,Message:Ke.default,Badge:Xe.default,Card:tt.default,Rate:nt.default,Steps:ot.default,Step:rt.default,Carousel:ut.default,Scrollbar:dt.default,CarouselItem:ft.default,Collapse:mt.default,CollapseItem:gt.default,Cascader:bt.default,ColorPicker:Ct.default,Transfer:wt.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(600),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(601),o=n(s),a=i(604),r=n(a),l=i(638),u=n(l),c=i(608),d=n(c);t.default={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}}},data:function(){return{internalCurrentPage:1,internalPageSize:0}},render:function(e){var t=e("div",{class:"el-pagination"},[]),i=this.layout||"";if(i){var n={prev:e("prev",null,[]),jumper:e("jumper",null,[]),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount},on:{change:this.handleCurrentChange}},[]),next:e("next",null,[]),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}},[]),slot:e("my-slot",null,[]),total:e("total",null,[])},s=i.split(",").map(function(e){return e.trim()}),o=e("div",{class:"el-pagination__rightwrapper"},[]),a=!1;return this.small&&(t.data.class+=" el-pagination--small"),s.forEach(function(e){return"->"===e?void(a=!0):void(a?o.children.push(n[e]):t.children.push(n[e]))}),a&&t.children.push(o),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-prev",{disabled:this.$parent.internalCurrentPage<=1}],on:{click:this.$parent.prev}},[e("i",{class:"el-icon el-icon-arrow-left"},[])])}},Next:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-next",{disabled:this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount}],on:{click:this.$parent.next}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])}},Sizes:{mixins:[d.default],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e){Array.isArray(e)&&(this.$parent.internalPageSize=e.indexOf(this.$parent.pageSize)>-1?this.$parent.pageSize:this.pageSizes[0])}}},render:function(e){var t=this;return e("span",{class:"el-pagination__sizes"},[e("el-select",{attrs:{value:this.$parent.internalPageSize},on:{input:this.handleChange}},[this.pageSizes.map(function(i){return e("el-option",{attrs:{value:i,label:i+" "+t.t("el.pagination.pagesize")}},[])})])])},components:{ElSelect:r.default,ElOption:u.default},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[d.default],data:function(){return{oldValue:null}},methods:{handleFocus:function(e){this.oldValue=e.target.value},handleChange:function(e){var t=e.target;this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(t.value),this.oldValue=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("input",{class:"el-pagination__editor",attrs:{type:"number",min:1,max:this.internalPageCount,value:this.$parent.internalCurrentPage,number:!0},on:{change:this.handleChange,focus:this.handleFocus},style:{width:"30px"}},[]),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[d.default],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:o.default},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)},prev:function(){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e)},next:function(){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e)},getValidCurrentPage:function(e){e=parseInt(e,10);var t="number"==typeof this.internalPageCount,i=void 0;return t?e<1?i=1:e>this.internalPageCount&&(i=this.internalPageCount):(isNaN(e)||e<1)&&(i=1),void 0===i&&isNaN(e)?i=1:0===i&&(i=1),void 0===i?e:i}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.ceil(this.total/this.internalPageSize):"number"==typeof this.pageCount?this.pageCount:null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=e}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=e}},internalCurrentPage:function(e,t){var i=this;e=parseInt(e,10),e=isNaN(e)?t||1:this.getValidCurrentPage(e),void 0!==e?this.$nextTick(function(){i.internalCurrentPage=e,t!==e&&i.$emit("current-change",i.internalCurrentPage)}):this.$emit("current-change",this.internalCurrentPage)},internalPageCount:function(e){var t=this.internalCurrentPage;e>0&&0===t?this.internalCurrentPage=1:t>e&&(this.internalCurrentPage=0===e?1:e)}}}},function(e,t,i){var n=i(13)(i(602),i(603),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElPager",props:{currentPage:Number,pageCount:Number},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage;t.className.indexOf("more")!==-1&&(t.className.indexOf("quickprev")!==-1?i=s-5:t.className.indexOf("quicknext")!==-1&&(i=s+5)),isNaN(i)||(i<1&&(i=1),i>n&&(i=n)),i!==s&&this.$emit("change",i)}}},computed:{pagers:function(){var e=7,t=Number(this.currentPage),i=Number(this.pageCount),n=!1,s=!1;i>e&&(t>e-2&&(n=!0),t<i-2&&(s=!0));var o=[];if(n&&!s)for(var a=i-(e-2),r=a;r<i;r++)o.push(r);else if(!n&&s)for(var l=2;l<e;l++)o.push(l);else if(n&&s)for(var u=Math.floor(e/2)-1,c=t-u;c<=t+u;c++)o.push(c);else for(var d=2;d<i;d++)o.push(d);return this.showPrevMore=n,this.showNextMore=s,o}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-pager",on:{click:e.onPagerClick}},[e.pageCount>0?i("li",{staticClass:"number",class:{active:1===e.currentPage}},[e._v("1")]):e._e(),e.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[e.quickprevIconClass],on:{mouseenter:function(t){e.quickprevIconClass="el-icon-d-arrow-left"},mouseleave:function(t){e.quickprevIconClass="el-icon-more"}}}):e._e(),e._l(e.pagers,function(t){return i("li",{staticClass:"number",class:{active:e.currentPage===t}},[e._v(e._s(t))])}),e.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[e.quicknextIconClass],on:{mouseenter:function(t){e.quicknextIconClass="el-icon-d-arrow-right"},mouseleave:function(t){e.quicknextIconClass="el-icon-more"}}}):e._e(),e.pageCount>1?i("li",{staticClass:"number",class:{active:e.currentPage===e.pageCount}},[e._v(e._s(e.pageCount))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(605),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(606),i(637),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s),a=i(608),r=n(a),l=i(609),u=n(l),c=i(615),d=n(c),h=i(623),f=n(h),p=i(626),m=n(p),v=i(630),g=n(v),y=i(635),b=n(y),_=i(636),C=n(_),x=i(71),w=i(632),M=i(15),k={large:42,small:30,mini:22};t.default={mixins:[o.default,r.default],name:"ElSelect",componentName:"ElSelect",computed:{iconClass:function(){var e=this.clearable&&!this.disabled&&this.inputHovering&&!this.multiple&&void 0!==this.value&&""!==this.value;return e?"circle-close is-show-close":this.remote&&this.filterable?"":"caret-top"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.options.length>0&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var e=this,t=this.options.filter(function(e){return!e.created}).some(function(t){return t.currentLabel===e.query});return this.filterable&&this.allowCreate&&""!==this.query&&!t}},components:{ElInput:u.default,ElSelectMenu:d.default,ElOption:f.default,ElTag:m.default,ElScrollbar:g.default},directives:{Clickoutside:C.default},props:{name:String,value:{required:!0},size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return(0,M.t)("el.select.placeholder")}}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},isSelect:!0,inputLength:20,inputWidth:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,dropdownUl:null,visible:!1,selectedLabel:"",hoverIndex:-1,query:"",bottomOverflow:0,topOverflow:0,optionsAllDisabled:!1,inputHovering:!1,currentPlaceholder:""}},watch:{placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e){this.multiple&&(this.resetInputHeight(),e.length>0||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e)},query:function(e){var t=this;this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable&&(this.inputLength=15*this.$refs.input.value.length+20,this.managePlaceholder(),this.resetInputHeight()),this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e),this.broadcast("ElOption","resetIndex")):"function"==typeof this.filterMethod?(this.filterMethod(e),this.broadcast("ElOptionGroup","queryChange")):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e),this.broadcast("ElOptionGroup","queryChange"))},visible:function(e){var t=this;e?(this.handleIconShow(),this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.selectedLabel,this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.$refs.reference.$el.querySelector("input").blur(),this.handleIconHide(),this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.selectedLabel="",this.inputLength=20,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||(this.getOverflows(),this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdOption?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel)))),this.$emit("visible-change",e)},options:function(e){if(!this.$isServer){this.optionsAllDisabled=e.length===e.filter(function(e){return e.disabled===!0}).length,this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");[].indexOf.call(t,document.activeElement)===-1&&this.setSelected()}}},methods:{handleIconHide:function(){var e=this.$el.querySelector(".el-input__icon");e&&(0,x.removeClass)(e,"is-reverse")},handleIconShow:function(){var e=this.$el.querySelector(".el-input__icon");e&&!(0,x.hasClass)(e,"el-icon-circle-close")&&(0,x.addClass)(e,"is-reverse")},handleMenuEnter:function(){this.dropdownUl||(this.dropdownUl=this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),this.getOverflows()),!this.multiple&&this.dropdownUl&&this.resetMenuScroll()},getOverflows:function(){if(this.dropdownUl&&this.selected&&this.selected.$el){var e=this.selected.$el.getBoundingClientRect(),t=this.$refs.popper.$el.getBoundingClientRect();this.bottomOverflow=e.bottom-t.bottom,this.topOverflow=e.top-t.top}},resetMenuScroll:function(){this.bottomOverflow>0?this.dropdownUl.scrollTop+=this.bottomOverflow:this.topOverflow<0&&(this.dropdownUl.scrollTop+=this.topOverflow)},getOption:function(e){for(var t=void 0,i=this.cachedOptions.length-1;i>=0;i--){var n=this.cachedOptions[i];if(n.value===e){t=n;break}}if(t)return t;var s="string"==typeof e||"number"==typeof e?e:"",o={value:e,currentLabel:s};return this.multiple&&(o.hitState=!1),o},setSelected:function(){var e=this;if(!this.multiple){var t=this.getOption(this.value);return t.created?(this.createdLabel=t.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=t.currentLabel,this.selected=t,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(t){i.push(e.getOption(t))}),this.selected=i,this.$nextTick(function(){e.resetInputHeight()})},handleFocus:function(){this.visible=!0},handleIconClick:function(e){this.iconClass.indexOf("circle-close")>-1?this.deleteSelected(e):this.toggleMenu()},handleMouseDown:function(e){"INPUT"===e.target.tagName&&this.visible&&(this.handleClose(),e.preventDefault())},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return e===!0||e===!1?(t.hitState=e,e):(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){e.target.value.length<=0&&!this.toggleLastOptionHitState()&&this.value.pop()},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var e=this;this.$nextTick(function(){if(e.$refs.reference){var t=e.$refs.reference.$el.childNodes,i=[].filter.call(t,function(e){return"INPUT"===e.tagName})[0];i.style.height=Math.max(e.$refs.tags.clientHeight+6,k[e.size]||36)+"px",e.visible&&e.emptyText!==!1&&e.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var e=this;setTimeout(function(){e.multiple?e.selected.length>0?e.hoverIndex=Math.min.apply(null,e.selected.map(function(t){return e.options.indexOf(t)})):e.hoverIndex=-1:e.hoverIndex=e.options.indexOf(e.selected)},300)},handleOptionSelect:function(e){if(this.multiple){var t=-1;this.value.forEach(function(i,n){i===e.value&&(t=n)}),t>-1?this.value.splice(t,1):(this.multipleLimit<=0||this.value.length<this.multipleLimit)&&this.value.push(e.value),e.created&&(this.query="",this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.visible=!1},toggleMenu:function(){this.filterable&&""===this.query&&this.visible||this.disabled||(this.visible=!this.visible)},navigateOptions:function(e){return this.visible?void(0!==this.options.length&&0!==this.filteredOptionsCount&&(this.optionsAllDisabled=this.options.length===this.options.filter(function(e){return e.disabled===!0}).length,this.optionsAllDisabled||("next"===e&&(this.hoverIndex++,
+this.hoverIndex===this.options.length&&(this.hoverIndex=0),this.resetScrollTop(),this.options[this.hoverIndex].disabled!==!0&&this.options[this.hoverIndex].groupDisabled!==!0&&this.options[this.hoverIndex].visible||this.navigateOptions("next")),"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1),this.resetScrollTop(),this.options[this.hoverIndex].disabled!==!0&&this.options[this.hoverIndex].groupDisabled!==!0&&this.options[this.hoverIndex].visible||this.navigateOptions("prev"))))):void(this.visible=!0)},resetScrollTop:function(){var e=this.options[this.hoverIndex].$el.getBoundingClientRect().bottom-this.$refs.popper.$el.getBoundingClientRect().bottom,t=this.options[this.hoverIndex].$el.getBoundingClientRect().top-this.$refs.popper.$el.getBoundingClientRect().top;e>0&&(this.dropdownUl.scrollTop+=e),t<0&&(this.dropdownUl.scrollTop+=t)},selectOption:function(){this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex])},deleteSelected:function(e){e.stopPropagation(),this.$emit("input",""),this.visible=!1},deleteTag:function(e,t){var i=this.selected.indexOf(t);i>-1&&!this.disabled&&(this.value.splice(i,1),this.$emit("remove-tag",t)),e.stopPropagation()},onInputChange:function(){this.filterable&&(this.query=this.selectedLabel)},onOptionDestroy:function(e){this.optionsCount--,this.filteredOptionsCount--;var t=this.options.indexOf(e);t>-1&&this.options.splice(t,1),this.broadcast("ElOption","resetIndex")},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()}},created:function(){var e=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.setSelected(),this.debouncedOnInputChange=(0,b.default)(this.debounce,function(){e.onInputChange()}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("onOptionDestroy",this.onOptionDestroy),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&this.value.length>0&&(this.currentPlaceholder=""),(0,w.addResizeListener)(this.$el,this.handleResize),this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){e.$refs.reference&&e.$refs.reference.$el&&(e.inputWidth=e.$refs.reference.$el.getBoundingClientRect().width)})},beforeDestroy:function(){this.$el&&this.handleResize&&(0,w.removeResizeListener)(this.$el,this.handleResize)}}},function(e,t){"use strict";function i(e,t,n){this.$children.forEach(function(s){var o=s.$options.componentName;o===e?s.$emit.apply(s,[t].concat(n)):i.apply(s,[e,t].concat([n]))})}t.__esModule=!0,t.default={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)n=n.$parent,n&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,n){i.call(this,e,t,n)}}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(15);t.default={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.t.apply(this,t)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(610),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(611),i(614),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s),a=i(612),r=n(a),l=i(613),u=n(l);t.default={name:"ElInput",componentName:"ElInput",mixins:[o.default],data:function(){return{currentValue:this.value,textareaCalcStyle:{}}},props:{value:[String,Number],placeholder:String,size:String,resize:String,readonly:Boolean,autofocus:Boolean,icon:String,disabled:Boolean,type:{type:String,default:"text"},name:String,autosize:{type:[Boolean,Object],default:!1},rows:{type:Number,default:2},autoComplete:{type:String,default:"off"},form:String,maxlength:Number,minlength:Number,max:{},min:{},step:{},validateEvent:{type:Boolean,default:!0},onIconClick:Function},computed:{validating:function(){return"validating"===this.$parent.validateState},textareaStyle:function(){return(0,u.default)({},this.textareaCalcStyle,{resize:this.resize})}},watch:{value:function(e,t){this.setCurrentValue(e)}},methods:{handleBlur:function(e){this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.currentValue])},inputSelect:function(){this.$refs.input.select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize,t=this.type;if(e&&"textarea"===t){var i=e.minRows,n=e.maxRows;this.textareaCalcStyle=(0,r.default)(this.$refs.textarea,i,n)}}},handleFocus:function(e){this.$emit("focus",e)},handleInput:function(e){var t=e.target.value;this.$emit("input",t),this.setCurrentValue(t),this.$emit("change",t)},handleIconClick:function(e){this.onIconClick&&this.onIconClick(e),this.$emit("click",e)},setCurrentValue:function(e){var t=this;e!==this.currentValue&&(this.$nextTick(function(e){t.resizeTextarea()}),this.currentValue=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e]))}},created:function(){this.$on("inputSelect",this.inputSelect)},mounted:function(){this.resizeTextarea()}}},function(e,t){"use strict";function i(e){var t=window.getComputedStyle(e),i=t.getPropertyValue("box-sizing"),n=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),s=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width")),o=a.map(function(e){return e+":"+t.getPropertyValue(e)}).join(";");return{contextStyle:o,paddingSize:n,borderSize:s,boxSizing:i}}function n(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;s||(s=document.createElement("textarea"),document.body.appendChild(s));var a=i(e),r=a.paddingSize,l=a.borderSize,u=a.boxSizing,c=a.contextStyle;s.setAttribute("style",c+";"+o),s.value=e.value||e.placeholder||"";var d=s.scrollHeight;"border-box"===u?d+=l:"content-box"===u&&(d-=r),s.value="";var h=s.scrollHeight-r;if(null!==t){var f=h*t;"border-box"===u&&(f=f+r+l),d=Math.max(f,d)}if(null!==n){var p=h*n;"border-box"===u&&(p=p+r+l),d=Math.min(p,d)}return{height:d+"px"}}t.__esModule=!0,t.default=n;var s=void 0,o="\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n",a=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"]},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var s in n)if(n.hasOwnProperty(s)){var o=n[s];void 0!==o&&(e[s]=o)}}return e}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{class:["textarea"===e.type?"el-textarea":"el-input",e.size?"el-input--"+e.size:"",{"is-disabled":e.disabled,"el-input-group":e.$slots.prepend||e.$slots.append,"el-input-group--append":e.$slots.append,"el-input-group--prepend":e.$slots.prepend}]},["textarea"!==e.type?[e.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[e._t("prepend")],2):e._e(),e._t("icon",[e.icon?i("i",{staticClass:"el-input__icon",class:["el-icon-"+e.icon,e.onIconClick?"is-clickable":""],on:{click:e.handleIconClick}}):e._e()]),"textarea"!==e.type?i("input",{ref:"input",staticClass:"el-input__inner",attrs:{type:e.type,name:e.name,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,maxlength:e.maxlength,minlength:e.minlength,autocomplete:e.autoComplete,autofocus:e.autofocus,min:e.min,max:e.max,step:e.step,form:e.form},domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur}}):e._e(),e.validating?i("i",{staticClass:"el-input__icon el-icon-loading"}):e._e(),e.$slots.append?i("div",{staticClass:"el-input-group__append"},[e._t("append")],2):e._e()]:i("textarea",{ref:"textarea",staticClass:"el-textarea__inner",style:e.textareaStyle,attrs:{name:e.name,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,rows:e.rows,form:e.form,autofocus:e.autofocus,maxlength:e.maxlength,minlength:e.minlength},domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur}})],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(616),i(622),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s);t.default={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[o.default],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{forceAbsolute:!0,gpuAcceleration:!1}}}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",this.updatePopper),this.$on("destroyPopper",this.destroyPopper)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(618),r=o.default.prototype.$isServer?function(){}:i(621),l=function(e){return e.stopPropagation()};t.default={props:{placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,transition:String,appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){e?this.updatePopper():this.destroyPopper(),this.$emit("input",e)}},methods:{createPopper:function(){var e=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var t=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),t.placement=this.currentPlacement,t.offset=this.offset,this.popperJS=new r(n,i,t),this.popperJS.onCreate(function(t){e.$emit("created",e),e.resetTransformOrigin(),e.$nextTick(e.updatePopper)}),"function"==typeof t.onUpdate&&this.popperJS.onUpdate(t.onUpdate),this.popperJS._popper.style.zIndex=a.PopupManager.nextZIndex(),this.popperElm.addEventListener("click",l))}},updatePopper:function(){this.popperJS?this.popperJS.update():this.createPopper()},doDestroy:function(){!this.showPopper&&this.popperJS&&(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){var e={top:"bottom",bottom:"top",left:"right",right:"left"},t=this.popperJS._popper.getAttribute("x-placement").split("-")[0],i=e[t];this.popperJS._popper.style.transformOrigin=["top","bottom"].indexOf(t)>-1?"center "+i:i+" center"},appendArrow:function(e){var t=void 0;if(!this.appended){this.appended=!0;for(var i in e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",l),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.PopupManager=void 0;var s=i(2),o=n(s),a=i(613),r=n(a),l=i(619),u=n(l),c=i(620),d=n(c),h=1,f=[],p=function(e){if(f.indexOf(e)===-1){var t=function(e){var t=e.__vue__;if(!t){var i=e.previousSibling;i.__vue__&&(t=i.__vue__)}return t};o.default.transition(e,{afterEnter:function(e){var i=t(e);i&&i.doAfterOpen&&i.doAfterOpen()},afterLeave:function(e){var i=t(e);i&&i.doAfterClose&&i.doAfterClose()}})}},m=void 0,v=function e(t){return 3===t.nodeType&&(t=t.nextElementSibling||t.nextSibling,e(t)),t};t.default={props:{value:{type:Boolean,default:!1},transition:{type:String,default:""},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},created:function(){this.transition&&p(this.transition)},beforeMount:function(){this._popupId="popup-"+h++,u.default.register(this._popupId,this)},beforeDestroy:function(){u.default.deregister(this._popupId),u.default.closeModal(this._popupId),this.modal&&null!==this.bodyOverflow&&"hidden"!==this.bodyOverflow&&(document.body.style.overflow=this.bodyOverflow,document.body.style.paddingRight=this.bodyPaddingRight),this.bodyOverflow=null,this.bodyPaddingRight=null},data:function(){return{opened:!1,bodyOverflow:null,bodyPaddingRight:null,rendered:!1}},watch:{value:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,o.default.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0,this.$emit("input",!0));var i=(0,r.default)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);n>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0,this.visible=!0,this.$emit("input",!0);var t=v(this.$el),i=e.modal,n=e.zIndex;if(n&&(u.default.zIndex=n),i&&(this._closing&&(u.default.closeModal(this._popupId),this._closing=!1),u.default.openModal(this._popupId,u.default.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.bodyOverflow||(this.bodyPaddingRight=document.body.style.paddingRight,this.bodyOverflow=document.body.style.overflow),m=(0,d.default)();var s=document.documentElement.clientHeight<document.body.scrollHeight;m>0&&s&&(document.body.style.paddingRight=m+"px"),document.body.style.overflow="hidden"}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=u.default.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.transition||this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);t>0?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){var e=this;this.visible=!1,this.$emit("input",!1),this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose()},doAfterClose:function(){u.default.closeModal(this._popupId),this._closing=!1}}},t.PopupManager=u.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(71),r=!1,l=function(){if(!o.default.prototype.$isServer){var e=c.modalDom;return e?r=!0:(r=!1,e=document.createElement("div"),c.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){c.doOnModalClick&&c.doOnModalClick()})),e}},u={},c={zIndex:2e3,modalFade:!0,getInstance:function(e){return u[e]},register:function(e,t){e&&t&&(u[e]=t)},deregister:function(e){e&&(u[e]=null,delete u[e])},nextZIndex:function(){return c.zIndex++},modalStack:[],doOnModalClick:function(){var e=c.modalStack[c.modalStack.length-1];if(e){var t=c.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,s){if(!o.default.prototype.$isServer&&e&&void 0!==t){this.modalFade=s;for(var u=this.modalStack,c=0,d=u.length;c<d;c++){var h=u[c];if(h.id===e)return}var f=l();if((0,a.addClass)(f,"v-modal"),this.modalFade&&!r&&(0,a.addClass)(f,"v-modal-enter"),n){var p=n.trim().split(/\s+/);p.forEach(function(e){return(0,a.addClass)(f,e)})}setTimeout(function(){(0,a.removeClass)(f,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(f):document.body.appendChild(f),t&&(f.style.zIndex=t),f.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=l();if(t.length>0){var n=t[t.length-1];if(n.id===e){if(n.modalClass){var s=n.modalClass.trim().split(/\s+/);s.forEach(function(e){return(0,a.removeClass)(i,e)})}t.pop(),t.length>0&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var o=t.length-1;o>=0;o--)if(t[o].id===e){t.splice(o,1);break}}0===t.length&&(this.modalFade&&(0,a.addClass)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",c.modalDom=void 0),(0,a.removeClass)(i,"v-modal-leave")},200))}};!o.default.prototype.$isServer&&window.addEventListener("keydown",function(e){if(27===e.keyCode&&c.modalStack.length>0){var t=c.modalStack[c.modalStack.length-1];if(!t)return;var i=c.getInstance(t.id);i.closeOnPressEscape&&i.close()}}),t.default=c},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){if(o.default.prototype.$isServer)return 0;if(void 0!==a)return a;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),t-n};var s=i(2),o=n(s),a=void 0},function(e,t,i){var n,s;"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(o,a){n=a,s="function"==typeof n?n.call(t,i,t,e):n,!(void 0!==s&&(e.exports=s))}(void 0,function(){"use strict";function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n="undefined"==typeof t||null===t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return n||s?this._popper=this.parse(s?t:{}):this._popper=t.jquery?t[0]:t,this._options=Object.assign({},v,i),this._options.modifiers=this._options.modifiers.map(function(e){if(this._options.modifiersIgnored.indexOf(e)===-1)return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),u(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function t(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden";var n=(e.offsetWidth,m.getComputedStyle(e)),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),o=parseFloat(n.marginLeft)+parseFloat(n.marginRight),a={width:e.offsetWidth+o,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,a}function i(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function n(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function o(e,t){var i=m.getComputedStyle(e,null);return i[t]}function a(e){var t=e.offsetParent;return t!==m.document.body&&t?t:m.document.documentElement}function r(e){var t=e.parentNode;return t?t===m.document?m.document.body.scrollTop?m.document.body:m.document.documentElement:["scroll","auto"].indexOf(o(t,"overflow"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-x"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-y"))!==-1?t:r(e.parentNode):e}function l(e){return e!==m.document.body&&("fixed"===o(e,"position")||(e.parentNode?l(e.parentNode):e))}function u(e,t){function i(e){return""!==e&&!isNaN(parseFloat(e))&&isFinite(e)}Object.keys(t).forEach(function(n){var s="";["width","height","top","right","bottom","left"].indexOf(n)!==-1&&i(t[n])&&(s="px"),e.style[n]=t[n]+s})}function c(e){var t={};return e&&"[object Function]"===t.toString.call(e)}function d(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function h(e){var t=e.getBoundingClientRect(),i=navigator.userAgent.indexOf("MSIE")!=-1,n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function f(e,t,i){var n=h(e),s=h(t);if(i){var o=r(t);s.top+=o.scrollTop,s.bottom+=o.scrollTop,s.left+=o.scrollLeft,s.right+=o.scrollLeft}var a={top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height};return a}function p(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if("undefined"!=typeof m.document.body.style[n])return n}return null}var m=window,v={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[p("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){function t(e,t){t.forEach(function(t){e.classList.add(t)})}function i(e,t){t.forEach(function(t){e.setAttribute(t.split(":")[0],t.split(":")[1]||"")})}var n={tagName:"div",classNames:["popper"],attributes:[],parent:m.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},n,e);var s=m.document,o=s.createElement(e.tagName);if(t(o,e.classNames),i(o,e.attributes),"node"===e.contentType?o.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?o.innerHTML=e.content:o.textContent=e.content,e.arrowTagName){var a=s.createElement(e.arrowTagName);t(a,e.arrowClassNames),i(a,e.arrowAttributes),o.appendChild(a)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(r=s.querySelectorAll(e.parent),r.length>1&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return r.length>1&&r instanceof Element==!1&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(o),o},e.prototype._getPosition=function(e,t){var i=a(t);if(this._options.forceAbsolute)return"absolute";var n=l(t,i);return n?"fixed":"absolute"},e.prototype._getOffsets=function(e,i,n){n=n.split("-")[0];var s={};s.position=this.state.position;var o="fixed"===s.position,r=f(i,a(e),o),l=t(e);return["right","left"].indexOf(n)!==-1?(s.top=r.top+r.height/2-l.height/2,"left"===n?s.left=r.left-l.width:s.left=r.right):(s.left=r.left+r.width/2-l.width/2,"top"===n?s.top=r.top-l.height:s.top=r.bottom),s.width=l.width,s.height=l.height,{popper:s,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),m.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=r(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.addEventListener("scroll",this.state.updateBound)}},e.prototype._removeEventListeners=function(){if(m.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=r(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.removeEventListener("scroll",this.state.updateBound)}this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,o={};if("window"===i){var l=m.document.body,u=m.document.documentElement;s=Math.max(l.scrollHeight,l.offsetHeight,u.clientHeight,u.scrollHeight,u.offsetHeight),n=Math.max(l.scrollWidth,l.offsetWidth,u.clientWidth,u.scrollWidth,u.offsetWidth),o={top:0,right:n,bottom:s,left:0}}else if("viewport"===i){var c=a(this._popper),h=r(this._popper),f=d(c),p=function(e){return e==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):e.scrollTop},v=function(e){return e==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):e.scrollLeft},g="fixed"===e.offsets.popper.position?0:p(h),y="fixed"===e.offsets.popper.position?0:v(h);o={top:0-(f.top-g),right:m.document.documentElement.clientWidth-(f.left-y),bottom:m.document.documentElement.clientHeight-(f.top-g),left:0-(f.left-y)}}else o=a(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:d(i);return o.left+=t,o.right-=t,o.top=o.top+t,o.bottom=o.bottom-t,o},e.prototype.runModifiers=function(e,t,i){var n=t.slice();return void 0!==i&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,i))),n.forEach(function(t){c(t)&&(e=t.call(this,e))}.bind(this)),e},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},e.prototype.modifiers={},e.prototype.modifiers.applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=p("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),u(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&u(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],s=t.split("-")[1];if(s){var o=e.offsets.reference,a=n(e.offsets.popper),r={y:{start:{top:o.top},end:{top:o.top+o.height-a.height}},x:{start:{left:o.left},end:{left:o.left+o.width-a.width}}},l=["bottom","top"].indexOf(i)!==-1?"x":"y";e.offsets.popper=Object.assign(a,r[l][s])}return e},e.prototype.modifiers.preventOverflow=function(e){var t=this._options.preventOverflowOrder,i=n(e.offsets.popper),s={left:function t(){var t=i.left;return i.left<e.boundaries.left&&(t=Math.max(i.left,e.boundaries.left)),{left:t}},right:function(){var t=i.left;return i.right>e.boundaries.right&&(t=Math.min(i.left,e.boundaries.right-i.width)),{left:t}},top:function t(){var t=i.top;return i.top<e.boundaries.top&&(t=Math.max(i.top,e.boundaries.top)),{top:t}},bottom:function(){var t=i.top;return i.bottom>e.boundaries.bottom&&(t=Math.min(i.top,e.boundaries.bottom-i.height)),{top:t}}};return t.forEach(function(t){e.offsets.popper=Object.assign(i,s[t]())}),e},e.prototype.modifiers.keepTogether=function(e){var t=n(e.offsets.popper),i=e.offsets.reference,s=Math.floor;return t.right<s(i.left)&&(e.offsets.popper.left=s(i.left)-t.width),t.left>s(i.right)&&(e.offsets.popper.left=s(i.right)),t.bottom<s(i.top)&&(e.offsets.popper.top=s(i.top)-t.height),t.top>s(i.bottom)&&(e.offsets.popper.top=s(i.bottom)),e},e.prototype.modifiers.flip=function(e){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),e;if(e.flipped&&e.placement===e._originalPlacement)return e;var t=e.placement.split("-")[0],s=i(t),o=e.placement.split("-")[1]||"",a=[];return a="flip"===this._options.flipBehavior?[t,s]:this._options.flipBehavior,a.forEach(function(r,l){if(t===r&&a.length!==l+1){t=e.placement.split("-")[0],s=i(t);var u=n(e.offsets.popper),c=["right","bottom"].indexOf(t)!==-1;(c&&Math.floor(e.offsets.reference[t])>Math.floor(u[s])||!c&&Math.floor(e.offsets.reference[t])<Math.floor(u[s]))&&(e.flipped=!0,e.placement=a[l+1],o&&(e.placement+="-"+o),e.offsets.popper=this._getOffsets(this._popper,this._reference,e.placement).popper,e=this.runModifiers(e,this._options.modifiers,this._flip))}}.bind(this)),e},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return e.placement.indexOf("left")!==-1?i.top-=t:e.placement.indexOf("right")!==-1?i.top+=t:e.placement.indexOf("top")!==-1?i.left-=t:e.placement.indexOf("bottom")!==-1&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var i=this._options.arrowElement;if("string"==typeof i&&(i=this._popper.querySelector(i)),!i)return e;if(!this._popper.contains(i))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var s={},o=e.placement.split("-")[0],a=n(e.offsets.popper),r=e.offsets.reference,l=["left","right"].indexOf(o)!==-1,u=l?"height":"width",c=l?"top":"left",d=l?"left":"top",h=l?"bottom":"right",f=t(i)[u];r[h]-f<a[c]&&(e.offsets.popper[c]-=a[c]-(r[h]-f)),r[c]+f>a[h]&&(e.offsets.popper[c]+=r[c]+f-a[h]);var p=r[c]+r[u]/2-f/2,m=p-a[c];return m=Math.max(Math.min(a[u]-f,m),0),s[c]=m,s[d]="",e.offsets.arrow=s,e.arrowElement=i,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(void 0===e||null===e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(void 0!==n&&null!==n){n=Object(n);for(var s=Object.keys(n),o=0,a=s.length;o<a;o++){var r=s[o],l=Object.getOwnPropertyDescriptor(n,r);void 0!==l&&l.enumerable&&(t[r]=n[r])}}}return t}}),e})},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;
+return i("div",{staticClass:"el-select-dropdown",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(624),i(625),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={mixins:[o.default],name:"ElOption",componentName:"ElOption",props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1}},computed:{currentLabel:function(){return this.label||("string"==typeof this.value||"number"==typeof this.value?this.value:"")},currentValue:function(){return this.value||this.label||""},parent:function(){for(var e=this.$parent;!e.isSelect;)e=e.$parent;return e},itemSelected:function(){return this.parent.multiple?this.parent.value.indexOf(this.value)>-1:this.value===this.parent.value},limitReached:function(){return!!this.parent.multiple&&(!this.itemSelected&&this.parent.value.length>=this.parent.multipleLimit&&this.parent.multipleLimit>0)}},watch:{currentLabel:function(){this.created||this.parent.remote||this.dispatch("ElSelect","setSelected")},value:function(){this.created||this.parent.remote||this.dispatch("ElSelect","setSelected")}},methods:{handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.parent.hoverIndex=this.parent.options.indexOf(this))},selectOptionClick:function(){this.disabled!==!0&&this.groupDisabled!==!0&&this.dispatch("ElSelect","handleOptionClick",this)},queryChange:function(e){var t=String(e).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g,"\\$1");this.visible=new RegExp(t,"i").test(this.currentLabel)||this.created,this.visible||this.parent.filteredOptionsCount--},resetIndex:function(){var e=this;this.$nextTick(function(){e.index=e.parent.options.indexOf(e)})}},created:function(){this.parent.options.push(this),this.parent.cachedOptions.push(this),this.parent.optionsCount++,this.parent.filteredOptionsCount++,this.index=this.parent.options.indexOf(this),this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled),this.$on("resetIndex",this.resetIndex)},beforeDestroy:function(){this.dispatch("ElSelect","onOptionDestroy",this)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:e.itemSelected,"is-disabled":e.disabled||e.groupDisabled||e.limitReached},on:{mouseenter:e.hoverItem,click:function(t){t.stopPropagation(),e.selectOptionClick(t)}}},[e._t("default",[i("span",[e._v(e._s(e.currentLabel))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(627),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(628),i(629),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,closeTransition:Boolean,color:String},methods:{handleClose:function(e){this.$emit("close",e)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:e.closeTransition?"":"el-zoom-in-center"}},[i("span",{staticClass:"el-tag",class:[e.type?"el-tag--"+e.type:"",{"is-hit":e.hit}],style:{backgroundColor:e.color}},[e._t("default"),e.closable?i("i",{staticClass:"el-tag__close el-icon-close",on:{click:e.handleClose}}):e._e()],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(631),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(632),o=i(620),a=n(o),r=i(19),l=i(633),u=n(l);t.default={name:"ElScrollbar",components:{Bar:u.default},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=(0,a.default)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=(0,r.toObject)(this.wrapStyle),i.marginRight=i.marginBottom=n):"string"==typeof this.wrapStyle?i+=s:i=s}var o=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),l=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[o]]),c=void 0;return c=this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[o]])]:[l,e(u.default,{attrs:{move:this.moveX,size:this.sizeWidth}},[]),e(u.default,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}},[])],e("div",{class:"el-scrollbar"},c)},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e=void 0,t=void 0,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&(0,s.addResizeListener)(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&(0,s.removeResizeListener)(this.$refs.resize,this.update)}}},function(e,t){"use strict";t.__esModule=!0;var i="undefined"==typeof window,n=function(){if(!i){var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)};return function(t){return e(t)}}}(),s=function(){if(!i){var e=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout;return function(t){return e(t)}}}(),o=function(e){var t=e.__resizeTrigger__,i=t.firstElementChild,n=t.lastElementChild,s=i.firstElementChild;n.scrollLeft=n.scrollWidth,n.scrollTop=n.scrollHeight,s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight},a=function(e){return e.offsetWidth!==e.__resizeLast__.width||e.offsetHeight!==e.__resizeLast__.height},r=function(e){var t=this;o(this),this.__resizeRAF__&&s(this.__resizeRAF__),this.__resizeRAF__=n(function(){a(t)&&(t.__resizeLast__.width=t.offsetWidth,t.__resizeLast__.height=t.offsetHeight,t.__resizeListeners__.forEach(function(i){i.call(t,e)}))})},l=i?{}:document.attachEvent,u="Webkit Moz O ms".split(" "),c="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),d="resizeanim",h=!1,f="",p="animationstart";if(!l&&!i){var m=document.createElement("fakeelement");if(void 0!==m.style.animationName&&(h=!0),h===!1)for(var v="",g=0;g<u.length;g++)if(void 0!==m.style[u[g]+"AnimationName"]){v=u[g],f="-"+v.toLowerCase()+"-",p=c[g],h=!0;break}}var y=!1,b=function(){if(!y&&!i){var e="@"+f+"keyframes "+d+" { from { opacity: 0; } to { opacity: 0; } } ",t=f+"animation: 1ms "+d+";",n=e+"\n      .resize-triggers { "+t+' visibility: hidden; opacity: 0; }\n      .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; }\n      .resize-triggers > div { background: #eee; overflow: auto; }\n      .contract-trigger:before { width: 200%; height: 200%; }',s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n)),s.appendChild(o),y=!0}};t.addResizeListener=function(e,t){if(!i)if(l)e.attachEvent("onresize",t);else{if(!e.__resizeTrigger__){"static"===getComputedStyle(e).position&&(e.style.position="relative"),b(),e.__resizeLast__={},e.__resizeListeners__=[];var n=e.__resizeTrigger__=document.createElement("div");n.className="resize-triggers",n.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',e.appendChild(n),o(e),e.addEventListener("scroll",r,!0),p&&n.addEventListener(p,function(t){t.animationName===d&&o(e)})}e.__resizeListeners__.push(t)}},t.removeResizeListener=function(e,t){l?e.detachEvent("onresize",t):(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||(e.removeEventListener("scroll",r),e.__resizeTrigger__=!e.removeChild(e.__resizeTrigger__)))}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71),s=i(634);t.default={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return s.BAR_MAP[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t=this.size,i=this.move,n=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+n.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(0,s.renderThumbStyle)({size:t,move:i,bar:n})},[])])},methods:{clickThumbHandler:function(e){this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction])},clickTrackHandler:function(e){var t=Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client]),i=this.$refs.thumb[this.bar.offset]/2,n=100*(t-i)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=n*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,(0,n.on)(document,"mousemove",this.mouseMoveDocumentHandler),(0,n.on)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(this.cursorDown!==!1){var t=this[this.bar.axis];if(t){var i=(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])*-1,n=this.$refs.thumb[this.bar.offset]-t,s=100*(i-n)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=s*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,(0,n.off)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){(0,n.off)(document,"mouseup",this.mouseUpDocumentHandler)}}},function(e,t){"use strict";function i(e){var t=e.move,i=e.size,n=e.bar,s={},o="translate"+n.axis+"("+t+"%)";return s[n.size]=i,s.transform=o,s.msTransform=o,s.webkitTransform=o,s}t.__esModule=!0,t.renderThumbStyle=i;t.BAR_MAP={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}}},function(e,t,i){var n=i(31);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,t!==!1)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(71),r=[],l="@@clickoutsideContext",u=void 0;!o.default.prototype.$isServer&&(0,a.on)(document,"mousedown",function(e){return u=e}),!o.default.prototype.$isServer&&(0,a.on)(document,"mouseup",function(e){r.forEach(function(t){return t[l].documentHandler(e,u)})}),t.default={bind:function(e,t,i){var n=r.push(e)-1,s=function(n,s){!i.context||e.contains(n.target)||i.context.popperElm&&(i.context.popperElm.contains(n.target)||i.context.popperElm.contains(s.target))||(t.expression&&e[l].methodName&&i.context[e[l].methodName]?i.context[e[l].methodName]():e[l].bindingFn&&e[l].bindingFn())};e[l]={id:n,documentHandler:s,methodName:t.expression,bindingFn:t.value}},update:function(e,t){e[l].methodName=t.expression,e[l].bindingFn=t.value},unbind:function(e){for(var t=r.length,i=0;i<t;i++)if(r[i][l].id===e[l].id){r.splice(i,1);break}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],staticClass:"el-select"},[e.multiple?i("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":e.inputWidth-32+"px"},on:{click:function(t){t.stopPropagation(),e.toggleMenu(t)}}},[i("transition-group",{on:{"after-leave":e.resetInputHeight}},e._l(e.selected,function(t){return i("el-tag",{key:t.value,attrs:{closable:"",hit:t.hitState,type:"primary","close-transition":""},on:{close:function(i){e.deleteTag(i,t)}}},[i("span",{staticClass:"el-select__tags-text"},[e._v(e._s(t.currentLabel))])])})),e.filterable?i("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:"is-"+e.size,style:{width:e.inputLength+"px","max-width":e.inputWidth-42+"px"},attrs:{type:"text",disabled:e.disabled,debounce:e.remote?300:0},domProps:{value:e.query},on:{focus:function(t){e.visible=!0},keyup:e.managePlaceholder,keydown:[e.resetInputState,function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.navigateOptions("next")):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.navigateOptions("prev")):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.preventDefault(),void e.selectOption(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27)?(t.preventDefault(),void(e.visible=!1)):null},function(t){return"button"in t||!e._k(t.keyCode,"delete",[8,46])?void e.deletePrevTag(t):null}],input:function(t){t.target.composing||(e.query=t.target.value)}}}):e._e()],1):e._e(),i("el-input",{ref:"reference",attrs:{type:"text",placeholder:e.currentPlaceholder,name:e.name,size:e.size,disabled:e.disabled,readonly:!e.filterable||e.multiple,"validate-event":!1,icon:e.iconClass},on:{focus:e.handleFocus,click:e.handleIconClick},nativeOn:{mousedown:function(t){e.handleMouseDown(t)},keyup:function(t){e.debouncedOnInputChange(t)},keydown:[function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.navigateOptions("next")):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.navigateOptions("prev")):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.preventDefault(),void e.selectOption(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27)?(t.preventDefault(),void(e.visible=!1)):null},function(t){return"button"in t||!e._k(t.keyCode,"tab",9)?void(e.visible=!1):null}],paste:function(t){e.debouncedOnInputChange(t)},mouseenter:function(t){e.inputHovering=!0},mouseleave:function(t){e.inputHovering=!1}},model:{value:e.selectedLabel,callback:function(t){e.selectedLabel=t},expression:"selectedLabel"}}),i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy,"after-enter":e.handleMenuEnter}},[i("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:e.visible&&e.emptyText!==!1,expression:"visible && emptyText !== false"}],ref:"popper"},[i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.options.length>0&&!e.loading,expression:"options.length > 0 && !loading"}],class:{"is-empty":!e.allowCreate&&0===e.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[e.showNewOption?i("el-option",{attrs:{value:e.query,created:""}}):e._e(),e._t("default")],2),e.emptyText&&!e.allowCreate?i("p",{staticClass:"el-select-dropdown__empty"},[e._v(e._s(e.emptyText))]):e._e()],1)],1)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(623),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(640),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(641),i(642),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(618),o=n(s),a=i(607),r=n(a);t.default={name:"ElDialog",mixins:[o.default,r.default],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},size:{type:String,default:"small"},customClass:{type:String,default:""},top:{type:String,default:"15%"},beforeClose:Function},data:function(){return{visible:!1}},watch:{value:function(e){this.visible=e},visible:function(e){var t=this;this.$emit("input",e),e?(this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0})):(this.$el.removeEventListener("scroll",this.updatePopper),this.$emit("close"))}},computed:{sizeClass:function(){return"el-dialog--"+this.size},style:function(){return"full"===this.size?{}:{top:this.top}}},methods:{handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.close):this.close()},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")}},mounted:function(){this.value&&(this.rendered=!0,this.open())}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"dialog-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(t){return t.target!==t.currentTarget?null:void e.handleWrapperClick(t)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[e.sizeClass,e.customClass],style:e.style},[i("div",{staticClass:"el-dialog__header"},[e._t("title",[i("span",{staticClass:"el-dialog__title"},[e._v(e._s(e.title))])]),i("div",{staticClass:"el-dialog__headerbtn"},[e.showClose?i("i",{staticClass:"el-dialog__close el-icon el-icon-close",on:{click:e.handleClose}}):e._e()])],2),e.rendered?i("div",{staticClass:"el-dialog__body"},[e._t("default")],2):e._e(),e.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[e._t("footer")],2):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(644),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(645),i(649),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(609),o=n(s),a=i(636),r=n(a),l=i(646),u=n(l),c=i(607),d=n(c);t.default={name:"ElAutocomplete",mixins:[d.default],componentName:"ElAutocomplete",components:{ElInput:o.default,ElAutocompleteSuggestions:u.default},directives:{Clickoutside:r.default},props:{popperClass:String,placeholder:String,disabled:Boolean,name:String,size:String,value:String,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,icon:String,onIconClick:Function},data:function(){return{isFocus:!1,isOnComposition:!1,suggestions:[],loading:!1,highlightedIndex:-1}},computed:{suggestionVisible:function(){var e=this.suggestions,t=Array.isArray(e)&&e.length>0;return(t||this.loading)&&this.isFocus}},watch:{suggestionVisible:function(e){this.broadcast("ElAutocompleteSuggestions","visible",[e,this.$refs.input.$refs.input.offsetWidth])}},methods:{getData:function(e){var t=this;this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,Array.isArray(e)?t.suggestions=e:console.error("autocomplete suggestions must be an array")})},handleComposition:function(e){"compositionend"===e.type?(this.isOnComposition=!1,this.handleChange(e.data)):this.isOnComposition=!0},handleChange:function(e){return this.$emit("input",e),this.isOnComposition||!this.triggerOnFocus&&!e?void(this.suggestions=[]):void this.getData(e)},handleFocus:function(){this.isFocus=!0,this.triggerOnFocus&&this.getData(this.value)},handleBlur:function(){var e=this;setTimeout(function(t){e.isFocus=!1},100)},handleKeyEnter:function(){this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex<this.suggestions.length&&this.select(this.suggestions[this.highlightedIndex])},handleClickoutside:function(){this.isFocus=!1},select:function(e){var t=this;this.$emit("input",e.value),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[]})},highlight:function(e){if(this.suggestionVisible&&!this.loading){e<0&&(e=0),e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li"),n=i[e],s=t.scrollTop,o=n.offsetTop;o+n.scrollHeight>s+t.clientHeight&&(t.scrollTop+=n.scrollHeight),o<s&&(t.scrollTop-=n.scrollHeight),this.highlightedIndex=e}}},mounted:function(){var e=this;this.$on("item-click",function(t){e.select(t)})},beforeDestroy:function(){this.$refs.suggestions.$destroy()}}},function(e,t,i){var n=i(13)(i(647),i(648),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(607),r=n(a),l=i(630),u=n(l);t.default={components:{ElScrollbar:u.default},mixins:[o.default,r.default],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{suggestions:Array,options:{default:function(){return{forceAbsolute:!0,gpuAcceleration:!1}}}},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var e=this;this.$nextTick(function(t){e.updatePopper()})},mounted:function(){this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input},created:function(){var e=this;this.$on("visible",function(t,i){e.dropdownWidth=i+"px",e.showPopper=t})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion",class:{"is-loading":e.parent.loading},style:{width:e.dropdownWidth}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._l(e.suggestions,function(t,n){return[e.parent.customItem?i(e.parent.customItem,{tag:"component",class:{highlighted:e.parent.highlightedIndex===n},attrs:{item:t,index:n},on:{click:function(i){e.select(t)}}}):i("li",{class:{highlighted:e.parent.highlightedIndex===n},on:{click:function(i){e.select(t)}}},[e._v("\n          "+e._s(t.value)+"\n        ")])]})],2)],1)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],staticClass:"el-autocomplete"},[i("el-input",{ref:"input",attrs:{value:e.value,disabled:e.disabled,placeholder:e.placeholder,name:e.name,size:e.size,icon:e.icon,"on-icon-click":e.onIconClick},on:{change:e.handleChange,focus:e.handleFocus,blur:e.handleBlur},nativeOn:{compositionstart:function(t){e.handleComposition(t)},compositionupdate:function(t){e.handleComposition(t)},compositionend:function(t){e.handleComposition(t)},keydown:[function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.highlight(e.highlightedIndex-1)):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.highlight(e.highlightedIndex+1)):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.stopPropagation(),void e.handleKeyEnter(t)):null}]}},[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e()],2),i("el-autocomplete-suggestions",{ref:"suggestions",class:[e.popperClass?e.popperClass:""],attrs:{suggestions:e.suggestions}})],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(651),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(652),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(636),o=n(s),a=i(607),r=n(a),l=i(653),u=n(l),c=i(657),d=n(c);t.default={name:"ElDropdown",componentName:"ElDropdown",mixins:[r.default],directives:{Clickoutside:o.default},components:{ElButton:u.default,ElButtonGroup:d.default},props:{trigger:{type:String,default:"hover"},menuAlign:{type:String,default:"end"},type:String,size:String,splitButton:Boolean,hideOnClick:{type:Boolean,default:!0}},data:function(){return{timeout:null,visible:!1}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick),this.initEvent()},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e)}},methods:{show:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},250)},hide:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},150)},handleClick:function(){this.visible=!this.visible},initEvent:function(){var e=this.trigger,t=this.show,i=this.hide,n=this.handleClick,s=this.splitButton,o=s?this.$refs.trigger.$el:this.$slots.default[0].elm;if("hover"===e){o.addEventListener("mouseenter",t),o.addEventListener("mouseleave",i);var a=this.$slots.dropdown[0].elm;a.addEventListener("mouseenter",t),a.addEventListener("mouseleave",i)}else"click"===e&&o.addEventListener("click",n)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)}},render:function(e){var t=this,i=this.hide,n=this.splitButton,s=this.type,o=this.size,a=function(e){t.$emit("click")},r=n?e("el-button-group",null,[e("el-button",{attrs:{type:s,size:o},nativeOn:{click:a}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:s,size:o},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-caret-bottom"},[])])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[r,this.$slots.dropdown])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(654),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(655),i(656),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElButton",props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean},methods:{handleClick:function(e){this.$emit("click",e)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.size?"el-button--"+e.size:"",{"is-disabled":e.disabled,"is-loading":e.loading,"is-plain":e.plain}],attrs:{disabled:e.disabled,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:"el-icon-"+e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(658),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(659),i(660),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElButtonGroup"}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-button-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(662),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(663),i(664),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s);t.default={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[o.default],created:function(){var e=this;this.$on("updatePopper",this.updatePopper),this.$on("visible",function(t){e.showPopper=t})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{"$parent.menuAlign":{immediate:!0,handler:function(e){this.currentPlacement="bottom-"+e}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu"},[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(667),i(668),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElDropdownItem",mixins:[o.default],props:{command:String,disabled:Boolean,divided:Boolean},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},on:{click:e.handleClick}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(670),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(671),i(672),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElMenu",componentName:"ElMenu",mixins:[o.default],props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,theme:{type:String,default:"light"},uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"}},data:function(){return{activedIndex:this.defaultActive,openedMenus:this.defaultOpeneds?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},watch:{defaultActive:function(e){var t=this.items[e];t?(this.activedIndex=t.index,this.initOpenedMenu()):this.activedIndex=""},defaultOpeneds:function(e){this.openedMenus=e}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index];
+},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;i.indexOf(e)===-1&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return t.indexOf(e)!==-1})),this.openedMenus.push(e))},closeMenu:function(e,t){this.openedMenus.splice(this.openedMenus.indexOf(e),1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath,n=this.openedMenus.indexOf(t)!==-1;n?(this.closeMenu(t,i),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=e.index,i=e.indexPath;this.activedIndex=e.index,this.$emit("select",t,i,e),"horizontal"===this.mode&&(this.openedMenus=[]),this.router&&this.routeToItem(e)},initOpenedMenu:function(){var e=this,t=this.activedIndex,i=this.items[t];if(i&&"horizontal"!==this.mode){var n=i.indexPath;n.forEach(function(t){var i=e.submenus[t];i&&e.openMenu(t,i.indexPath)})}},routeToItem:function(e){var t=e.route||e.index;try{this.$router.push(t)}catch(e){console.error(e)}}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-menu",class:{"el-menu--horizontal":"horizontal"===e.mode,"el-menu--dark":"dark"===e.theme}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(674),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(675),i(677),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(676),o=n(s),a=i(607),r=n(a);t.default={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[o.default,r.default],props:{index:{type:String,required:!0}},data:function(){return{timeout:null,items:{},submenus:{}}},computed:{opened:function(){return this.rootMenu.openedMenus.indexOf(this.index)>-1},active:{cache:!1,get:function(){var e=!1,t=this.submenus,i=this.items;return Object.keys(i).forEach(function(t){i[t].active&&(e=!0)}),Object.keys(t).forEach(function(i){t[i].active&&(e=!0)}),e}}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.openMenu(e.index,e.indexPath)},300)},handleMouseleave:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.closeMenu(e.index,e.indexPath)},300)},initEvents:function(){var e=this.rootMenu,t=this.handleMouseenter,i=this.handleMouseleave,n=this.handleClick,s=void 0;"horizontal"===e.mode&&"hover"===e.menuTrigger?(s=this.$el,s.addEventListener("mouseenter",t),s.addEventListener("mouseleave",i)):(s=this.$refs["submenu-title"],s.addEventListener("click",n))}},created:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this)},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},mounted:function(){this.initEvents()}}},function(e,t){"use strict";t.__esModule=!0,t.default={computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},rootMenu:function(){for(var e=this.$parent;e&&"ElMenu"!==e.$options.componentName;)e=e.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&["ElMenu","ElSubmenu"].indexOf(e.$options.componentName)===-1;)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};for(var e=20,t=this.$parent;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{class:{"el-submenu":!0,"is-active":e.active,"is-opened":e.opened}},[i("div",{ref:"submenu-title",staticClass:"el-submenu__title",style:e.paddingStyle},[e._t("title"),i("i",{class:{"el-submenu__icon-arrow":!0,"el-icon-arrow-down":"vertical"===e.rootMenu.mode,"el-icon-caret-bottom":"horizontal"===e.rootMenu.mode}})],2),"horizontal"===e.rootMenu.mode?[i("transition",{attrs:{name:"el-zoom-in-top"}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu"},[e._t("default")],2)])]:i("el-collapse-transition",[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu"},[e._t("default")],2)])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(679),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(680),i(681),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(676),o=n(s),a=i(607),r=n(a);t.default={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[o.default,r.default],props:{index:{type:String,required:!0},route:{type:Object,required:!1},disabled:{type:Boolean,required:!1}},computed:{active:function(){return this.index===this.rootMenu.activedIndex}},methods:{handleClick:function(){this.dispatch("ElMenu","item-click",this),this.$emit("click",this)}},created:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:e.paddingStyle,on:{click:e.handleClick}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(683),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(684),i(685),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){for(var e=10,t=this.$parent;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return 10===e&&(e=20),e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(687),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(688),i(689),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(609),o=n(s),a=i(71);t.default={name:"ElInputNumber",directives:{repeatClick:{bind:function(e,t,i){var n=null,s=void 0,o=function(){return i.context[t.expression].apply()},r=function(){new Date-s<100&&o(),clearInterval(n),n=null};(0,a.on)(e,"mousedown",function(){s=new Date,(0,a.once)(document,"mouseup",r),clearInterval(n),n=setInterval(o,100)})}}},components:{ElInput:o.default},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-(1/0)},value:{default:0},disabled:Boolean,size:String,controls:{type:Boolean,default:!0}},data:function(){return{currentValue:0}},watch:{value:{immediate:!0,handler:function(e){var t=Number(e);isNaN(t)||(t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.$emit("input",t))}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},precision:function(){var e=this.value,t=this.step,i=this.getPrecision;return Math.max(i(e),i(t))}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.precision),parseFloat(parseFloat(Number(e).toFixed(t)))},getPrecision:function(e){var t=e.toString(),i=t.indexOf("."),n=0;return i!==-1&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.disabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);t>this.max||this.setCurrentValue(t)}},decrease:function(){if(!this.disabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);t<this.min||this.setCurrentValue(t)}},handleBlur:function(){this.$refs.input.setCurrentValue(this.currentValue)},setCurrentValue:function(e){var t=this.currentValue;e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.$emit("change",e,t),this.$emit("input",e),this.currentValue=e)},handleInput:function(e){var t=Number(e);isNaN(t)||this.setCurrentValue(t)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-input-number",class:[e.size?"el-input-number--"+e.size:"",{"is-disabled":e.disabled},{"is-without-controls":!e.controls}]},[e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":e.minDisabled}},[i("i",{staticClass:"el-icon-minus"})]):e._e(),e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":e.maxDisabled}},[i("i",{staticClass:"el-icon-plus"})]):e._e(),i("el-input",{ref:"input",attrs:{value:e.currentValue,disabled:e.disabled,size:e.size,max:e.max,min:e.min},on:{blur:e.handleBlur,input:e.handleInput},nativeOn:{keydown:[function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.increase(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.decrease(t)):null}]}},[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e()],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(691),o=n(s);o.default.install=function(e){e.component("el-radio",o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(692),i(693),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElRadio",mixins:[o.default],componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled:this.disabled}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio"},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":e.isDisabled,"is-checked":e.model===e.label,"is-focus":e.focus}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:e._q(e.model,e.label)},on:{focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){e.model=e.label}}})]),i("span",{staticClass:"el-radio__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(695),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(696),i(697),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElRadioGroup",componentName:"ElRadioGroup",mixins:[o.default],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},watch:{value:function(e){this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",[this.value])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-radio-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(699),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(700),i(701),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElRadioButton",props:{label:{},disabled:Boolean,name:String},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},size:function(){return this._radioGroup.size},isDisabled:function(){return this.disabled||this._radioGroup.disabled}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio-button",class:[e.size?"el-radio-button--"+e.size:"",{"is-active":e.value===e.label},{"is-disabled":e.isDisabled}]},[i("input",{directives:[{name:"model",rawName:"v-model",value:e.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:e._q(e.value,e.label)},on:{__c:function(t){e.value=e.label}}}),i("span",{staticClass:"el-radio-button__inner",style:e.value===e.label?e.activeStyle:null},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(703),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(704),i(705),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCheckbox",mixins:[o.default],componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){if(this.isGroup){var t=!1;void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(t=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(t=!0),t===!1&&this.dispatch("ElCheckboxGroup","input",[e])}else void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},methods:{addToStore:function(){Array.isArray(this.model)&&this.model.indexOf(this.label)===-1?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$emit("change",e),this.isGroup&&this.$nextTick(function(e){t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}},created:function(){this.checked&&this.addToStore()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox"},[i("span",{staticClass:"el-checkbox__input",class:{"is-disabled":e.disabled,"is-checked":e.isChecked,"is-indeterminate":e.indeterminate,"is-focus":e.focus}},[i("span",{staticClass:"el-checkbox__inner"}),e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",name:e.name,disabled:e.disabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",disabled:e.disabled,name:e.name},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=e.label,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}})]),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(707),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(708),i(709),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCheckboxButton",mixins:[o.default],data:function(){return{selfModel:!1,focus:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){if(this._checkboxGroup){var t=!1;void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(t=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(t=!0),t===!1&&this.dispatch("ElCheckboxGroup","input",[e])}else void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},size:function(){return this._checkboxGroup.size}},methods:{addToStore:function(){Array.isArray(this.model)&&this.model.indexOf(this.label)===-1?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$emit("change",e),this._checkboxGroup&&this.$nextTick(function(e){t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}},created:function(){this.checked&&this.addToStore()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox-button",class:[e.size?"el-checkbox-button--"+e.size:"",{"is-disabled":e.disabled},{"is-checked":e.isChecked},{"is-focus":e.focus}]},[e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.disabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.disabled},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=e.label,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}}),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox-button__inner",style:e.isChecked?e.activeStyle:null},[e._t("default",[e._v(e._s(e.label))])],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(711),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(712),i(713),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[o.default],props:{value:{},min:Number,max:Number,size:String,fill:String,textColor:String},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-checkbox-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(715),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(716),i(717),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSwitch",props:{value:{type:[Boolean,String,Number],default:!0},disabled:{type:Boolean,default:!1},width:{type:Number,default:0},onIconClass:{type:String,default:""},offIconClass:{type:String,default:""},onText:{type:String,default:"ON"},offText:{type:String,default:"OFF"},onColor:{type:String,default:""},offColor:{type:String,default:""},onValue:{type:[Boolean,String,Number],default:!0},offValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""}},data:function(){return{coreWidth:this.width}},created:function(){~[this.onValue,this.offValue].indexOf(this.value)||this.$emit("input",this.onValue)},computed:{checked:function(){return this.value===this.onValue},hasText:function(){return this.onText||this.offText},_value:{get:function(){return this.value},set:function(e){this.$emit("input",e)}},transform:function(){return this.checked?"translate("+(this.coreWidth-20)+"px, 2px)":"translate(2px, 2px)"}},watch:{value:function(){(this.onColor||this.offColor)&&this.setBackgroundColor()}},methods:{handleChange:function(e){this.$emit("change",e.currentTarget.checked)},setBackgroundColor:function(){var e=this.checked?this.onColor:this.offColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e}},mounted:function(){0===this.width&&(this.coreWidth=this.hasText?58:46),(this.onColor||this.offColor)&&this.setBackgroundColor()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-switch",class:{"is-disabled":e.disabled,"el-switch--wide":e.hasText}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.disabled,expression:"disabled"}],staticClass:"el-switch__mask"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e._value,expression:"_value"}],staticClass:"el-switch__input",attrs:{type:"checkbox",name:e.name,"true-value":e.onValue,"false-value":e.offValue,disabled:e.disabled},domProps:{checked:Array.isArray(e._value)?e._i(e._value,null)>-1:e._q(e._value,e.onValue)},on:{change:e.handleChange,__c:function(t){var i=e._value,n=t.target,s=n.checked?e.onValue:e.offValue;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e._value=i.concat(o)):a>-1&&(e._value=i.slice(0,a).concat(i.slice(a+1)))}else e._value=s}}}),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:e.coreWidth+"px"}},[i("span",{staticClass:"el-switch__button",style:{transform:e.transform}})]),i("transition",{attrs:{name:"label-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.checked,expression:"checked"}],staticClass:"el-switch__label el-switch__label--left",style:{width:e.coreWidth+"px"}},[e.onIconClass?i("i",{class:[e.onIconClass]}):e._e(),!e.onIconClass&&e.onText?i("span",[e._v(e._s(e.onText))]):e._e()])]),i("transition",{attrs:{name:"label-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.checked,expression:"!checked"}],staticClass:"el-switch__label el-switch__label--right",style:{width:e.coreWidth+"px"}},[e.offIconClass?i("i",{class:[e.offIconClass]}):e._e(),!e.offIconClass&&e.offText?i("span",[e._v(e._s(e.offText))]):e._e()])])],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(719),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(720),i(721),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={mixins:[o.default],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return e.visible===!0})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-select-group__wrap"},[i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(723),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(724),i(738),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(702),o=n(s),a=i(31),r=n(a),l=i(635),u=n(l),c=i(632),d=i(608),h=n(d),f=i(725),p=n(f),m=i(727),v=n(m),g=i(728),y=n(g),b=i(732),_=n(b),C=i(737),x=n(C),w=i(726),M=1;t.default={name:"ElTable",mixins:[h.default],props:{data:{type:Array,default:function(){return[]}},width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String},components:{TableHeader:_.default,TableFooter:x.default,TableBody:y.default,ElCheckbox:o.default},methods:{setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},clearSelection:function(){this.store.clearSelection()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY()},bindEvents:function(){var e=this,t=this.$refs,i=t.headerWrapper,n=t.footerWrapper,s=this.$refs;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),s.fixedBodyWrapper&&(s.fixedBodyWrapper.scrollTop=this.scrollTop),s.rightFixedBodyWrapper&&(s.rightFixedBodyWrapper.scrollTop=this.scrollTop)}),i&&(0,w.mousewheel)(i,(0,r.default)(16,function(t){var i=t.deltaX;i>0?e.bodyWrapper.scrollLeft+=10:e.bodyWrapper.scrollLeft-=10})),this.fit&&(this.windowResizeListener=(0,r.default)(50,function(){e.$ready&&e.doLayout()}),(0,c.addResizeListener)(this.$el,this.windowResizeListener))},doLayout:function(){var e=this;this.store.updateColumns(),this.layout.update(),this.updateScrollY(),this.$nextTick(function(){e.height?e.layout.setHeight(e.height):e.maxHeight?e.layout.setMaxHeight(e.maxHeight):e.shouldUpdateHeight&&e.layout.updateHeight()})}},created:function(){var e=this;this.tableId="el-table_"+M+"_",this.debouncedLayout=(0,u.default)(50,function(){return e.doLayout()})},computed:{bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return"number"==typeof this.height||this.fixedColumns.length>0||this.rightFixedColumns.length>0},selection:function(){return this.store.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyHeight:function(){var e={};return this.height?e={height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight&&(e={"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight:this.maxHeight)+"px"}),e},bodyWidth:function e(){var t=this.layout,e=t.bodyWidth,i=t.scrollY,n=t.gutterWidth;return e?e-(i?n:0)+"px":""},fixedBodyHeight:function(){var e={};if(this.height)e={height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""
+};else if(this.maxHeight){var t=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;this.showHeader&&(t-=this.layout.headerHeight),e={"max-height":t+"px"}}return e},fixedHeight:function(){var e={};return e=this.maxHeight?{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:function(e){this.layout.setHeight(e)},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){this.store.commit("setData",e)}},expandRowKeys:function(e){this.store.setExpandRowKeys(e)}},destroyed:function(){this.windowResizeListener&&(0,c.removeResizeListener)(this.$el,this.windowResizeListener)},mounted:function(){var e=this;this.bindEvents(),this.doLayout(),this.store.states.columns.forEach(function(t){t.filteredValue&&t.filteredValue.length&&e.store.commit("filterChange",{column:t,values:t.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new p.default(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll}),t=new v.default({store:e,table:this,fit:this.fit,showHeader:this.showHeader});return{store:e,layout:t,renderExpanded:null,resizeProxyVisible:!1}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(635),r=n(a),l=i(726),u=function(e,t){var i=t.sortingColumn;return i&&"string"!=typeof i.sortable?(0,l.orderBy)(e,t.sortProp,t.sortOrder,i.sortMethod):e},c=function(e,t){var i={};return(e||[]).forEach(function(e,n){i[(0,l.getRowIdentity)(e,t)]={row:e,index:n}}),i},d=function(e,t,i){var n=!1,s=e.selection,o=s.indexOf(t);return"undefined"==typeof i?o===-1?(s.push(t),n=!0):(s.splice(o,1),n=!0):i&&o===-1?(s.push(t),n=!0):!i&&o>-1&&(s.splice(o,1),n=!0),n},h=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],isComplex:!1,_data:null,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1};for(var i in t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};h.prototype.mutations={setData:function(e,t){var i=this,n=e._data!==t;e._data=t,e.data=u(t||[],e),this.updateCurrentRow(),e.reserveSelection?!function(){var t=e.rowKey;t?!function(){var n=e.selection,s=c(n,t);e.data.forEach(function(e){var i=(0,l.getRowIdentity)(e,t),o=s[i];o&&(n[o.index]=e)}),i.updateAllSelected()}():console.warn("WARN: rowKey is required when reserve-selection is enabled.")}():(n?this.clearSelection():this.cleanSelection(),this.updateAllSelected());var s=e.defaultExpandAll;s&&(this.states.expandRows=(e.data||[]).slice(0)),o.default.nextTick(function(){return i.table.updateScrollY()})},changeSortCondition:function(e){var t=this;e.data=u(e.filteredData||e._data||[],e),this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),o.default.nextTick(function(){return t.table.updateScrollY()})},filterChange:function(e,t){var i=this,n=t.column,s=t.values,a=t.silent;s&&!Array.isArray(s)&&(s=[s]);var r=n.property,c={};r&&(e.filters[n.id]=s,c[n.columnKey||n.id]=s);var d=e._data;Object.keys(e.filters).forEach(function(t){var n=e.filters[t];if(n&&0!==n.length){var s=(0,l.getColumnById)(i.states,t);s&&s.filterMethod&&(d=d.filter(function(e){return n.some(function(t){return s.filterMethod.call(null,t,e)})}))}}),e.filteredData=d,e.data=u(d,e),a||this.table.$emit("filter-change",c),o.default.nextTick(function(){return i.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&(s=n.children,s||(s=n.children=[])),"undefined"!=typeof i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.updateColumns(),this.scheduleLayout()},removeColumn:function(e,t){var i=e._columns;i&&i.splice(i.indexOf(t),1),this.updateColumns(),this.scheduleLayout()},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;e.currentRow=t,i!==t&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=d(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n),s.$emit("select",n,t)}this.updateAllSelected()},toggleRowExpanded:function(e,t,i){var n=e.expandRows;if("undefined"!=typeof i){var s=n.indexOf(t);i?s===-1&&n.push(t):s!==-1&&n.splice(s,1)}else{var o=n.indexOf(t);o===-1?n.push(t):n.splice(o,1)}this.table.$emit("expand",t,n.indexOf(t)!==-1)},toggleAllSelection:(0,r.default)(10,function(e){var t=e.data||[],i=!e.isAllSelected,n=this.states.selection,s=!1;t.forEach(function(t,n){e.selectable?e.selectable.call(null,t,n)&&d(e,t,i)&&(s=!0):d(e,t,i)&&(s=!0)});var o=this.table;s&&o.$emit("selection-change",n),o.$emit("select-all",n),e.isAllSelected=i})};var f=function e(t){var i=[];return t.forEach(function(t){t.children?i.push.apply(i,e(t.children)):i.push(t)}),i};h.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return e.fixed===!0||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),e.fixedColumns.length>0&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0])),e.originColumns=[].concat(e.fixedColumns).concat(t.filter(function(e){return!e.fixed})).concat(e.rightFixedColumns),e.columns=f(e.originColumns),e.isComplex=e.fixedColumns.length>0||e.rightFixedColumns.length>0},h.prototype.isSelected=function(e){return(this.states.selection||[]).indexOf(e)>-1},h.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection=[],t.length>0&&this.table.$emit("selection-change",e.selection)},h.prototype.setExpandRowKeys=function(e){var t=[],i=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=c(i,n);e.forEach(function(e){var i=s[e];i&&t.push(i.row)}),this.states.expandRows=t},h.prototype.toggleRowSelection=function(e,t){var i=d(this.states,e,t);i&&this.table.$emit("selection-change",this.states.selection)},h.prototype.cleanSelection=function(){var e=this.states.selection||[],t=this.states.data,i=this.states.rowKey,n=void 0;if(i){n=[];var s=c(e,i),o=c(t,i);for(var a in s)s.hasOwnProperty(a)&&!o[a]&&n.push(s[a].row)}else n=e.filter(function(e){return t.indexOf(e)===-1});n.forEach(function(t){e.splice(e.indexOf(t),1)}),n.length&&this.table.$emit("selection-change",e)},h.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(!s||0===s.length)return void(e.isAllSelected=!1);var o=void 0;i&&(o=c(e.selection,i));for(var a=function(e){return o?!!o[(0,l.getRowIdentity)(e,i)]:t.indexOf(e)!==-1},r=!0,u=0,d=0,h=s.length;d<h;d++){var f=s[d];if(n){var p=n.call(null,f,d);if(p){if(!a(f)){r=!1;break}u++}}else{if(!a(f)){r=!1;break}u++}}0===u&&(r=!1),e.isAllSelected=r},h.prototype.scheduleLayout=function(){this.table.debouncedLayout()},h.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],s=c(n,i),o=s[e];o&&(t.currentRow=o.row)},h.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;i.indexOf(n)===-1&&(e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n))},h.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(i>1?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];t[e].apply(this,[this.states].concat(n))},t.default=h},function(e,t){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=(t.getCell=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},t.getValueByPath=function(e,t){t=t||"";for(var i=t.split("."),n=e,s=null,o=0,a=i.length;o<a;o++){var r=i[o];if(!n)break;if(o===a-1){s=n[r];break}n=n[r]}return s}),s=function(e){return null!==e&&"object"===("undefined"==typeof e?"undefined":i(e))},o=(t.orderBy=function(e,t,i,o){if("string"==typeof i&&(i="descending"===i?-1:1),!t)return e;var a=i&&i<0?-1:1;return e.slice().sort(o?function(e,t){return o(e,t)?a:-a}:function(e,i){return"$key"!==t&&(s(e)&&"$value"in e&&(e=e.$value),s(i)&&"$value"in i&&(i=i.$value)),e=s(e)?n(e,t):e,i=s(i)?n(i,t):i,e===i?0:e>i?a:-a})},t.getColumnById=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i}),a=(t.getColumnByCell=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?o(e,i[0]):null},"undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1);t.mousewheel=function(e,t){e&&e.addEventListener&&e.addEventListener(a?"DOMMouseScroll":"mousewheel",t)},t.getRowIdentity=function(e,t){if(!e)throw new Error("row is required when get row identity");return"string"==typeof t?e[t]:"function"==typeof t?t.call(null,e):void 0}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=i(620),a=n(o),r=function(){function e(t){s(this,e),this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=(0,a.default)();for(var i in t)t.hasOwnProperty(i)&&(this[i]=t[i]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return e.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>t.offsetHeight}}},e.prototype.setHeight=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"height",i=this.table.$el;"string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,i&&("number"==typeof e?(i.style[t]=e+"px",this.updateHeight()):"string"==typeof e&&(""===e&&(i.style[t]=""),this.updateHeight()))},e.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},e.prototype.updateHeight=function(){var e=this.tableHeight=this.table.$el.clientHeight,t=!this.table.data||0===this.table.data.length,i=this.table.$refs.headerWrapper;if(!this.showHeader||i){if(this.showHeader){var n=this.headerHeight=i.offsetHeight,s=this.table.showSummary&&this.table.data&&this.table.data.length>0?2:1,o=e-s*n+(this.table.showSummary?1:0);null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=o),this.fixedBodyHeight=this.scrollX?o-this.gutterWidth:o}else this.headerHeight=0,null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=e),this.fixedBodyHeight=this.scrollX?e-this.gutterWidth:e;this.viewportHeight=this.scrollX?e-(t?0:this.gutterWidth):e}},e.prototype.update=function(){var e=this.fit,t=this.table.columns,i=this.table.$el.clientWidth,n=0,s=[];t.forEach(function(e){e.isColumnGroup?s.push.apply(s,e.columns):s.push(e)});var o=s.filter(function(e){return"number"!=typeof e.width});if(o.length>0&&e){if(s.forEach(function(e){n+=e.width||e.minWidth||80}),n<i-this.gutterWidth){this.scrollX=!1;var a=i-this.gutterWidth-n;1===o.length?o[0].realWidth=(o[0].minWidth||80)+a:!function(){var e=o.reduce(function(e,t){return e+(t.minWidth||80)},0),t=a/e,i=0;o.forEach(function(e,n){if(0!==n){var s=Math.floor((e.minWidth||80)*t);i+=s,e.realWidth=(e.minWidth||80)+s}}),o[0].realWidth=(o[0].minWidth||80)+a-i}()}else this.scrollX=!0,o.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(n,i)}else s.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,n+=e.realWidth}),this.scrollX=n>i,this.bodyWidth=n;var r=this.store.states.fixedColumns;if(r.length>0){var l=0;r.forEach(function(e){l+=e.realWidth}),this.fixedWidth=l}var u=this.store.states.rightFixedColumns;if(u.length>0){var c=0;u.forEach(function(e){c+=e.realWidth}),this.rightFixedWidth=c}},e}();t.default=r},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(726),o=i(71),a=i(702),r=n(a),l=i(729),u=n(l),c=i(635),d=n(c);t.default={components:{ElCheckbox:r.default,ElTooltip:u.default},props:{store:{required:!0},context:{},layout:{required:!0},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(e){var t=this,i=this.columns.map(function(e,i){return t.isColumnHidden(i)});return e("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])})]),e("tbody",null,[this._l(this.data,function(n,s){return[e("tr",{style:t.rowStyle?t.getRowStyle(n,s):null,key:t.table.rowKey?t.getKeyOfRow(n,s):s,on:{dblclick:function(e){return t.handleDoubleClick(e,n)},click:function(e){return t.handleClick(e,n)},contextmenu:function(e){return t.handleContextMenu(e,n)},mouseenter:function(e){return t.handleMouseEnter(s)},mouseleave:function(e){return t.handleMouseLeave()}},class:[t.getRowClass(n,s)]},[t._l(t.columns,function(o,a){return e("td",{class:[o.id,o.align,o.className||"",i[a]?"is-hidden":""],on:{mouseenter:function(e){return t.handleCellMouseEnter(e,n)},mouseleave:t.handleCellMouseLeave}},[o.renderCell.call(t._renderProxy,e,{row:n,column:o,$index:s,store:t.store,_self:t.context||t.table.$vnode.context},i[a])])}),!t.fixed&&t.layout.scrollY&&t.layout.gutterWidth?e("td",{class:"gutter"},[]):""]),t.store.states.expandRows.indexOf(n)>-1?e("tr",null,[e("td",{attrs:{colspan:t.columns.length},class:"el-table__expanded-cell"},[t.table.renderExpanded?t.table.renderExpanded(e,{row:n,$index:s,store:t.store}):""])]):""]}).concat(this._self.$parent.$slots.append).concat(e("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"},[]))])])},watch:{"store.states.hoverRow":function(e,t){if(this.store.states.isComplex){var i=this.$el;if(i){var n=i.querySelectorAll("tbody > tr"),s=n[t],o=n[e];s&&s.classList.remove("hover-row"),o&&o.classList.add("hover-row")}}},"store.states.currentRow":function(e,t){if(this.highlight){var i=this.$el;if(i){var n=this.store.states.data,s=i.querySelectorAll("tbody > tr"),o=s[n.indexOf(t)],a=s[n.indexOf(e)];o?o.classList.remove("current-row"):s&&[].forEach.call(s,function(e){return e.classList.remove("current-row")}),a&&a.classList.add("current-row")}}}},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=(0,d.default)(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?(0,s.getRowIdentity)(e,i):t},isColumnHidden:function(e){return this.fixed===!0||"left"===this.fixed?e>=this.leftFixedCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedCount:e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount},getRowStyle:function(e,t){var i=this.rowStyle;return"function"==typeof i?i.call(null,e,t):i},getRowClass:function(e,t){var i=[],n=this.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,e,t)||""),i.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=(0,s.getCell)(e);if(n){var a=(0,s.getColumnByCell)(i,n),r=i.hoverState={cell:n,column:a,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var l=e.target.querySelector(".cell");if((0,o.hasClass)(l,"el-tooltip")&&l.scrollWidth>l.offsetWidth){var u=this.$refs.tooltip;this.tooltipContent=n.innerText,u.referenceElm=n,u.$refs.popper.style.display="none",u.doDestroy(),u.setExpectedState(!0),this.activateTooltip(u)}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;t&&(t.setExpectedState(!1),t.handleClosePopper());var i=(0,s.getCell)(e);if(i){var n=this.table.hoverState;this.table.$emit("cell-mouse-leave",n.row,n.column,n.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,o=(0,s.getCell)(e),a=void 0;o&&(a=(0,s.getColumnByCell)(n,o),a&&n.$emit("cell-"+i,t,a,o,e)),n.$emit("row-"+i,t,e,a)},handleExpandClick:function(e){this.store.commit("toggleRowExpanded",e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(730),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(635),r=n(a),l=i(731),u=i(2),c=n(u);t.default={name:"ElTooltip",mixins:[o.default],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new c.default({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=(0,r.default)(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;if(this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])])),!this.$slots.default||!this.$slots.default.length)return this.$slots.default;var i=(0,l.getFirstComponentChild)(this.$slots.default);if(!i)return i;var n=i.data=i.data||{},s=i.data.on=i.data.on||{};return s.mouseenter=this.addEventHandle(s.mouseenter,function(){t.setExpectedState(!0),t.handleShowPopper()}),s.mouseleave=this.addEventHandle(s.mouseleave,function(){t.setExpectedState(!1),t.debounceClose()}),n.staticClass=this.concatClass(n.staticClass,"el-tooltip"),i},mounted:function(){this.referenceElm=this.$el},methods:{addEventHandle:function(e,t){return e?Array.isArray(e)?e.concat(t):[e,t]:t},concatClass:function(e,t){return e&&e.indexOf(t)>-1?e:e?t?e+" "+t:e:t||""},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.showPopper=!1)},setExpectedState:function(e){this.expectedState=e}}}},function(e,t,i){"use strict";function n(e){return"object"===("undefined"==typeof e?"undefined":o(e))&&(0,a.hasOwn)(e,"componentOptions")}function s(e){return e&&e.filter(function(e){return e&&e.tag})[0]}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.isVNode=n,t.getFirstComponentChild=s;var a=i(19)},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(702),o=n(s),a=i(626),r=n(a),l=i(2),u=n(l),c=i(733),d=n(c),h=function e(t){var i=[];return t.forEach(function(t){t.children?(i.push(t),i.push.apply(i,e(t.children))):i.push(t)}),i},f=function(e){var t=1,i=function e(i,n){if(n&&(i.level=n.level+1,t<i.level&&(t=i.level)),i.children){var s=0;i.children.forEach(function(t){e(t,i),s+=t.colSpan}),i.colSpan=s}else i.colSpan=1};e.forEach(function(e){e.level=1,i(e)});for(var n=[],s=0;s<t;s++)n.push([]);var o=h(e);return o.forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=t-e.level+1,n[e.level-1].push(e)}),n};t.default={name:"ElTableHeader",render:function(e){var t=this,i=this.store.states.originColumns,n=f(i,this.columns);return e("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])}),!this.fixed&&this.layout.gutterWidth?e("col",{attrs:{name:"gutter",width:this.layout.scrollY?this.layout.gutterWidth:""}},[]):""]),e("thead",null,[this._l(n,function(i,n){return e("tr",null,[t._l(i,function(s,o){return e("th",{attrs:{colspan:s.colSpan,rowspan:s.rowSpan},on:{mousemove:function(e){return t.handleMouseMove(e,s)},mouseout:t.handleMouseOut,mousedown:function(e){return t.handleMouseDown(e,s)},click:function(e){return t.handleHeaderClick(e,s)}},class:[s.id,s.order,s.headerAlign,s.className||"",0===n&&t.isCellHidden(o,i)?"is-hidden":"",s.children?"":"is-leaf",s.labelClassName]},[e("div",{class:["cell",s.filteredValue&&s.filteredValue.length>0?"highlight":"",s.labelClassName]},[s.renderHeader?s.renderHeader.call(t._renderProxy,e,{column:s,$index:o,store:t.store,_self:t.$parent.$vnode.context}):s.label,s.sortable?e("span",{class:"caret-wrapper",on:{click:function(e){return t.handleSortClick(e,s)}}},[e("i",{class:"sort-caret ascending",on:{click:function(e){return t.handleSortClick(e,s,"ascending")}}},[]),e("i",{class:"sort-caret descending",on:{click:function(e){return t.handleSortClick(e,s,"descending")}}},[])]):"",s.filterable?e("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return t.handleFilterClick(e,s)}}},[e("i",{class:["el-icon-arrow-down",s.filterOpened?"el-icon-arrow-up":""]},[])]):""])])}),!t.fixed&&t.layout.gutterWidth?e("th",{class:"gutter",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0"}},[]):""])})])])},props:{fixed:String,store:{required:!0},layout:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:o.default,ElTag:r.default},computed:{isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},created:function(){this.filterPanels={}},mounted:function(){var e=this;this.defaultSort.prop&&!function(){var t=e.store.states;t.sortProp=e.defaultSort.prop,t.sortOrder=e.defaultSort.order||"ascending",e.$nextTick(function(i){for(var n=0,s=e.columns.length;n<s;n++){var o=e.columns[n];if(o.property===t.sortProp){o.order=t.sortOrder,t.sortingColumn=o;break}}t.sortingColumn&&e.store.commit("changeSortCondition")})}()},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){if(this.fixed===!0||"left"===this.fixed)return e>=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;return i<this.columnsCount-this.rightFixedCount}return e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n=i.parentNode,s=this.$parent,o=this.filterPanels[t.id];return o&&t.filterOpened?void(o.showPopper=!1):(o||(o=new u.default(d.default),this.filterPanels[t.id]=o,o.table=s,o.cell=n,o.column=t,!this.$isServer&&o.$mount(document.createElement("div"))),void setTimeout(function(){o.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filters&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleMouseDown:function(e,t){var i=this;this.$isServer||t.children&&t.children.length>0||this.draggingColumn&&this.border&&!function(){i.dragging=!0,i.$parent.resizeProxyVisible=!0;var n=i.$parent,s=n.$el,o=s.getBoundingClientRect().left,a=i.$el.querySelector("th."+t.id),r=a.getBoundingClientRect(),l=r.left-o+30;a.classList.add("noclick"),i.dragState={startMouseLeft:e.clientX,startLeft:r.right-o,startColumnLeft:r.left-o,tableLeft:o};var u=n.$refs.resizeProxy;u.style.left=i.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var c=function(e){var t=e.clientX-i.dragState.startMouseLeft,n=i.dragState.startLeft+t;u.style.left=Math.max(l,n)+"px"},d=function s(){if(i.dragging){var o=i.dragState,r=o.startColumnLeft,l=o.startLeft,d=parseInt(u.style.left,10),h=d-r;t.width=t.realWidth=h,n.$emit("header-dragend",t.width,l-r,t,e),i.store.scheduleLayout(),document.body.style.cursor="",i.dragging=!1,i.draggingColumn=null,i.dragState={},n.resizeProxyVisible=!1}document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",s),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){a.classList.remove("noclick")},0)};document.addEventListener("mousemove",c),document.addEventListener("mouseup",d)}()},handleMouseMove:function(e,t){if(!(t.children&&t.children.length>0)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),s=document.body.style;n.width>12&&n.right-e.pageX<8?(s.cursor="col-resize",this.draggingColumn=t):this.dragging||(s.cursor="",this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){return e?"ascending"===e?"descending":null:"ascending"},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=i||this.toggleOrder(t.order),s=e.target;s&&"TH"!==s.tagName;)s=s.parentNode;if(s&&"TH"===s.tagName&&s.classList.contains("noclick"))return void s.classList.remove("noclick");if(t.sortable){var o=this.store.states,a=o.sortProp,r=void 0,l=o.sortingColumn;l!==t&&(l&&(l.order=null),o.sortingColumn=t,a=t.property),n?r=t.order=n:(r=t.order=null,o.sortingColumn=null,a=null),o.sortProp=a,o.sortOrder=r,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}}},function(e,t,i){var n=i(13)(i(734),i(736),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(618),r=i(608),l=n(r),u=i(636),c=n(u),d=i(735),h=n(d),f=i(702),p=n(f),m=i(710),v=n(m);t.default={name:"ElTableFilterPanel",mixins:[o.default,l.default],directives:{Clickoutside:c.default},components:{ElCheckbox:p.default,ElCheckboxGroup:v.default},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"},[]),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){this.showPopper=!1},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){this.filterValue=e,"undefined"!=typeof e&&null!==e?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e})}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&("undefined"!=typeof e&&null!==e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column?this.column.filteredValue||[]:[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var e=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){e.updatePopper()}),this.$watch("showPopper",function(t){e.column&&(e.column.filterOpened=t),t?h.default.open(e):h.default.close(e)})},watch:{showPopper:function(e){e===!0&&parseInt(this.popperJS._popper.style.zIndex,10)<a.PopupManager.zIndex&&(this.popperJS._popper.style.zIndex=a.PopupManager.nextZIndex())}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=[];!o.default.prototype.$isServer&&document.addEventListener("click",function(e){a.forEach(function(t){var i=e.target;t&&t.$el&&(i===t.$el||t.$el.contains(i)||t.handleOutsideClick&&t.handleOutsideClick(e))})}),t.default={open:function(e){e&&a.push(e)},close:function(e){var t=a.indexOf(e);t!==-1&&a.splice(e,1)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"}},[e.multiple?i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[i("div",{staticClass:"el-table-filter__content"},[i("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:e.filteredValue,callback:function(t){e.filteredValue=t},expression:"filteredValue"}},e._l(e.filters,function(t){return i("el-checkbox",{key:t.value,attrs:{label:t.value}},[e._v(e._s(t.text))])}))],1),i("div",{staticClass:"el-table-filter__bottom"},[i("button",{class:{"is-disabled":0===e.filteredValue.length},attrs:{disabled:0===e.filteredValue.length},on:{click:e.handleConfirm}},[e._v(e._s(e.t("el.table.confirmFilter")))]),i("button",{on:{click:e.handleReset}},[e._v(e._s(e.t("el.table.resetFilter")))])])]):i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[i("ul",{staticClass:"el-table-filter__list"},[i("li",{staticClass:"el-table-filter__list-item",class:{"is-active":!e.filterValue},on:{click:function(t){e.handleSelect(null)}}},[e._v(e._s(e.t("el.table.clearFilter")))]),e._l(e.filters,function(t){return i("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":e.isActive(t)},attrs:{label:t.value},on:{click:function(i){e.handleSelect(t.value)}}},[e._v(e._s(t.text))])})],2)])])},staticRenderFns:[]}},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTableFooter",render:function(e){var t=this,i=[];return this.columns.forEach(function(e,n){if(0===n)return void(i[n]=t.sumText);var s=t.store.states.data.map(function(t){return Number(t[e.property])}),o=[],a=!0;s.forEach(function(e){if(!isNaN(e)){a=!1;
+var t=(""+e).split(".")[1];o.push(t?t.length:0)}});var r=Math.max.apply(null,o);a?i[n]="":i[n]=s.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(r))},0)}),e("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])}),!this.fixed&&this.layout.gutterWidth?e("col",{attrs:{name:"gutter",width:this.layout.scrollY?this.layout.gutterWidth:""}},[]):""]),e("tbody",null,[e("tr",null,[this._l(this.columns,function(n,s){return e("td",{attrs:{colspan:n.colSpan,rowspan:n.rowSpan},class:[n.id,n.headerAlign,n.className||"",t.isCellHidden(s,t.columns)?"is-hidden":"",n.children?"":"is-leaf",n.labelClassName]},[e("div",{class:["cell",n.labelClassName]},[t.summaryMethod?t.summaryMethod({columns:t.columns,data:t.store.states.data})[s]:i[s]])])}),!this.fixed&&this.layout.gutterWidth?e("td",{class:"gutter",style:{width:this.layout.scrollY?this.layout.gutterWidth+"px":"0"}},[]):""])])])},props:{fixed:String,store:{required:!0},layout:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},methods:{isCellHidden:function(e,t){if(this.fixed===!0||"left"===this.fixed)return e>=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;return i<this.columnsCount-this.rightFixedCount}return e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-table",class:{"el-table--fit":e.fit,"el-table--striped":e.stripe,"el-table--border":e.border,"el-table--fluid-height":e.maxHeight,"el-table--enable-row-hover":!e.store.states.isComplex,"el-table--enable-row-transition":!0},on:{mouseleave:function(t){e.handleMouseLeave(t)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[e._t("default")],2),e.showHeader?i("div",{ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"default-sort":e.defaultSort}})],1):e._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",style:[e.bodyHeight]},[i("table-body",{style:{width:e.bodyWidth},attrs:{context:e.context,store:e.store,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}}),e.data&&0!==e.data.length?e._e():i("div",{staticClass:"el-table__empty-block",style:{width:e.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[e._t("empty",[e._v(e._s(e.emptyText||e.t("el.table.emptyText")))])],2)])],1),e.showSummary&&e.data&&e.data.length>0?i("div",{ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,"default-sort":e.defaultSort}})],1):e._e(),e.fixedColumns.length>0?i("div",{ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",store:e.store,layout:e.layout,highlight:e.highlightCurrentRow,"row-class-name":e.rowClassName,"row-style":e.rowStyle}})],1),e.showSummary&&e.data&&e.data.length>0?i("div",{ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},{right:e.layout.scrollY?(e.border?e.layout.gutterWidth:e.layout.gutterWidth||1)+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",store:e.store,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}})],1),e.showSummary&&e.data&&e.data.length>0?i("div",{ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{staticClass:"el-table__fixed-right-patch",style:{width:e.layout.scrollY?e.layout.gutterWidth+"px":"0",height:e.layout.headerHeight+"px"}}):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:e.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(740),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(null==e)throw new TypeError("Cannot destructure undefined")}t.__esModule=!0;var o=i(702),a=n(o),r=i(626),l=n(r),u=i(613),c=n(u),d=i(726),h=1,f={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},p={selection:{renderHeader:function(e){return e("el-checkbox",{nativeOn:{click:this.toggleAllSelection},attrs:{value:this.isAllSelected}},[])},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,o=t.$index;return e("el-checkbox",{attrs:{value:s.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,o)},on:{input:function(){s.commit("rowSelectedChanged",i)}}},[])},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){var i=t.column;return i.label||"#"},renderCell:function(e,t){var i=t.$index;return e("div",null,[i+1])},sortable:!1},expand:{renderHeader:function(e,t){return s(t),""},renderCell:function(e,t,i){var n=t.row,s=t.store,o=s.states.expandRows.indexOf(n)>-1;return e("div",{class:"el-table__expand-icon "+(o?"el-table__expand-icon--expanded":""),on:{click:function(){return i.handleExpandClick(n)}}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},m=function(e,t){var i={};(0,c.default)(i,f[e||"default"]);for(var n in t)if(t.hasOwnProperty(n)){var s=t[n];"undefined"!=typeof s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=i.width||i.minWidth,i},v=function(e,t){var i=t.row,n=t.column,s=n.property;return n&&n.formatter?n.formatter(i,n):s&&s.indexOf(".")===-1?i[s]:(0,d.getValueByPath)(i,s)};t.default={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterMultiple:{type:Boolean,default:!0}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:a.default,ElTag:l.default},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},created:function(){var e=this;this.customRender=this.$options.render,this.$options.render=function(t){return t("div",e.$slots.default)},this.columnId=(this.$parent.tableId||this.$parent.columnId+"_")+"column_"+h++;var t=this.$parent,i=this.owner;this.isSubColumn=i!==t;var n=this.type,s=this.width;void 0!==s&&(s=parseInt(s,10),isNaN(s)&&(s=null));var o=this.minWidth;void 0!==o&&(o=parseInt(o,10),isNaN(o)&&(o=80));var a=!1,r=m(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:o,width:s,isColumnGroup:a,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[]});(0,c.default)(r,p[n]||{}),this.columnConfig=r;var l=r.renderCell,u=this;return"expand"===n?(i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(r.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])})):void(r.renderCell=function(e,t){return u.$vnode.data.inlineTemplate?l=function(){if(t._self=u.context||t._self,"[object Object]"===Object.prototype.toString.call(t._self))for(var e in t._self)t.hasOwnProperty(e)||(t[e]=t._self[e]);return t._staticTrees=u._staticTrees,t.$options.staticRenderFns=u.$options.staticRenderFns,u.customRender.call(t)}:u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=v),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip"},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])})},destroyed:function(){this.$parent&&this.owner.store.commit("removeColumn",this.columnConfig)},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e?e:this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=e,this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=e,this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout())},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)}},mounted:function(){var e=this.owner,t=this.$parent,i=void 0;i=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),e.store.commit("insertColumn",this.columnConfig,i,this.isSubColumn?t.columnConfig:null)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(742),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(743),o=n(s),a=i(747),r=n(a),l=i(765),u=n(l),c=function(e){return"daterange"===e||"datetimerange"===e?u.default:r.default};t.default={mixins:[o.default],name:"ElDatePicker",props:{type:{type:String,default:"date"}},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=c(e),this.mountPicker()):this.panel=c(e)}},created:function(){this.panel=c(this.type)}}},function(e,t,i){var n=i(13)(i(744),i(746),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(636),r=n(a),l=i(745),u=i(617),c=n(u),d=i(607),h=n(d),f=i(609),p=n(f),m={props:{appendToBody:c.default.props.appendToBody,offset:c.default.props.offset,boundariesPadding:c.default.props.boundariesPadding},methods:c.default.methods,data:c.default.data,beforeDestroy:c.default.beforeDestroy},v={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},g=["date","datetime","time","time-select","week","month","year","daterange","timerange","datetimerange"],y=function(e,t){return(0,l.formatDate)(e,t)},b=function(e,t){return(0,l.parseDate)(e,t)},_=function(e,t,i){if(Array.isArray(e)&&2===e.length){var n=e[0],s=e[1];if(n&&s)return(0,l.formatDate)(n,t)+i+(0,l.formatDate)(s,t)}return""},C=function(e,t,i){var n=e.split(i);if(2===n.length){var s=n[0],o=n[1];return[(0,l.parseDate)(s,t),(0,l.parseDate)(o,t)]}return[]},x={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=(0,l.formatDate)(e,t),n=(0,l.getWeekNumber)(e);return i=/WW/.test(i)?i.replace(/WW/,n<10?"0"+n:n):i.replace(/W/,n)},parser:function(e){var t=(e||"").split("w");if(2===t.length){var i=Number(t[0]),n=Number(t[1]);if(!isNaN(i)&&!isNaN(n)&&n<54)return e}return null}},date:{formatter:y,parser:b},datetime:{formatter:y,parser:b},daterange:{formatter:_,parser:C},datetimerange:{formatter:_,parser:C},timerange:{formatter:_,parser:C},time:{formatter:y,parser:b},month:{formatter:y,parser:b},year:{formatter:y,parser:b},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}}},w={left:"bottom-start",center:"bottom-center",right:"bottom-end"};t.default={mixins:[h.default,m],props:{size:String,format:String,readonly:Boolean,placeholder:String,disabled:Boolean,clearable:{type:Boolean,default:!0},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},rangeSeparator:{default:" - "},pickerOptions:{}},components:{ElInput:p.default},directives:{Clickoutside:r.default},data:function(){return{pickerVisible:!1,showClose:!1,currentValue:"",unwatchPickerOptions:null}},watch:{pickerVisible:function(e){e||this.dispatch("ElFormItem","el.form.blur"),this.readonly||this.disabled||(e?this.showPicker():this.hidePicker())},currentValue:function(e){e||(this.picker&&"function"==typeof this.picker.handleClear?this.picker.handleClear():this.$emit("input"))},value:{immediate:!0,handler:function(e){this.currentValue=(0,l.isDate)(e)?new Date(e):e}},displayValue:function(e){this.$emit("change",e),this.dispatch("ElFormItem","el.form.change")}},computed:{reference:function(){return this.$refs.reference.$el},refInput:function(){return this.reference?this.reference.querySelector("input"):{}},valueIsEmpty:function(){var e=this.currentValue;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.type.indexOf("time")!==-1?"el-icon-time":"el-icon-date"},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"day"},haveTrigger:function(){return"undefined"!=typeof this.showTrigger?this.showTrigger:g.indexOf(this.type)!==-1},displayValue:{get:function(){var e=this.currentValue;if(e){var t=(x[this.type]||x.default).formatter,i=v[this.type];return t(e,this.format||i,this.rangeSeparator)}},set:function(e){if(e){var t=this.type,i=(x[t]||x.default).parser,n=i(e,this.format||v[t],this.rangeSeparator);n&&this.picker&&(this.picker.value=n)}else this.$emit("input",e),this.picker.value=e;this.$forceUpdate()}}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=w[this.align]||w.left},methods:{handleMouseEnterIcon:function(){this.readonly||this.disabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleClickIcon:function(){this.readonly||this.disabled||(this.showClose?(this.currentValue="",this.showClose=!1):this.pickerVisible=!this.pickerVisible)},dateChanged:function(e,t){if(Array.isArray(e)){var i=e.length;if(!t)return!0;for(;i--;)if(!(0,l.equalDate)(e[i],t[i]))return!0}else if(!(0,l.equalDate)(e,t))return!0;return!1},handleClose:function(){this.pickerVisible=!1},handleFocus:function(){var e=this.type;g.indexOf(e)===-1||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleBlur:function(){this.$emit("blur",this)},handleKeydown:function(e){var t=e.keyCode;9===t&&(this.pickerVisible=!1)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.currentValue instanceof Date?this.picker.date=new Date(this.currentValue.getTime()):this.picker.value=this.currentValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.ajustScrollTop&&e.picker.ajustScrollTop()}))},mountPicker:function(){var e=this;this.panel.defaultValue=this.currentValue,this.picker=new o.default(this.panel).$mount(),this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.format&&(this.picker.format=this.format);var t=function(){var t=e.pickerOptions;t&&t.selectableRange&&!function(){var i=t.selectableRange,n=x.datetimerange.parser,s=v.timerange;i=Array.isArray(i)?i:[i],e.picker.selectableRange=i.map(function(t){return n(t,s,e.rangeSeparator)})}();for(var i in t)t.hasOwnProperty(i)&&"selectableRange"!==i&&(e.picker[i]=t[i])};t(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return t()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];e.$emit("input",t),e.pickerVisible=e.picker.visible=i,e.picker.resetView&&e.picker.resetView()}),this.picker.$on("select-range",function(t,i){e.refInput.setSelectionRange(t,i),e.refInput.focus()})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.limitRange=t.getRangeHours=t.nextMonth=t.prevMonth=t.getWeekNumber=t.getStartDateOfMonth=t.DAY_DURATION=t.getFirstDayOfMonth=t.getDayCountOfMonth=t.parseDate=t.formatDate=t.isDate=t.toDate=t.equalDate=void 0;var s=i(78),o=n(s),a=function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i},r=(t.equalDate=function(e,t){return e===t||new Date(e).getTime()===new Date(t).getTime()},t.toDate=function(e){return l(e)?new Date(e):null}),l=t.isDate=function(e){return null!==e&&void 0!==e&&!isNaN(new Date(e).getTime())},u=(t.formatDate=function(e,t){return e=r(e),e?o.default.format(e,t||"yyyy-MM-dd"):""},t.parseDate=function(e,t){return o.default.parse(e,t||"yyyy-MM-dd")},t.getDayCountOfMonth=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4===0&&e%100!==0||e%400===0?29:28:31}),c=(t.getFirstDayOfMonth=function(e){var t=new Date(e.getTime());return t.setDate(1),t.getDay()},t.DAY_DURATION=864e5);t.getStartDateOfMonth=function(e,t){var i=new Date(e,t,1),n=i.getDay();return 0===n?i.setTime(i.getTime()-7*c):i.setTime(i.getTime()-c*n),i},t.getWeekNumber=function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)},t.prevMonth=function(e){var t=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=0===i?t-1:t,o=0===i?11:i-1,a=u(s,o);return a<n&&e.setDate(a),e.setMonth(o),e.setFullYear(s),new Date(e.getTime())},t.nextMonth=function(e){var t=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=11===i?t+1:t,o=11===i?0:i+1,a=u(s,o);return a<n&&e.setDate(a),e.setMonth(o),e.setFullYear(s),new Date(e.getTime())},t.getRangeHours=function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(a(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=i.indexOf(n)===-1;else for(var s=0;s<24;s++)t[s]=!1;return t},t.limitRange=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"yyyy-MM-dd HH:mm:ss";if(!t||!t.length)return e;var n=t.length;e=o.default.parse(o.default.format(e,i),i);for(var s=0;s<n;s++){var a=t[s];if(e>=a[0]&&e<=a[1])return e}var r=t[0][0],l=t[0][0];return t.forEach(function(e){l=new Date(Math.min(e[0],l)),r=new Date(Math.max(e[1],r))}),e<l?l:r}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("el-input",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+e.type,attrs:{readonly:!e.editable||e.readonly,disabled:e.disabled,size:e.size,placeholder:e.placeholder,value:e.displayValue,validateEvent:!1},on:{focus:e.handleFocus,blur:e.handleBlur},nativeOn:{keydown:function(t){e.handleKeydown(t)},change:function(t){e.displayValue=t.target.value}}},[e.haveTrigger?i("i",{staticClass:"el-input__icon",class:[e.showClose?"el-icon-close":e.triggerClass],on:{click:e.handleClickIcon,mouseenter:e.handleMouseEnterIcon,mouseleave:function(t){e.showClose=!1}},slot:"icon"}):e._e()])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(748),i(764),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o),r=i(609),l=n(r),u=i(749),c=n(u),d=i(755),h=n(d),f=i(758),p=n(f),m=i(761),v=n(m);t.default={mixins:[a.default],watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var i=t.$refs.input.$el;i&&(t.pickerWidth=i.getBoundingClientRect().width+10)})},value:function(e){if(e&&(e=new Date(e),!isNaN(e))){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(e)))return;this.date=e,this.year=e.getFullYear(),this.month=e.getMonth(),this.$emit("pick",e,!0)}},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.ajustScrollTop()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"week"===e&&(this.week=(0,s.getWeekNumber)(this.date))},date:function(e){this.year=e.getFullYear(),this.month=e.getMonth()}},methods:{handleClear:function(){this.date=this.$options.defaultValue?new Date(this.$options.defaultValue):new Date,this.$emit("pick")},resetDate:function(){this.date=new Date(this.date)},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.month--,this.month<0&&(this.month=11,this.year--)},nextMonth:function(){this.month++,this.month>11&&(this.month=0,this.year++)},nextYear:function(){"year"===this.currentView?this.$refs.yearTable.nextTenYear():(this.year++,this.date.setFullYear(this.year),this.resetDate())},prevYear:function(){"year"===this.currentView?this.$refs.yearTable.prevTenYear():(this.year--,this.date.setFullYear(this.year),this.resetDate())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(e){var n=new Date(this.date.getTime()),s=e.getHours(),o=e.getMinutes(),a=e.getSeconds();n.setHours(s),n.setMinutes(o),n.setSeconds(a),this.date=new Date(n.getTime())}i||(this.timePickerVisible=t)},handleMonthPick:function(e){this.month=e;var t=this.selectionMode;if("month"!==t)this.date.setMonth(e),this.currentView="date",this.resetDate();else{this.date.setMonth(e),this.year&&this.date.setFullYear(this.year),this.resetDate();var i=new Date(this.date.getFullYear(),e,1);this.$emit("pick",i)}},handleDatePick:function(e){"day"===this.selectionMode?(this.showTime||this.$emit("pick",new Date(e.getTime())),this.date.setFullYear(e.getFullYear()),this.date.setMonth(e.getMonth(),e.getDate())):"week"===this.selectionMode&&(this.week=e.week,this.$emit("pick",e.date)),this.resetDate()},handleYearPick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.year=e,t&&(this.date.setFullYear(e),"year"===this.selectionMode?this.$emit("pick",new Date(e)):this.currentView="month",this.resetDate())},changeToNow:function(){this.date.setTime(+new Date),this.$emit("pick",new Date(this.date.getTime())),this.resetDate()},confirm:function(){this.$emit("pick",this.date)},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date","week"!==this.selectionMode&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())}},components:{TimePicker:c.default,YearTable:h.default,MonthTable:p.default,DateTable:v.default,ElInput:l.default},mounted:function(){this.date&&!this.year&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())},data:function(){return{popperClass:"",pickerWidth:0,date:this.$options.defaultValue?new Date(this.$options.defaultValue):new Date,value:"",showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",firstDayOfWeek:7,year:null,month:null,week:null,showWeekNumber:!1,timePickerVisible:!1,width:0,format:""}},computed:{footerVisible:function(){return this.showTime},visibleTime:{get:function(){return(0,s.formatDate)(this.date,this.timeFormat)},set:function(e){if(e){var t=(0,s.parseDate)(e,this.timeFormat);t&&(t.setFullYear(this.date.getFullYear()),t.setMonth(this.date.getMonth()),t.setDate(this.date.getDate()),this.date=t,this.$refs.timepicker.value=t,this.timePickerVisible=!1)}}},visibleDate:{get:function(){return(0,s.formatDate)(this.date)},set:function(e){var t=(0,s.parseDate)(e,"yyyy-MM-dd");t&&("function"==typeof this.disabledDate&&this.disabledDate(t)||(t.setHours(this.date.getHours()),t.setMinutes(this.date.getMinutes()),t.setSeconds(this.date.getSeconds()),this.date=t,this.resetView()))}},yearLabel:function(){var e=this.year;if(!e)return"";var t=this.t("el.datepicker.year");if("year"===this.currentView){var i=10*Math.floor(e/10);return t?i+" "+t+" - "+(i+9)+" "+t:i+" - "+(i+9)}return this.year+" "+t},timeFormat:function(){return this.format&&this.format.indexOf("ss")===-1?"HH:mm":"HH:mm:ss"}}}},function(e,t,i){var n=i(13)(i(750),i(754),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o);t.default={mixins:[a.default],components:{TimeSpinner:i(751)},props:{pickerWidth:{},date:{default:function(){return new Date}},visible:Boolean},watch:{visible:function(e){this.currentVisible=e},pickerWidth:function(e){this.width=e},value:function(e){var t=this,i=void 0;e instanceof Date?i=(0,s.limitRange)(e,this.selectableRange):e||(i=new Date),this.handleChange({hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds()}),this.$nextTick(function(e){return t.ajustScrollTop()})},selectableRange:function(e){this.$refs.spinner.selectableRange=e}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",hours:0,minutes:0,seconds:0,selectableRange:[],currentDate:this.$options.defaultValue||this.date||new Date,currentVisible:this.visible||!1,width:this.pickerWidth||0}},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1}},methods:{handleClear:function(){this.$emit("pick")},handleCancel:function(){this.$emit("pick")},handleChange:function(e){void 0!==e.hours&&(this.currentDate.setHours(e.hours),this.hours=this.currentDate.getHours()),void 0!==e.minutes&&(this.currentDate.setMinutes(e.minutes),this.minutes=this.currentDate.getMinutes()),void 0!==e.seconds&&(this.currentDate.setSeconds(e.seconds),this.seconds=this.currentDate.getSeconds()),this.handleConfirm(!0)},setSelectionRange:function(e,t){this.$emit("select-range",e,t)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=new Date((0,s.limitRange)(this.currentDate,this.selectableRange,"HH:mm:ss"));this.$emit("pick",i,e,t)}},ajustScrollTop:function(){return this.$refs.spinner.ajustScrollTop()}},created:function(){this.hours=this.currentDate.getHours(),this.minutes=this.currentDate.getMinutes(),this.seconds=this.currentDate.getSeconds()},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}}},function(e,t,i){var n=i(13)(i(752),i(753),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(630),a=n(o),r=i(635),l=n(r);t.default={components:{ElScrollbar:a.default},props:{hours:{type:Number,default:0},minutes:{type:Number,default:0},seconds:{type:Number,default:0},showSeconds:{type:Boolean,default:!0}},watch:{hoursPrivate:function(e,t){e>=0&&e<=23||(this.hoursPrivate=t),this.ajustElTop("hour",e),this.$emit("change",{hours:e})},minutesPrivate:function(e,t){e>=0&&e<=59||(this.minutesPrivate=t),this.ajustElTop("minute",e),this.$emit("change",{minutes:e})},secondsPrivate:function(e,t){e>=0&&e<=59||(this.secondsPrivate=t),this.ajustElTop("second",e),this.$emit("change",{seconds:e})}},computed:{hoursList:function(){return(0,s.getRangeHours)(this.selectableRange)},hourEl:function(){return this.$refs.hour.wrap},minuteEl:function(){return this.$refs.minute.wrap},secondEl:function(){return this.$refs.second.wrap}},data:function(){return{hoursPrivate:0,minutesPrivate:0,secondsPrivate:0,selectableRange:[]}},created:function(){var e=this;this.debounceAjustElTop=(0,l.default)(100,function(t){return e.ajustElTop(t,e[t+"s"])})},mounted:function(){var e=this;this.$nextTick(function(){e.bindScrollEvent()})},methods:{handleClick:function(e,t,i){t.disabled||(this[e+"Private"]=t.value>=0?t.value:t,this.emitSelectRange(e))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8)},bindScrollEvent:function(){
+var e=this,t=function(t){e[t+"El"].onscroll=function(i){return e.handleScroll(t,i)}};t("hour"),t("minute"),t("second")},handleScroll:function(e){var t={};t[e+"s"]=Math.min(Math.floor((this[e+"El"].scrollTop-80)/32+3),59),this.debounceAjustElTop(e),this.$emit("change",t)},ajustScrollTop:function(){this.ajustElTop("hour",this.hours),this.ajustElTop("minute",this.minutes),this.ajustElTop("second",this.seconds)},ajustElTop:function(e,t){this[e+"El"].scrollTop=Math.max(0,32*(t-2.5)+80)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-time-spinner",class:{"has-seconds":e.showSeconds}},[i("el-scrollbar",{ref:"hour",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("hours")}}},e._l(e.hoursList,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.hours,disabled:t},attrs:{"track-by":"hour"},domProps:{textContent:e._s(n)},on:{click:function(i){e.handleClick("hours",{value:n,disabled:t},!0)}}})})),i("el-scrollbar",{ref:"minute",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("minutes")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.minutes},domProps:{textContent:e._s(n)},on:{click:function(t){e.handleClick("minutes",n,!0)}}})})),i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],ref:"second",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("seconds")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.seconds},domProps:{textContent:e._s(n)},on:{click:function(t){e.handleClick("seconds",n,!0)}}})}))],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.currentVisible,expression:"currentVisible"}],staticClass:"el-time-panel",class:e.popperClass,style:{width:e.width+"px"}},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"show-seconds":e.showSeconds,hours:e.hours,minutes:e.minutes,seconds:e.seconds},on:{change:e.handleChange,"select-range":e.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:e.handleCancel}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button"},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(756),i(757),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71);t.default={props:{disabledDate:{},date:{},year:{}},computed:{startYear:function(){return 10*Math.floor(this.year/10)}},methods:{getCellStyle:function(e){var t={},i=new Date(this.date);return i.setFullYear(e),t.disabled="function"==typeof this.disabledDate&&this.disabledDate(i),t.current=Number(this.year)===e,t},nextTenYear:function(){this.$emit("pick",Number(this.year)+10,!1)},prevTenYear:function(){this.$emit("pick",Number(this.year)-10,!1)},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if((0,n.hasClass)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",i)}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(759),i(760),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(608),o=n(s),a=i(71);t.default={props:{disabledDate:{},date:{},month:{type:Number}},mixins:[o.default],methods:{getCellStyle:function(e){var t={},i=new Date(this.date);return i.setMonth(e),t.disabled="function"==typeof this.disabledDate&&this.disabledDate(i),t.current=this.month===e,t},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&!(0,a.hasClass)(t.parentNode,"disabled")){var i=t.parentNode.cellIndex,n=t.parentNode.parentNode.rowIndex,s=4*n+i;this.$emit("pick",s)}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-month-table",on:{click:e.handleMonthTableClick}},[i("tbody",[i("tr",[i("td",{class:e.getCellStyle(0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jan")))])]),i("td",{class:e.getCellStyle(1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.feb")))])]),i("td",{class:e.getCellStyle(2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.mar")))])]),i("td",{class:e.getCellStyle(3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.apr")))])])]),i("tr",[i("td",{class:e.getCellStyle(4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.may")))])]),i("td",{class:e.getCellStyle(5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jun")))])]),i("td",{class:e.getCellStyle(6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jul")))])]),i("td",{class:e.getCellStyle(7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.aug")))])])]),i("tr",[i("td",{class:e.getCellStyle(8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.sep")))])]),i("td",{class:e.getCellStyle(9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.oct")))])]),i("td",{class:e.getCellStyle(10)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.nov")))])]),i("td",{class:e.getCellStyle(11)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.dec")))])])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(762),i(763),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(71),a=i(608),r=n(a),l=["sun","mon","tue","wed","thu","fri","sat"],u=function(e){var t=new Date(e);return t.setHours(0,0,0,0),t.getTime()};t.default={mixins:[r.default],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return e>=1&&e<=7}},date:{},year:{},month:{},week:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1,row:null,column:null}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return e>3?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return l.concat(l).slice(e,e+7)},monthDate:function(){return this.date.getDate()},startDate:function(){return(0,s.getStartDateOfMonth)(this.year,this.month)},rows:function e(){var t=new Date(this.year,this.month,1),i=(0,s.getFirstDayOfMonth)(t),n=(0,s.getDayCountOfMonth)(t.getFullYear(),t.getMonth()),o=(0,s.getDayCountOfMonth)(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);i=0===i?7:i;for(var a=this.offsetDay,e=this.tableRows,r=1,l=void 0,c=this.startDate,d=this.disabledDate,h=u(new Date),f=0;f<6;f++){var p=e[f];this.showWeekNumber&&(p[0]||(p[0]={type:"week",text:(0,s.getWeekNumber)(new Date(c.getTime()+s.DAY_DURATION*(7*f+1)))}));for(var m=0;m<7;m++){var v=p[this.showWeekNumber?m+1:m];v||(v={row:f,column:m,type:"normal",inRange:!1,start:!1,end:!1}),v.type="normal";var g=7*f+m,y=c.getTime()+s.DAY_DURATION*(g-a);v.inRange=y>=u(this.minDate)&&y<=u(this.maxDate),v.start=this.minDate&&y===u(this.minDate),v.end=this.maxDate&&y===u(this.maxDate);var b=y===h;b&&(v.type="today"),f>=0&&f<=1?m+7*f>=i+a?(v.text=r++,2===r&&(l=7*f+m)):(v.text=o-(i+a-m%7)+1+7*f,v.type="prev-month"):r<=n?(v.text=r++,2===r&&(l=7*f+m)):(v.text=r++-n,v.type="next-month"),v.disabled="function"==typeof d&&d(new Date(y)),this.$set(p,this.showWeekNumber?m+1:m,v)}if("week"===this.selectionMode){var _=this.showWeekNumber?1:0,C=this.showWeekNumber?7:6,x=this.isWeekActive(p[_+1]);p[_].inRange=x,p[_].start=x,p[C].inRange=x,p[C].end=x}}return e.firstDayPosition=l,e}},watch:{"rangeState.endDate":function(e){this.markRange(e)},minDate:function(e,t){e&&!t?(this.rangeState.selecting=!0,this.markRange(e)):e?this.markRange():(this.rangeState.selecting=!1,this.markRange(e))},maxDate:function(e,t){e&&!t&&(this.rangeState.selecting=!1,this.markRange(e),this.$emit("pick",{minDate:this.minDate,maxDate:this.maxDate}))}},data:function(){return{tableRows:[[],[],[],[],[],[]]}},methods:{getCellClasses:function(e){var t=this.selectionMode,i=this.monthDate,n=[];return"normal"!==e.type&&"today"!==e.type||e.disabled?n.push(e.type):(n.push("available"),"today"===e.type&&n.push("today")),"day"!==t||"normal"!==e.type&&"today"!==e.type||Number(this.year)!==this.date.getFullYear()||this.month!==this.date.getMonth()||i!==Number(e.text)||n.push("current"),!e.inRange||"normal"!==e.type&&"today"!==e.type&&"week"!==this.selectionMode||(n.push("in-range"),e.start&&n.push("start-date"),e.end&&n.push("end-date")),e.disabled&&n.push("disabled"),n.join(" ")},getDateOfCell:function(e,t){var i=this.startDate;return new Date(i.getTime()+(7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay)*s.DAY_DURATION)},getCellByDate:function(e){var t=this.startDate,i=this.rows,n=(e-t)/s.DAY_DURATION,o=i[Math.floor(n/7)];return this.showWeekNumber?o[n%7+1]:o[n%7]},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();return"prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),(0,s.getWeekNumber)(t)===this.week},markRange:function(e){var t=this.startDate;e||(e=this.maxDate);for(var i=this.rows,n=this.minDate,o=0,a=i.length;o<a;o++)for(var r=i[o],l=0,c=r.length;l<c;l++)if(!this.showWeekNumber||0!==l){var d=r[l],h=7*o+l+(this.showWeekNumber?-1:0),f=t.getTime()+s.DAY_DURATION*(h-this.offsetDay);d.inRange=n&&f>=u(n)&&f<=u(e),d.start=n&&f===u(n.getTime()),d.end=e&&f===u(e.getTime())}},handleMouseMove:function(e){if(this.rangeState.selecting){this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:this.rangeState});var t=e.target;if("TD"===t.tagName){var i=t.cellIndex,n=t.parentNode.rowIndex-1,s=this.rangeState,o=s.row,a=s.column;o===n&&a===i||(this.rangeState.row=n,this.rangeState.column=i,this.rangeState.endDate=this.getDateOfCell(n,i))}}},handleClick:function(e){var t=e.target;if("TD"===t.tagName&&!(0,o.hasClass)(t,"disabled")&&!(0,o.hasClass)(t,"week")){var i=this.selectionMode;"week"===i&&(t=t.parentNode.cells[1]);var n=Number(this.year),a=Number(this.month),r=t.cellIndex,l=t.parentNode.rowIndex,u=this.rows[l-1][r],c=u.text,d=t.className,h=new Date(n,a,1);if(d.indexOf("prev")!==-1?(0===a?(n-=1,a=11):a-=1,h.setFullYear(n),h.setMonth(a)):d.indexOf("next")!==-1&&(11===a?(n+=1,a=0):a+=1,h.setFullYear(n),h.setMonth(a)),h.setDate(parseInt(c,10)),"range"===this.selectionMode){if(this.minDate&&this.maxDate){var f=new Date(h.getTime()),p=null;this.$emit("pick",{minDate:f,maxDate:p},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}else if(this.minDate&&!this.maxDate)if(h>=this.minDate){var m=new Date(h.getTime());this.rangeState.selecting=!1,this.$emit("pick",{minDate:this.minDate,maxDate:m})}else{var v=new Date(h.getTime());this.$emit("pick",{minDate:v,maxDate:this.maxDate},!1)}else if(!this.minDate){var g=new Date(h.getTime());this.$emit("pick",{minDate:g,maxDate:this.maxDate},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}}else if("day"===i)this.$emit("pick",h);else if("week"===i){var y=(0,s.getWeekNumber)(h),b=h.getFullYear()+"w"+y;this.$emit("pick",{year:h.getFullYear(),week:y,value:b,date:h})}}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===e.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:e.handleClick,mousemove:e.handleMouseMove}},[i("tbody",[i("tr",[e.showWeekNumber?i("th",[e._v(e._s(e.t("el.datepicker.week")))]):e._e(),e._l(e.WEEKS,function(t){return i("th",[e._v(e._s(e.t("el.datepicker.weeks."+t)))])})],2),e._l(e.rows,function(t){return i("tr",{staticClass:"el-date-table__row",class:{current:e.isWeekActive(t[1])}},e._l(t,function(t){return i("td",{class:e.getCellClasses(t),domProps:{textContent:e._s("today"===t.type?e.t("el.datepicker.today"):t.text)}})}))})],2)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass],style:{width:e.width+"px"}},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-picker__time-header"},[i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{attrs:{placeholder:e.t("el.datepicker.selectDate"),value:e.visibleDate,size:"small"},nativeOn:{change:function(t){e.visibleDate=t.target.value}}})],1),i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{ref:"input",attrs:{placeholder:e.t("el.datepicker.selectTime"),value:e.visibleTime,size:"small"},on:{focus:function(t){e.timePickerVisible=!e.timePickerVisible}},nativeOn:{change:function(t){e.visibleTime=t.target.value}}}),i("time-picker",{ref:"timepicker",attrs:{date:e.date,"picker-width":e.pickerWidth,visible:e.timePickerVisible},on:{pick:e.handleTimePick,mounted:function(t){e.$refs.timepicker.format=e.timeFormat}}})],1)]):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==e.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("span",{staticClass:"el-date-picker__header-label",on:{click:e.showYearPicker}},[e._v(e._s(e.yearLabel))]),i("span",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===e.currentView},on:{click:e.showMonthPicker}},[e._v(e._s(e.t("el.datepicker.month"+(e.month+1))))]),i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}})]),i("div",{staticClass:"el-picker-panel__content"},[i("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],attrs:{year:e.year,month:e.month,date:e.date,week:e.week,"selection-mode":e.selectionMode,"first-day-of-week":e.firstDayOfWeek,"disabled-date":e.disabledDate},on:{pick:e.handleDatePick}}),i("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===e.currentView,expression:"currentView === 'year'"}],ref:"yearTable",attrs:{year:e.year,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleYearPick}}),i("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===e.currentView,expression:"currentView === 'month'"}],attrs:{month:e.month,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleMonthPick}})],1)])],2),i("div",{directives:[{name:"show",rawName:"v-show",value:e.footerVisible&&"date"===e.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",attrs:{href:"JavaScript:"},on:{click:e.changeToNow}},[e._v(e._s(e.t("el.datepicker.now")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button"},on:{click:e.confirm}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(766),i(767),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o),r=i(749),l=n(r),u=i(761),c=n(u),d=i(609),h=n(d);t.default={mixins:[a.default],computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting)},leftLabel:function(){return this.date.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.date.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.date.getFullYear()},leftMonth:function(){return this.date.getMonth()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},minVisibleDate:function(){return this.minDate?(0,s.formatDate)(this.minDate):""},maxVisibleDate:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate):""},minVisibleTime:function(){return this.minDate?(0,s.formatDate)(this.minDate,"HH:mm:ss"):""},maxVisibleTime:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate,"HH:mm:ss"):""},rightDate:function(){var e=new Date(this.date),t=e.getMonth();return e.setDate(1),11===t?(e.setFullYear(e.getFullYear()+1),e.setMonth(0)):e.setMonth(t+1),e}},data:function(){return{popperClass:"",minPickerWidth:0,maxPickerWidth:0,date:new Date,minDate:"",maxDate:"",rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",value:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,width:0}},watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var i=t.$refs.minInput.$el,n=t.$refs.maxInput.$el;i&&(t.minPickerWidth=i.getBoundingClientRect().width+10),n&&(t.maxPickerWidth=n.getBoundingClientRect().width+10)})},minDate:function(){var e=this;this.$nextTick(function(){if(e.maxDate&&e.maxDate<e.minDate){var t="HH:mm:ss";e.$refs.maxTimePicker.selectableRange=[[(0,s.parseDate)((0,s.formatDate)(e.minDate,t),t),(0,s.parseDate)("23:59:59",t)]]}})},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.minTimePicker.ajustScrollTop()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.maxTimePicker.ajustScrollTop()})},value:function(e){e?Array.isArray(e)&&(this.minDate=e[0]?(0,s.toDate)(e[0]):null,this.maxDate=e[1]?(0,s.toDate)(e[1]):null,this.minDate&&(this.date=new Date(this.minDate)),this.handleConfirm(!0)):(this.minDate=null,this.maxDate=null)}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.handleConfirm(!1)},handleDateInput:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"yyyy-MM-dd");if(n){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(n)))return;var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setFullYear(n.getFullYear()),o.setMonth(n.getMonth(),n.getDate()))}},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateChange:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"yyyy-MM-dd");if(n){var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setFullYear(n.getFullYear()),o.setMonth(n.getMonth(),n.getDate())),"min"===t?o<this.maxDate&&(this.minDate=new Date(o.getTime())):o>this.minDate&&(this.maxDate=new Date(o.getTime()),this.minDate&&this.minDate>this.maxDate&&(this.minDate=null))}},handleTimeChange:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"HH:mm:ss");if(n){var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setHours(n.getHours()),o.setMinutes(n.getMinutes()),o.setSeconds(n.getSeconds())),"min"===t?o<this.maxDate&&(this.minDate=new Date(o.getTime())):o>this.minDate&&(this.maxDate=new Date(o.getTime())),this.$refs[t+"TimePicker"].value=o,this[t+"TimePickerVisible"]=!1}},handleRangePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.maxDate===e.maxDate&&this.minDate===e.minDate||(this.onPick&&this.onPick(e),this.maxDate=e.maxDate,this.minDate=e.minDate,t&&!this.showTime&&this.handleConfirm())},changeToToday:function(){this.date=new Date},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},resetView:function(){this.minTimePickerVisible=!1,this.maxTimePickerVisible=!1},setTime:function(e,t){var i=new Date(e.getTime()),n=t.getHours(),s=t.getMinutes(),o=t.getSeconds();return i.setHours(n),i.setMinutes(s),i.setSeconds(o),new Date(i.getTime())},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=this.setTime(this.minDate,e)),i||(this.minTimePickerVisible=t)},handleMaxTimePick:function(e,t,i){if(!this.maxDate){var n=new Date;n>=this.minDate&&(this.maxDate=new Date)}this.maxDate&&e&&(this.maxDate=this.setTime(this.maxDate,e)),i||(this.maxTimePickerVisible=t)},prevMonth:function(){this.date=(0,s.prevMonth)(this.date)},nextMonth:function(){this.date=(0,s.nextMonth)(this.date)},nextYear:function(){var e=this.date;e.setFullYear(e.getFullYear()+1),this.resetDate()},prevYear:function(){var e=this.date;e.setFullYear(e.getFullYear()-1),this.resetDate()},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.$emit("pick",[this.minDate,this.maxDate],e)},resetDate:function(){this.date=new Date(this.date)}},components:{TimePicker:l.default,DateTable:c.default,ElInput:h.default}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass],style:{width:e.width+"px"}},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-range-picker__time-header"},[i("span",{staticClass:"el-date-range-picker__editors-wrap"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startDate"),value:e.minVisibleDate},nativeOn:{input:function(t){e.handleDateInput(t,"min")},change:function(t){e.handleDateChange(t,"min")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startTime"),value:e.minVisibleTime},on:{focus:function(t){e.minTimePickerVisible=!e.minTimePickerVisible}},nativeOn:{change:function(t){e.handleTimeChange(t,"min")}}}),i("time-picker",{ref:"minTimePicker",attrs:{"picker-width":e.minPickerWidth,date:e.minDate,visible:e.minTimePickerVisible},on:{pick:e.handleMinTimePick}})],1)]),i("span",{staticClass:"el-icon-arrow-right"}),i("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endDate"),value:e.maxVisibleDate,readonly:!e.minDate},nativeOn:{input:function(t){e.handleDateInput(t,"max")},change:function(t){e.handleDateChange(t,"max")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"maxInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endTime"),value:e.maxVisibleTime,readonly:!e.minDate},on:{focus:function(t){e.minDate&&(e.maxTimePickerVisible=!e.maxTimePickerVisible)}},nativeOn:{change:function(t){e.handleTimeChange(t,"max")}}}),i("time-picker",{ref:"maxTimePicker",attrs:{"picker-width":e.maxPickerWidth,date:e.maxDate,visible:e.maxTimePickerVisible},on:{pick:e.handleMaxTimePick}})],1)])]):e._e(),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("div",[e._v(e._s(e.leftLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.date,year:e.leftYear,month:e.leftMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}}),i("div",[e._v(e._s(e.rightLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.rightDate,year:e.rightYear,month:e.rightMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1)])],2),e.showTime?i("div",{staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",on:{click:e.handleClear}},[e._v(e._s(e.t("el.datepicker.clear")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])]):e._e()])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(769),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(743),o=n(s),a=i(770),r=n(a);t.default={mixins:[o.default],name:"ElTimeSelect",beforeCreate:function(){this.type="time-select",this.panel=r.default}}},function(e,t,i){var n=i(13)(i(771),i(772),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(630),o=n(s),a=function(e){var t=e.split(":");if(t.length>=2){var i=parseInt(t[0],10),n=parseInt(t[1],10);return{hours:i,minutes:n}}return null},r=function(e,t){var i=a(e),n=a(t),s=i.minutes+60*i.hours,o=n.minutes+60*n.hours;return s===o?0:s>o?1:-1},l=function(e){return(e.hours<10?"0"+e.hours:e.hours)+":"+(e.minutes<10?"0"+e.minutes:e.minutes)},u=function(e,t){var i=a(e),n=a(t),s={hours:i.hours,minutes:i.minutes};return s.minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,l(s)};t.default={components:{ElScrollbar:o.default},watch:{value:function(e){e&&(this.minTime&&r(e,this.minTime)<0?this.$emit("pick"):this.maxTime&&r(e,this.maxTime)>0&&this.$emit("pick"))}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick")}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e=this.start,t=this.end,i=this.step,n=[];if(e&&t&&i)for(var s=e;r(s,t)<=0;)n.push({value:s,disabled:r(s,this.minTime||"-1:-1")<=0||r(s,this.maxTime||"100:100")>=0}),s=u(s,i);return n}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel time-select",class:e.popperClass,style:{width:e.width+"px"}},[i("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},e._l(e.items,function(t){return i("div",{staticClass:"time-select-item",class:{selected:e.value===t.value,disabled:t.disabled},attrs:{disabled:t.disabled},on:{click:function(i){e.handleClick(t)}}},[e._v(e._s(t.value))])}))],1)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(774),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(743),o=n(s),a=i(749),r=n(a),l=i(775),u=n(l);t.default={mixins:[o.default],name:"ElTimePicker",props:{isRange:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?u.default:r.default,this.mountPicker()):(this.type=e?"timerange":"time",
+this.panel=e?u.default:r.default)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?u.default:r.default}}},function(e,t,i){var n=i(13)(i(776),i(777),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o),r=i(751),l=n(r),u=(0,s.parseDate)("00:00:00","HH:mm:ss"),c=(0,s.parseDate)("23:59:59","HH:mm:ss"),d=function(e,t){var i=3600*e.getHours()+60*e.getMinutes()+e.getSeconds(),n=3600*t.getHours()+60*t.getMinutes()+t.getSeconds();return i>n},h=function e(t){t=Array.isArray(t)?t:[t];var i=t[0]||new Date,n=new Date;n.setHours(n.getHours()+1);var s=t[1]||n;return i>s?e():{minTime:i,maxTime:s}};t.default={mixins:[a.default],components:{TimeSpinner:l.default},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1}},props:["value"],data:function(){var e=h(this.$options.defaultValue);return{popperClass:"",minTime:e.minTime,maxTime:e.maxTime,btnDisabled:d(e.minTime,e.maxTime),maxHours:e.maxTime.getHours(),maxMinutes:e.maxTime.getMinutes(),maxSeconds:e.maxTime.getSeconds(),minHours:e.minTime.getHours(),minMinutes:e.minTime.getMinutes(),minSeconds:e.minTime.getSeconds(),format:"HH:mm:ss",visible:!1,width:0}},watch:{value:function(e){var t=this;this.panelCreated(),this.$nextTick(function(e){return t.ajustScrollTop()})}},methods:{panelCreated:function(){var e=h(this.value);e.minTime===this.minTime&&e.maxTime===this.maxTime||(this.handleMinChange({hours:e.minTime.getHours(),minutes:e.minTime.getMinutes(),seconds:e.minTime.getSeconds()}),this.handleMaxChange({hours:e.maxTime.getHours(),minutes:e.maxTime.getMinutes(),seconds:e.maxTime.getSeconds()}))},handleClear:function(){this.handleCancel()},handleCancel:function(){this.$emit("pick")},handleChange:function(){this.minTime>this.maxTime||(u.setFullYear(this.minTime.getFullYear()),u.setMonth(this.minTime.getMonth(),this.minTime.getDate()),c.setFullYear(this.maxTime.getFullYear()),c.setMonth(this.maxTime.getMonth(),this.maxTime.getDate()),this.$refs.minSpinner.selectableRange=[[u,this.maxTime]],this.$refs.maxSpinner.selectableRange=[[this.minTime,c]],this.handleConfirm(!0))},handleMaxChange:function(e){void 0!==e.hours&&(this.maxTime.setHours(e.hours),this.maxHours=this.maxTime.getHours()),void 0!==e.minutes&&(this.maxTime.setMinutes(e.minutes),this.maxMinutes=this.maxTime.getMinutes()),void 0!==e.seconds&&(this.maxTime.setSeconds(e.seconds),this.maxSeconds=this.maxTime.getSeconds()),this.handleChange()},handleMinChange:function(e){void 0!==e.hours&&(this.minTime.setHours(e.hours),this.minHours=this.minTime.getHours()),void 0!==e.minutes&&(this.minTime.setMinutes(e.minutes),this.minMinutes=this.minTime.getMinutes()),void 0!==e.seconds&&(this.minTime.setSeconds(e.seconds),this.minSeconds=this.minTime.getSeconds()),this.handleChange()},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t)},setMaxSelectionRange:function(e,t){this.$emit("select-range",e+11,t+11)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.$refs.minSpinner.selectableRange,n=this.$refs.maxSpinner.selectableRange;this.minTime=(0,s.limitRange)(this.minTime,i),this.maxTime=(0,s.limitRange)(this.maxTime,n),t||this.$emit("pick",[this.minTime,this.maxTime],e,t)},ajustScrollTop:function(){this.$refs.minSpinner.ajustScrollTop(),this.$refs.maxSpinner.ajustScrollTop()}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.panelCreated,"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel",class:e.popperClass,style:{width:e.width+"px"}},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[e._v(e._s(e.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":e.showSeconds,hours:e.minHours,minutes:e.minMinutes,seconds:e.minSeconds},on:{change:e.handleMinChange,"select-range":e.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[e._v(e._s(e.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":e.showSeconds,hours:e.maxHours,minutes:e.maxMinutes,seconds:e.maxSeconds},on:{change:e.handleMaxChange,"select-range":e.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(t){e.handleCancel()}}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(779),o=n(s),a=i(782),r=n(a),l=i(2),u=n(l);u.default.directive("popover",r.default),o.default.install=function(e){e.directive("popover",r.default),e.component(o.default.name,o.default)},o.default.directive=r.default,t.default=o.default},function(e,t,i){var n=i(13)(i(780),i(781),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(71);t.default={name:"ElPopover",mixins:[o.default],props:{trigger:{type:String,default:"click",validator:function(e){return["click","focus","hover","manual"].indexOf(e)>-1}},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},transition:{type:String,default:"fade-in-linear"}},watch:{showPopper:function(e,t){e?this.$emit("show"):this.$emit("hide")}},mounted:function(){var e=this.reference||this.$refs.reference,t=this.popper||this.$refs.popper;if(!e&&this.$slots.reference&&this.$slots.reference[0]&&(e=this.referenceElm=this.$slots.reference[0].elm),"click"===this.trigger)(0,a.on)(e,"click",this.doToggle),(0,a.on)(document,"click",this.handleDocumentClick);else if("hover"===this.trigger)(0,a.on)(e,"mouseenter",this.handleMouseEnter),(0,a.on)(t,"mouseenter",this.handleMouseEnter),(0,a.on)(e,"mouseleave",this.handleMouseLeave),(0,a.on)(t,"mouseleave",this.handleMouseLeave);else if("focus"===this.trigger){var i=!1;if([].slice.call(e.children).length)for(var n=e.childNodes,s=n.length,o=0;o<s;o++)if("INPUT"===n[o].nodeName||"TEXTAREA"===n[o].nodeName){(0,a.on)(n[o],"focus",this.doShow),(0,a.on)(n[o],"blur",this.doClose),i=!0;break}if(i)return;"INPUT"===e.nodeName||"TEXTAREA"===e.nodeName?((0,a.on)(e,"focus",this.doShow),(0,a.on)(e,"blur",this.doClose)):((0,a.on)(e,"mousedown",this.doShow),(0,a.on)(e,"mouseup",this.doClose))}},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleMouseEnter:function(){this.showPopper=!0,clearTimeout(this._timer)},handleMouseLeave:function(){var e=this;this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)}},destroyed:function(){var e=this.reference;(0,a.off)(e,"click",this.doToggle),(0,a.off)(e,"mouseup",this.doClose),(0,a.off)(e,"mousedown",this.doShow),(0,a.off)(e,"focus",this.doShow),(0,a.off)(e,"blur",this.doClose),(0,a.off)(e,"mouseleave",this.handleMouseLeave),(0,a.off)(e,"mouseenter",this.handleMouseEnter),(0,a.off)(document,"click",this.handleDocumentClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover",class:[e.popperClass],style:{width:e.width+"px"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},staticRenderFns:[]}},function(e,t){"use strict";t.__esModule=!0,t.default={bind:function(e,t,i){i.context.$refs[t.arg].$refs.reference=e}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(784),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.MessageBox=void 0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=i(2),a=n(o),r=i(785),l=n(r),u=i(613),c=n(u),d={title:void 0,message:"",type:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null},h=a.default.extend(l.default),f=void 0,p=void 0,m=[],v=function(e){if(f){var t=f.callback;if("function"==typeof t&&(p.showInput?t(p.inputValue,e):t(e)),f.resolve){var i=f.options.$type;"confirm"===i||"prompt"===i?"confirm"===e?p.showInput?f.resolve({value:p.inputValue,action:e}):f.resolve(e):"cancel"===e&&f.reject&&f.reject(e):f.resolve(e)}}},g=function(){p=new h({el:document.createElement("div")}),p.callback=v},y=function e(){p||g(),p.action="",p.value&&!p.closeTimer||m.length>0&&!function(){f=m.shift();var t=f.options;for(var i in t)t.hasOwnProperty(i)&&(p[i]=t[i]);void 0===t.callback&&(p.callback=v);var n=p.callback;p.callback=function(t,i){n(t,i),e()},["modal","showClose","closeOnClickModal","closeOnPressEscape"].forEach(function(e){void 0===p[e]&&(p[e]=!0)}),document.body.appendChild(p.$el),a.default.nextTick(function(){p.value=!0})}()},b=function e(t,i){if(!a.default.prototype.$isServer)return"string"==typeof t?(t={message:t},arguments[1]&&(t.title=arguments[1]),arguments[2]&&(t.type=arguments[2])):t.callback&&!i&&(i=t.callback),"undefined"!=typeof Promise?new Promise(function(n,s){m.push({options:(0,c.default)({},d,e.defaults,t),callback:i,resolve:n,reject:s}),y()}):(m.push({options:(0,c.default)({},d,e.defaults,t),callback:i}),void y())};b.setDefaults=function(e){b.defaults=e},b.alert=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},b.confirm=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},b.prompt=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},b.close=function(){p.value=!1,m=[],f=null},t.default=b,t.MessageBox=b},function(e,t,i){var n=i(13)(i(786),i(787),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(618),o=n(s),a=i(608),r=n(a),l=i(609),u=n(l),c=i(653),d=n(c),h=i(71),f=i(15),p={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={mixins:[o.default,r.default],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0}},components:{ElInput:u.default,ElButton:d.default},computed:{typeClass:function(){return this.type&&p[this.type]?"el-icon-"+p[this.type]:""},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.value&&(this.value=!1,this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose(),this.action&&this.callback(this.action,this))},handleWrapperClick:function(){this.closeOnClickModal&&(this.action="",this.doClose())},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(i===!1)return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,!1}}return this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!0}},watch:{inputValue:{immediate:!0,handler:function(e){var t=this;this.$nextTick(function(i){"prompt"===t.$type&&null!==e&&t.validate()})}},value:function(e){var t=this;e&&this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.$refs.input.$el.querySelector("input").focus()},500):(this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid")))}},data:function(){return{uid:1,title:void 0,message:"",type:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.value,expression:"value"}],staticClass:"el-message-box__wrapper",on:{click:function(t){return t.target!==t.currentTarget?null:void e.handleWrapperClick(t)}}},[i("div",{staticClass:"el-message-box",class:e.customClass},[void 0!==e.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[e._v(e._s(e.title||e.t("el.messagebox.title")))]),e.showClose?i("i",{staticClass:"el-message-box__close el-icon-close",on:{click:function(t){e.handleAction("cancel")}}}):e._e()]):e._e(),""!==e.message?i("div",{staticClass:"el-message-box__content"},[i("div",{staticClass:"el-message-box__status",class:[e.typeClass]}),i("div",{staticClass:"el-message-box__message",style:{"margin-left":e.typeClass?"50px":"0"}},[i("p",[e._v(e._s(e.message))])]),i("div",{directives:[{name:"show",rawName:"v-show",value:e.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{placeholder:e.inputPlaceholder},nativeOn:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?void e.handleAction("confirm"):null}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:e.editorErrorMessage?"visible":"hidden"}},[e._v(e._s(e.editorErrorMessage))])],1)]):e._e(),i("div",{staticClass:"el-message-box__btns"},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showCancelButton,expression:"showCancelButton"}],class:[e.cancelButtonClasses],attrs:{loading:e.cancelButtonLoading},nativeOn:{click:function(t){e.handleAction("cancel")}}},[e._v("\n          "+e._s(e.cancelButtonText||e.t("el.messagebox.cancel"))+"\n        ")]),i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[e.confirmButtonClasses],attrs:{loading:e.confirmButtonLoading},nativeOn:{click:function(t){e.handleAction("confirm")}}},[e._v("\n          "+e._s(e.confirmButtonText||e.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(789),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(790),i(791),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-breadcrumb"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(793),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(794),i(795),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:""}},mounted:function(){var e=this;this.separator=this.$parent.separator;var t=this;if(this.to){var i=this.$refs.link;i.addEventListener("click",function(i){var n=e.to;t.replace?t.$router.replace(n):t.$router.push(n)})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-breadcrumb__item"},[i("span",{ref:"link",staticClass:"el-breadcrumb__item__inner"},[e._t("default")],2),i("span",{staticClass:"el-breadcrumb__separator"},[e._v(e._s(e.separator))])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(797),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(798),i(799),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElForm",componentName:"ElForm",props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,showMessage:{type:Boolean,default:!0}},watch:{rules:function(){this.validate()}},data:function(){return{fields:[]}},created:function(){var e=this;this.$on("el.form.addField",function(t){t&&e.fields.push(t)}),this.$on("el.form.removeField",function(t){t.prop&&e.fields.splice(e.fields.indexOf(t),1)})},methods:{resetFields:function(){this.fields.forEach(function(e){e.resetField()})},validate:function(e){var t=this,i=!0,n=0;0===this.fields.length&&e&&e(!0),this.fields.forEach(function(s,o){s.validate("",function(s){s&&(i=!1),"function"==typeof e&&++n===t.fields.length&&e(i)})})},validateField:function(e,t){var i=this.fields.filter(function(t){return t.prop===e})[0];if(!i)throw new Error("must call validateField with valid prop string!");i.validate("",t)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("form",{staticClass:"el-form",class:[e.labelPosition?"el-form--label-"+e.labelPosition:"",{"el-form--inline":e.inline}]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(801),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(802),i(828),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}function o(e,t){var i=e;t=t.replace(/\[(\w+)\]/g,".$1"),t=t.replace(/^\./,"");for(var n=t.split("."),s=0,o=n.length;s<o-1;++s){var a=n[s];if(!(a in i))throw new Error("please transfer a valid prop path to form item!");i=i[a]}return{o:i,k:n[s],v:i[n[s]]}}t.__esModule=!0;var a=i(803),r=n(a),l=i(607),u=n(l);t.default={name:"ElFormItem",componentName:"ElFormItem",mixins:[u.default],props:{label:String,labelWidth:String,prop:String,required:Boolean,rules:[Object,Array],error:String,validateStatus:String,showMessage:{type:Boolean,default:!0}},watch:{error:function(e){this.validateMessage=e,this.validateState=e?"error":""},validateStatus:function(e){this.validateState=e}},computed:{labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={};if("top"===this.form.labelPosition||this.form.inline)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.marginLeft=t),e},form:function(){for(var e=this.$parent;"ElForm"!==e.$options.componentName;)e=e.$parent;return e},fieldValue:{cache:!1,get:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return t.indexOf(":")!==-1&&(t=t.replace(/:/,".")),o(e,t).v}}}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isRequired:!1}},methods:{validate:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:s,n=this.getFilteredRule(e);if(!n||0===n.length)return i(),!0;this.validateState="validating";var o={};o[this.prop]=n;var a=new r.default(o),l={};l[this.prop]=this.fieldValue,a.validate(l,{firstFields:!0},function(e,n){t.validateState=e?"error":"success",t.validateMessage=e?e[0].message:"",i(t.validateMessage)})},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;i.indexOf(":")!==-1&&(i=i.replace(/:/,"."));var n=o(e,i);Array.isArray(t)?(this.validateDisabled=!0,n.o[n.k]=[].concat(this.initialValue)):(this.validateDisabled=!0,n.o[n.k]=this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules;return e=e?e[this.prop]:[],[].concat(t||e||[])},getFilteredRule:function(e){var t=this.getRules();return t.filter(function(t){return!t.trigger||t.trigger.indexOf(e)!==-1})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){return this.validateDisabled?void(this.validateDisabled=!1):void this.validate("change")}},mounted:function(){var e=this;if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var t=this.fieldValue;Array.isArray(t)&&(t=[].concat(t)),Object.defineProperty(this,"initialValue",{value:t});var i=this.getRules();i.length&&(i.every(function(t){if(t.required)return e.isRequired=!0,!1}),this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){this.rules=null,this._messages=c.messages,this.define(e)}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(804),l=i(805),u=n(l),c=i(827),d=i(807);s.prototype={messages:function(e){return e&&(this._messages=(0,r.deepMerge)((0,c.newMessages)(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==("undefined"==typeof e?"undefined":a(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(e){function t(e){function t(e){Array.isArray(e)?s=s.concat.apply(s,e):s.push(e)}var i=void 0,n=void 0,s=[],o={};for(i=0;i<e.length;i++)t(e[i]);if(s.length)for(i=0;i<s.length;i++)n=s[i].field,o[n]=o[n]||[],o[n].push(s[i]);else s=null,o=null;f(s,o)}var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},l=arguments[2],u=e,h=n,f=l;if("function"==typeof h&&(f=h,h={}),!this.rules||0===Object.keys(this.rules).length)return void(f&&f());if(h.messages){var p=this.messages();p===c.messages&&(p=(0,c.newMessages)()),(0,r.deepMerge)(p,h.messages),h.messages=p}else h.messages=this.messages();h.error=d.error;var m=void 0,v=void 0,g={},y=h.keys||Object.keys(this.rules);y.forEach(function(t){m=i.rules[t],v=u[t],m.forEach(function(n){var s=n;"function"==typeof s.transform&&(u===e&&(u=o({},u)),v=u[t]=s.transform(v)),s="function"==typeof s?{validator:s}:o({},s),s.validator=i.getValidationMethod(s),s.field=t,s.fullField=s.fullField||t,s.type=i.getType(s),s.validator&&(g[t]=g[t]||[],g[t].push({rule:s,value:v,source:u,field:t}))})});var b={};(0,r.asyncMap)(g,h,function(e,t){function i(e,t){return o({},t,{fullField:l.fullField+"."+e})}function n(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],a=n;if(Array.isArray(a)||(a=[a]),a.length&&(0,r.warning)("async-validator:",a),a.length&&l.message&&(a=[].concat(l.message)),a=a.map((0,r.complementError)(l)),(h.first||h.fieldFirst)&&a.length)return b[l.field]=1,t(a);if(u){if(l.required&&!e.value)return a=l.message?[].concat(l.message).map((0,r.complementError)(l)):[h.error(l,(0,r.format)(h.messages.required,l.field))],t(a);var c={};if(l.defaultField)for(var d in e.value)e.value.hasOwnProperty(d)&&(c[d]=l.defaultField);c=o({},c,e.rule.fields);for(var f in c)if(c.hasOwnProperty(f)){var p=Array.isArray(c[f])?c[f]:[c[f]];c[f]=p.map(i.bind(null,f))}var m=new s(c);m.messages(h.messages),e.rule.options&&(e.rule.options.messages=h.messages,e.rule.options.error=h.error),m.validate(e.value,e.rule.options||h,function(e){t(e&&e.length?a.concat(e):e)})}else t(a)}var l=e.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==a(l.fields)&&"object"!==a(l.defaultField));u=u&&(l.required||!l.required&&e.value),l.field=e.field,l.validator(l,e.value,n,e.source,h)},function(e){t(e)})},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!u.default.hasOwnProperty(e.type))throw new Error((0,r.format)("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return i!==-1&&t.splice(i,1),1===t.length&&"required"===t[0]?u.default.required:u.default[this.getType(e)]||!1}},s.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");u.default[e]=t},s.messages=c.messages,t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,s=t[0],o=t.length;if("function"==typeof s)return s.apply(null,t.slice(1));if("string"==typeof s){for(var a=String(s).replace(m,function(e){if("%%"===e)return"%";if(n>=o)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),r=t[n];n<o;r=t[++n])a+=" "+r;return a}return s}function s(e){return"string"===e||"url"===e||"hex"===e||"email"===e||"pattern"===e}function o(e,t){return void 0===e||null===e||(!("array"!==t||!Array.isArray(e)||e.length)||!(!s(t)||"string"!=typeof e||e))}function a(e){return 0===Object.keys(e).length}function r(e,t,i){function n(e){s.push.apply(s,e),o++,o===a&&i(s)}var s=[],o=0,a=e.length;e.forEach(function(e){t(e,n)})}function l(e,t,i){function n(a){if(a&&a.length)return void i(a);var r=s;s+=1,r<o?t(e[r],n):i([])}var s=0,o=e.length;n([])}function u(e){var t=[];return Object.keys(e).forEach(function(i){t.push.apply(t,e[i])}),t}function c(e,t,i,n){if(t.first){var s=u(e);return l(s,i,n)}var o=t.firstFields||[];o===!0&&(o=Object.keys(e));var a=Object.keys(e),c=a.length,d=0,h=[],f=function(e){h.push.apply(h,e),d++,d===c&&n(h)};a.forEach(function(t){var n=e[t];o.indexOf(t)!==-1?l(n,i,f):r(n,i,f)})}function d(e){return function(t){return t&&t.message?(t.field=t.field||e.fullField,t):{message:t,field:t.field||e.fullField}}}function h(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===("undefined"==typeof n?"undefined":p(n))&&"object"===p(e[i])?e[i]=f({},e[i],n):e[i]=n}return e}Object.defineProperty(t,"__esModule",{value:!0});var f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.format=n,t.isEmptyValue=o,t.isEmptyObject=a,t.asyncMap=c,t.complementError=d,t.deepMerge=h;var m=/%[sdj%]/g;t.warning=function(){}},function(e,t,i){"use strict";e.exports={string:i(806),method:i(814),number:i(815),boolean:i(816),regexp:i(817),integer:i(818),float:i(819),array:i(820),object:i(821),enum:i(822),pattern:i(823),email:i(824),url:i(824),date:i(825),hex:i(824),required:i(826)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s,"string"),(0,r.isEmptyValue)(t,"string")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s),a.default.pattern(e,t,n,o,s),e.whitespace===!0&&a.default.whitespace(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={required:i(808),whitespace:i(809),type:i(810),range:i(811),enum:i(812),pattern:i(813)},e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s,o){!e.required||i.hasOwnProperty(e.field)&&!a.isEmptyValue(t,o||e.type)||n.push(a.format(s.messages.required,e.fullField))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){(/^\s+$/.test(t)||""===t)&&n.push(a.format(s.messages.whitespace,e.fullField))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,
+e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function o(e,t,i,n,s){if(e.required&&void 0===t)return void(0,c.default)(e,t,i,n,s);var o=["integer","float","array","regexp","object","method","email","number","date","url","hex"],r=e.type;o.indexOf(r)>-1?h[r](t)||n.push(l.format(s.messages.types[r],e.fullField,e.type)):r&&("undefined"==typeof t?"undefined":a(t))!==e.type&&n.push(l.format(s.messages.types[r],e.fullField,e.type))}Object.defineProperty(t,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(804),l=s(r),u=i(808),c=n(u),d={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},h={integer:function(e){return h.number(e)&&parseInt(e,10)===e},float:function(e){return h.number(e)&&!h.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===("undefined"==typeof e?"undefined":a(e))&&!h.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(d.email)},url:function(e){return"string"==typeof e&&!!e.match(d.url)},hex:function(e){return"string"==typeof e&&!!e.match(d.hex)}};t.default=o,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){var o="number"==typeof e.len,r="number"==typeof e.min,l="number"==typeof e.max,u=t,c=null,d="number"==typeof t,h="string"==typeof t,f=Array.isArray(t);return d?c="number":h?c="string":f&&(c="array"),!!c&&((h||f)&&(u=t.length),void(o?u!==e.len&&n.push(a.format(s.messages[c].len,e.fullField,e.len)):r&&!l&&u<e.min?n.push(a.format(s.messages[c].min,e.fullField,e.min)):l&&!r&&u>e.max?n.push(a.format(s.messages[c].max,e.fullField,e.max)):r&&l&&(u<e.min||u>e.max)&&n.push(a.format(s.messages[c].range,e.fullField,e.min,e.max))))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e[r]=Array.isArray(e[r])?e[r]:[],e[r].indexOf(t)===-1&&n.push(a.format(s.messages[r],e.fullField,e[r].join(", ")))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o),r="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e.pattern instanceof RegExp&&(e.pattern.test(t)||n.push(a.format(s.messages.pattern.mismatch,e.fullField,t,e.pattern)))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var a=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,o.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,a,s),void 0!==t&&r.default.type(e,t,n,a,s)}i(a)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=i(807),r=n(a);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"array")&&!e.required)return i();a.default.required(e,t,n,o,s,"array"),(0,r.isEmptyValue)(t,"array")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),t&&a.default[l](e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804),l="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t,"string")||a.default.pattern(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=e.type,l=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,r.isEmptyValue)(t,o)&&!e.required)return i();a.default.required(e,t,n,l,s,o),(0,r.isEmptyValue)(t,o)||a.default.type(e,t,n,l,s)}i(l)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||(a.default.type(e,t,n,o,s),t&&a.default.range(e,t.getTime(),n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var a=[],l=Array.isArray(t)?"array":"undefined"==typeof t?"undefined":o(t);r.default.required(e,t,n,a,s,l),i(a)}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(807),r=n(a);t.default=s,e.exports=t.default},function(e,t){"use strict";function i(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}Object.defineProperty(t,"__esModule",{value:!0}),t.newMessages=i;t.messages=i()},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:{"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-required":e.isRequired||e.required}},[e.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.prop}},[e._v("\n    "+e._s(e.label+e.form.labelSuffix)+"\n  ")]):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?i("div",{staticClass:"el-form-item__error"},[e._v(e._s(e.validateMessage))]):e._e()])],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(830),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(831),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(832),o=n(s);t.default={name:"ElTabs",components:{TabNav:o.default},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})}},methods:{handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){this.currentName=e,this.$emit("input",e)},addPanes:function(e){var t=this.$slots.default.indexOf(e.$vnode);this.panes.splice(t,0,e)},removePanes:function(e){var t=this.panes,i=t.indexOf(e);i>-1&&t.splice(i,1)}},render:function(e){var t=this.type,i=this.handleTabClick,n=this.handleTabRemove,s=this.handleTabAdd,o=this.currentName,a=this.panes,r=this.editable,l=this.addable,u=r||l?e("span",{class:"el-tabs__new-tab",on:{click:s}},[e("i",{class:"el-icon-plus"},[])]):null,c={props:{currentName:o,onTabClick:i,onTabRemove:n,editable:r,type:t,panes:a},ref:"nav"};return e("div",{class:{"el-tabs":!0,"el-tabs--card":"card"===t,"el-tabs--border-card":"border-card"===t}},[e("div",{class:"el-tabs__header"},[u,e("tab-nav",c,[])]),e("div",{class:"el-tabs__content"},[this.$slots.default])])},created:function(){this.currentName||this.setCurrentName("0")}}},function(e,t,i){var n=i(13)(i(833),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(834),a=n(o),r=i(632);t.default={name:"TabNav",components:{TabBar:a.default},props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:s},onTabRemove:{type:Function,default:s},type:String},data:function(){return{scrollable:!1,navStyle:{transform:""}}},methods:{scrollPrev:function(){var e=this.$refs.navScroll.offsetWidth,t=this.getCurrentScrollOffset();if(t){var i=t>e?t-e:0;this.setOffset(i)}},scrollNext:function(){var e=this.$refs.nav.offsetWidth,t=this.$refs.navScroll.offsetWidth,i=this.getCurrentScrollOffset();if(!(e-i<=t)){var n=e-i>2*t?i+t:e-t;this.setOffset(n)}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active"),i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),o=e.getBoundingClientRect(),a=this.getCurrentScrollOffset(),r=a;n.left<s.left&&(r=a-(s.left-n.left)),n.right>s.right&&(r=a+n.right-s.right),o.right<s.right&&(r=e.offsetWidth-s.width),this.setOffset(Math.max(r,0))}},getCurrentScrollOffset:function(){var e=this.navStyle;return e.transform?Number(e.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]):0},setOffset:function(e){this.navStyle.transform="translateX(-"+e+"px)"},update:function(){var e=this.$refs.nav.offsetWidth,t=this.$refs.navScroll.offsetWidth,i=this.getCurrentScrollOffset();if(t<e){var n=this.getCurrentScrollOffset();this.scrollable=this.scrollable||{},this.scrollable.prev=n,this.scrollable.next=n+t<e,e-n<t&&this.setOffset(e-t)}else this.scrollable=!1,i>0&&this.setOffset(0)}},updated:function(){this.update()},render:function(e){var t=this.type,i=this.panes,n=this.editable,s=this.onTabClick,o=this.onTabRemove,a=this.navStyle,r=this.scrollable,l=this.scrollNext,u=this.scrollPrev,c=r?[e("span",{class:["el-tabs__nav-prev",r.prev?"":"is-disabled"],on:{click:u}},[e("i",{class:"el-icon-arrow-left"},[])]),e("span",{class:["el-tabs__nav-next",r.next?"":"is-disabled"],on:{click:l}},[e("i",{class:"el-icon-arrow-right"},[])])]:null,d=this._l(i,function(t,i){var a=t.name||t.index||i,r=t.isClosable||n;t.index=""+i;var l=r?e("span",{class:"el-icon-close",on:{click:function(e){o(t,e)}}},[]):null,u=t.$slots.label||t.label;return e("div",{class:{"el-tabs__item":!0,"is-active":t.active,"is-disabled":t.disabled,"is-closable":r},ref:"tabs",refInFor:!0,on:{click:function(e){s(t,a,e)}}},[u,l])});return e("div",{class:["el-tabs__nav-wrap",r?"is-scrollable":""]},[c,e("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[e("div",{class:"el-tabs__nav",ref:"nav",style:a},[t?null:e("tab-bar",{attrs:{tabs:i}},[]),d])])])},mounted:function(){(0,r.addResizeListener)(this.$el,this.update)},beforeDestroy:function(){this.$el&&this.update&&(0,r.removeResizeListener)(this.$el,this.update)}}},function(e,t,i){var n=i(13)(i(835),i(836),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"TabBar",props:{tabs:Array},computed:{barStyle:{cache:!1,get:function(){var e=this;if(!this.$parent.$refs.tabs)return{};var t={},i=0,n=0;this.tabs.every(function(t,s){var o=e.$parent.$refs.tabs[s];return!!o&&(t.active?(n=o.clientWidth,!1):(i+=o.clientWidth,!0))});var s="translateX("+i+"px)";return t.width=n+"px",t.transform=s,t.msTransform=s,t.webkitTransform=s,t}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tabs__active-bar",style:e.barStyle})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(838),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(839),i(840),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean},data:function(){return{index:null}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){return this.$parent.currentName===(this.name||this.index)}},mounted:function(){this.$parent.addPanes(this)},destroyed:function(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.$parent.removePanes(this)},watch:{label:function(){this.$parent.$forceUpdate()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(842),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(843),i(850),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(844),o=n(s),a=i(15),r=i(607),l=n(r);t.default={name:"ElTree",mixins:[l.default],components:{ElTreeNode:i(847)},data:function(){return{store:null,root:null,currentNode:null}},props:{data:{type:Array},emptyText:{type:String,default:function(){return(0,a.t)("el.tree.emptyText")}},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,renderContent:Function,showCheckbox:{type:Boolean,default:!1},props:{default:function(){return{children:"children",label:"label",icon:"icon"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,currentNodeKey:[String,Number],load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:16}},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}}},watch:{defaultCheckedKeys:function(e){this.store.defaultCheckedKeys=e,this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},currentNodeKey:function(e){this.store.setCurrentNodeKey(e),this.store.currentNodeKey=e},data:function(e){this.store.setData(e)}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e,t){var i=this.nodeKey;return i&&e?e.data[i]:t},getCheckedNodes:function(e){return this.store.getCheckedNodes(e)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)}},created:function(){this.isTree=!0,this.store=new o.default({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(845),r=n(a),l=i(846),u=function(){function e(t){var i=this;s(this,e),this.currentNode=null,this.currentNodeKey=null;for(var n in t)t.hasOwnProperty(n)&&(this[n]=t[n]);if(this.nodesMap={},this.root=new r.default({data:this.data,store:this}),this.lazy&&this.load){var o=this.load;o(this.root,function(e){i.root.doCreateChildren(e),i._initDefaultCheckedNodes()})}else this._initDefaultCheckedNodes()}return e.prototype.filter=function(e){var t=this.filterNodeMethod,i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;if(s.forEach(function(n){n.visible=t.call(n,e,n.data,n),i(n)}),!n.visible&&s.length){var o=!0;s.forEach(function(e){e.visible&&(o=!1)}),n.root?n.root.visible=o===!1:n.visible=o===!1}n.visible&&!n.isLeaf&&n.expand()};i(this)},e.prototype.setData=function(e){var t=e!==this.root.data;this.root.setData(e),t&&this._initDefaultCheckedNodes()},e.prototype.getNode=function(e){var t="object"!==("undefined"==typeof e?"undefined":o(e))?e:(0,l.getNodeKey)(this.key,e);return this.nodesMap[t]},e.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},e.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},e.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent.removeChild(t)},e.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},e.prototype._initDefaultCheckedNodes=function(){var e=this,t=this.defaultCheckedKeys||[],i=this.nodesMap;t.forEach(function(t){var n=i[t];n&&n.setChecked(!0,!e.checkStrictly)})},e.prototype._initDefaultCheckedNode=function(e){var t=this.defaultCheckedKeys||[];t.indexOf(e.key)!==-1&&e.setChecked(!0,!this.checkStrictly)},e.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},e.prototype.registerNode=function(e){var t=this.key;if(t&&e&&e.data){var i=e.key;void 0!==i&&(this.nodesMap[e.key]=e)}},e.prototype.deregisterNode=function(e){var t=this.key;t&&e&&e.data&&delete this.nodesMap[e.key]},e.prototype.getCheckedNodes=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[],i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;s.forEach(function(n){(!e&&n.checked||e&&n.isLeaf&&n.checked)&&t.push(n.data),i(n)})};return i(this),t},e.prototype.getCheckedKeys=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.key,i=this._getAllNodes(),n=[];return i.forEach(function(i){(!e||e&&i.isLeaf)&&i.checked&&n.push((i.data||{})[t])}),n},e.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},e.prototype._setCheckedKeys=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments[2],s=this._getAllNodes();s.sort(function(e,t){return t.level-e.level});var o=Object.keys(n);s.forEach(function(n){var s=o.indexOf(n.data[e]+"")>-1;if(n.isLeaf)n.setChecked(s,!1);else{if(t.checkStrictly)n.setChecked(s,!1);else{for(var a=n.childNodes,r=!0,l=!0,u=0,c=a.length;u<c;u++){var d=a[u];(d.checked!==!0||d.indeterminate)&&(r=!1),(d.checked!==!1||d.indeterminate)&&(l=!1)}r?n.setChecked(!0,!t.checkStrictly):r||l?l&&n.setChecked(s,!t.checkStrictly):(s=!!s||"half",n.setChecked(s,!t.checkStrictly&&s===!0))}i&&!function(){n.setChecked(!1,!1);var e=function e(t){var i=t.childNodes;i.forEach(function(t){t.isLeaf||t.setChecked(!1,!1),e(t)})};e(n)}()}})},e.prototype.setCheckedNodes=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setCheckedKeys=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setDefaultExpandedKeys=function(e){var t=this;e=e||[],this.defaultExpandedKeys=e,e.forEach(function(e){var i=t.getNode(e);i&&i.expand(null,t.autoExpandParent)})},e.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},e.prototype.getCurrentNode=function(){return this.currentNode},e.prototype.setCurrentNode=function(e){this.currentNode=e},e.prototype.setCurrentNodeKey=function(e){var t=this.getNode(e);t&&(this.currentNode=t)},e}();t.default=u},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a=i(613),r=n(a),l=i(846),u=function(e){for(var t=e.childNodes,i=!0,n=!0,s=0,o=t.length;s<o;s++){var a=t[s];(a.checked!==!0||a.indeterminate)&&(i=!1),(a.checked!==!1||a.indeterminate)&&(n=!1)}i?e.setChecked(!0):i||n?n&&e.setChecked(!1):e.setChecked("half")},c=function(e,t){var i=e.store.props,n=e.data||{},s=i[t];return"function"==typeof s?s(n,e):"string"==typeof s?n[s]:"undefined"==typeof s?"":void 0},d=0,h=function(){function e(t){s(this,e),this.id=d++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0;for(var i in t)t.hasOwnProperty(i)&&(this[i]=t[i]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var n=this.store;if(!n)throw new Error("[Node]store is required!");n.registerNode(this);var o=n.props;if(o&&"undefined"!=typeof o.isLeaf){var a=c(this,"isLeaf");"boolean"==typeof a&&(this.isLeafByUser=a)}if(n.lazy!==!0&&this.data?(this.setData(this.data),n.defaultExpandAll&&(this.expanded=!0)):this.level>0&&n.lazy&&n.defaultExpandAll&&this.expand(),this.data){var r=n.defaultExpandedKeys,l=n.key;l&&r&&r.indexOf(this.key)!==-1&&this.expand(null,n.autoExpandParent),l&&n.currentNodeKey&&this.key===n.currentNodeKey&&(n.currentNode=this),n.lazy&&n._initDefaultCheckedNode(this),this.updateLeafState()}}return e.prototype.setData=function(e){Array.isArray(e)||(0,l.markNodeData)(this,e),this.data=e,this.childNodes=[];var t=void 0;t=0===this.level&&this.data instanceof Array?this.data:c(this,"children")||[];for(var i=0,n=t.length;i<n;i++)this.insertChild({data:t[i]})},e.prototype.insertChild=function(t,i){if(!t)throw new Error("insertChild error: child is required.");t instanceof e||((0,r.default)(t,{parent:this,store:this.store}),t=new e(t)),t.level=this.level+1,"undefined"==typeof i||i<0?this.childNodes.push(t):this.childNodes.splice(i,0,t),this.updateLeafState()},e.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},e.prototype.insertAfter=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t),i!==-1&&(i+=1)),this.insertChild(e,i)},e.prototype.removeChild=function(e){var t=this.childNodes.indexOf(e);t>-1&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(t,1)),this.updateLeafState()},e.prototype.removeChildByData=function(e){var t=null;this.childNodes.forEach(function(i){i.data===e&&(t=i)}),t&&this.removeChild(t)},e.prototype.expand=function(e,t){var i=this,n=function(){if(t)for(var n=i.parent;n.level>0;)n.expanded=!0,n=n.parent;i.expanded=!0,e&&e()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&n()}):n()},e.prototype.doCreateChildren=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild((0,r.default)({data:e},i))})},e.prototype.collapse=function(){this.expanded=!1},e.prototype.shouldLoadData=function(){return this.store.lazy===!0&&this.store.load&&!this.loaded},e.prototype.updateLeafState=function(){if(this.store.lazy===!0&&this.loaded!==!0&&"undefined"!=typeof this.isLeafByUser)return void(this.isLeaf=this.isLeafByUser);var e=this.childNodes;return!this.store.lazy||this.store.lazy===!0&&this.loaded===!0?void(this.isLeaf=!e||0===e.length):void(this.isLeaf=!1)},e.prototype.setChecked=function(e,t){var i=this;this.indeterminate="half"===e,this.checked=e===!0;var n=function(){if(t)for(var n=i.childNodes,s=0,o=n.length;s<o;s++){var a=n[s];a.setChecked(e!==!1,t)}};!this.store.checkStrictly&&this.shouldLoadData()?this.loadData(function(){n()},{checked:e!==!1}):n();var s=this.parent;s&&0!==s.level&&(this.store.checkStrictly||u(s))},e.prototype.getChildren=function(){var e=this.data;if(!e)return null;var t=this.store.props,i="children";return t&&(i=t.children||"children"),void 0===e[i]&&(e[i]=null),e[i]},e.prototype.updateChildren=function(){var e=this,t=this.getChildren()||[],i=this.childNodes.map(function(e){return e.data}),n={},s=[];t.forEach(function(e,t){e[l.NODE_KEY]?n[e[l.NODE_KEY]]={index:t,data:e}:s.push({index:t,data:e})}),i.forEach(function(t){n[t[l.NODE_KEY]]||e.removeChildByData(t)}),s.forEach(function(t){var i=t.index,n=t.data;e.insertChild({data:n},i)}),this.updateLeafState()},e.prototype.loadData=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.store.lazy!==!0||!this.store.load||this.loaded||this.loading)e&&e.call(this);else{this.loading=!0;var n=function(n){t.loaded=!0,t.loading=!1,t.childNodes=[],t.doCreateChildren(n,i),t.updateLeafState(),e&&e.call(t,n)};this.store.load(this,n)}},o(e,[{key:"label",get:function(){return c(this,"label")}},{key:"icon",get:function(){return c(this,"icon")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}}]),e}();t.default=h},function(e,t){"use strict";t.__esModule=!0;var i=t.NODE_KEY="$treeNodeId";t.markNodeData=function(e,t){t[i]||Object.defineProperty(t,i,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},t.getNodeKey=function(e,t){return e?t[e]:t[i]}},function(e,t,i){var n=i(13)(i(848),i(849),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(702),o=n(s),a=i(607),r=n(a);t.default={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[r.default],props:{node:{default:function(){return{}}},props:{},renderContent:Function},components:{
+ElCheckbox:o.default,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=this.node,n=i.data,s=i.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:t.tree.$vnode.context,node:i,data:n,store:s}):e("span",{class:"el-tree-node__label"},[this.node.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,showCheckbox:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){this.expanded=e,e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e,t){var i=this.tree.nodeKey;return i&&e?e.data[i]:t},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),this.tree.currentNode=this,this.tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.$emit("node-click",this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleUserClick:function(){this.node.indeterminate&&this.node.setChecked(this.node.checked,!this.tree.checkStrictly)},handleCheckChange:function(e){this.node.indeterminate||this.node.setChecked(e.target.checked,!this.tree.checkStrictly)},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)}},created:function(){var e=this,t=this.$parent;t.isTree?this.tree=t:this.tree=t.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=i.props||{},s=n.children||"children";this.$watch("node.data."+s,function(){e.node.updateChildren()}),this.showCheckbox=i.showCheckbox,this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(t){e.node!==t&&e.node.collapse()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.node.visible,expression:"node.visible"}],staticClass:"el-tree-node",class:{"is-expanded":e.childNodeRendered&&e.expanded,"is-current":e.tree.store.currentNode===e.node,"is-hidden":!e.node.visible},on:{click:function(t){t.stopPropagation(),e.handleClick(t)}}},[i("div",{staticClass:"el-tree-node__content",style:{"padding-left":(e.node.level-1)*e.tree.indent+"px"}},[i("span",{staticClass:"el-tree-node__expand-icon",class:{"is-leaf":e.node.isLeaf,expanded:!e.node.isLeaf&&e.expanded},on:{click:function(t){t.stopPropagation(),e.handleExpandIconClick(t)}}}),e.showCheckbox?i("el-checkbox",{attrs:{indeterminate:e.node.indeterminate},on:{change:e.handleCheckChange},nativeOn:{click:function(t){t.stopPropagation(),e.handleUserClick(t)}},model:{value:e.node.checked,callback:function(t){e.node.checked=t},expression:"node.checked"}}):e._e(),e.node.loading?i("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):e._e(),i("node-content",{attrs:{node:e.node}})],1),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.expanded,expression:"expanded"}],staticClass:"el-tree-node__children"},e._l(e.node.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{"render-content":e.renderContent,node:t},on:{"node-expand":e.handleChildNodeExpand}})}))])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":e.highlightCurrent}},[e._l(e.root.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{node:t,props:e.props,"render-content":e.renderContent},on:{"node-expand":e.handleNodeExpand}})}),e.root.childNodes&&0!==e.root.childNodes.length?e._e():i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[e._v(e._s(e.emptyText))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(852),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(853),i(854),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"el-icon-circle-check",warning:"el-icon-warning",error:"el-icon-circle-cross"};t.default={name:"ElAlert",props:{title:{type:String,default:"",required:!0},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:{type:Boolean,default:!1}},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return i[this.type]||"el-icon-information"},isBigIcon:function(){return this.description?"is-big":""},isBoldTitle:function(){return this.description?"is-bold":""}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-alert",class:[e.typeClass]},[e.showIcon?i("i",{staticClass:"el-alert__icon",class:[e.iconClass,e.isBigIcon]}):e._e(),i("div",{staticClass:"el-alert__content"},[e.title?i("span",{staticClass:"el-alert__title",class:[e.isBoldTitle]},[e._v(e._s(e.title))]):e._e(),e._t("default",[e.description?i("p",{staticClass:"el-alert__description"},[e._v(e._s(e.description))]):e._e()]),i("i",{directives:[{name:"show",rawName:"v-show",value:e.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==e.closeText,"el-icon-close":""===e.closeText},on:{click:function(t){e.close()}}},[e._v(e._s(e.closeText))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(856),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(618),r=i(731),l=o.default.extend(i(857)),u=void 0,c=[],d=1,h=function e(t){if(!o.default.prototype.$isServer){t=t||{};var i=t.onClose,n="notification_"+d++;t.onClose=function(){e.close(n,i)},u=new l({data:t}),(0,r.isVNode)(t.message)&&(u.$slots.default=[t.message],t.message=""),u.id=n,u.vm=u.$mount(),document.body.appendChild(u.vm.$el),u.vm.visible=!0,u.dom=u.vm.$el,u.dom.style.zIndex=a.PopupManager.nextZIndex();for(var s=t.offset||0,h=s,f=0,p=c.length;f<p;f++)h+=c[f].$el.offsetHeight+16;return h+=16,u.top=h,c.push(u),u.vm}};["success","warning","info","error"].forEach(function(e){h[e]=function(t){return("string"==typeof t||(0,r.isVNode)(t))&&(t={message:t}),t.type=e,h(t)}}),h.close=function(e,t){for(var i=void 0,n=void 0,s=0,o=c.length;s<o;s++)if(e===c[s].id){"function"==typeof t&&t(c[s]),i=s,n=c[s].dom.offsetHeight,c.splice(s,1);break}if(o>1)for(s=i;s<o-1;s++)c[s].dom.style.top=parseInt(c[s].dom.style.top,10)-n-16+"px"},t.default=h},function(e,t,i){var n=i(13)(i(858),i(859),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,top:null,timer:null}},computed:{typeClass:function(){return this.type&&i[this.type]?"el-icon-"+i[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-notification",class:e.customClass,style:{top:e.top?e.top+"px":"auto"},on:{mouseenter:function(t){e.clearTimer()},mouseleave:function(t){e.startTimer()},click:e.click}},[e.type||e.iconClass?i("i",{staticClass:"el-notification__icon",class:[e.typeClass,e.iconClass]}):e._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":e.typeClass||e.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:e._s(e.title)}}),i("div",{staticClass:"el-notification__content"},[e._t("default",[e._v(e._s(e.message))])],2),i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(t){t.stopPropagation(),e.close(t)}}})])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(861),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(862),i(866),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(686),o=n(s),a=i(863),r=n(a),l=i(71),u=i(607),c=n(u);t.default={name:"ElSlider",mixins:[c.default],props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String}},components:{ElInputNumber:o.default,SliderButton:r.default},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1}},watch:{value:function(e,t){this.dragging||Array.isArray(e)&&Array.isArray(t)&&e.every(function(e,i){return e===t[i]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var e=this;return this.range?![this.minValue,this.maxValue].every(function(t,i){return t===e.oldValue[i]}):this.value!==this.oldValue},setValues:function(){var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.$emit("change",[this.minValue,this.maxValue]),this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(!this.range)return void this.$refs.button1.setPosition(e);var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)},onSliderClick:function(e){if(!this.disabled&&!this.dragging)if(this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.$sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.$sliderSize*100)}}},computed:{$sliderSize:function(){return parseInt((0,l.getStyle)(this.$refs.slider,this.vertical?"height":"width"),10)},stops:function(){for(var e=this,t=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s<t;s++)n.push(s*i);return this.range?n.filter(function(t){return t<100*(e.minValue-e.min)/(e.max-e.min)||t>100*(e.maxValue-e.min)/(e.max-e.min)}):n.filter(function(t){return t>100*(e.firstValue-e.min)/(e.max-e.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}}},mounted:function(){this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue]):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue)}}},function(e,t,i){var n=i(13)(i(864),i(865),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(729),o=n(s);t.default={name:"ElSliderButton",components:{ElTooltip:o.default},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1}},data:function(){return{hovering:!1,dragging:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.disabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onDragStart:function(e){this.dragging=!0,this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition)},onDragging:function(e){if(this.dragging){this.displayTooltip();var t=0;this.vertical?(this.currentY=e.clientY,t=(this.startY-this.currentY)/this.$parent.$sliderSize*100):(this.currentX=e.clientX,t=(this.currentX-this.startX)/this.$parent.$sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.setPosition(e.newPosition)},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){e<0?e=0:e>100&&(e=100);var t=100/((this.max-this.min)/this.step),i=Math.round(e/t),n=i*t*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$refs.tooltip&&this.$refs.tooltip.updatePopper(),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:e.hovering,dragging:e.dragging},style:e.wrapperStyle,on:{mouseenter:e.handleMouseEnter,mouseleave:e.handleMouseLeave,mousedown:e.onButtonDown}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top",disabled:!e.showTooltip}},[i("span",{slot:"content"},[e._v(e._s(e.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:e.hovering,dragging:e.dragging}})])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-slider",class:{"is-vertical":e.vertical,"el-slider--with-input":e.showInput}},[e.showInput&&!e.range?i("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:e.step,disabled:e.disabled,controls:e.showInputControls,min:e.min,max:e.max,size:"small"},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}):e._e(),i("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":e.showInput,disabled:e.disabled},style:e.runwayStyle,on:{click:e.onSliderClick}},[i("div",{staticClass:"el-slider__bar",style:e.barStyle}),i("slider-button",{ref:"button1",attrs:{vertical:e.vertical},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}),e.range?i("slider-button",{ref:"button2",attrs:{vertical:e.vertical},model:{value:e.secondValue,callback:function(t){e.secondValue=t},expression:"secondValue"}}):e._e(),e._l(e.stops,function(t){return e.showStops?i("div",{staticClass:"el-slider__stop",style:e.vertical?{bottom:t+"%"}:{left:t+"%"}}):e._e()})],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(868),o=n(s),a=i(872),r=n(a);t.default={install:function(e){e.use(o.default),e.prototype.$loading=r.default},directive:o.default,service:r.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(2),o=n(s),a=i(71),r=o.default.extend(i(869));t.install=function(e){if(!e.prototype.$isServer){var t=function(t,n){n.value?e.nextTick(function(){n.modifiers.fullscreen?(t.originalPosition=document.body.style.position,t.originalOverflow=document.body.style.overflow,(0,a.addClass)(t.mask,"is-fullscreen"),i(document.body,t,n)):((0,a.removeClass)(t.mask,"is-fullscreen"),n.modifiers.body?(t.originalPosition=document.body.style.position,["top","left"].forEach(function(e){var i="top"===e?"scrollTop":"scrollLeft";t.maskStyle[e]=t.getBoundingClientRect()[e]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(e){t.maskStyle[e]=t.getBoundingClientRect()[e]+"px"}),i(document.body,t,n)):(t.originalPosition=t.style.position,i(t,t,n)))}):t.domVisible&&(t.instance.$on("after-leave",function(e){t.domVisible=!1,n.modifiers.fullscreen&&"hidden"!==t.originalOverflow&&(document.body.style.overflow=t.originalOverflow),n.modifiers.fullscreen||n.modifiers.body?document.body.style.position=t.originalPosition:t.style.position=t.originalPosition}),t.instance.visible=!1)},i=function(t,i,n){i.domVisible||(Object.keys(i.maskStyle).forEach(function(e){i.mask.style[e]=i.maskStyle[e]}),"absolute"!==i.originalPosition&&(t.style.position="relative"),n.modifiers.fullscreen&&n.modifiers.lock&&(t.style.overflow="hidden"),i.domVisible=!0,t.appendChild(i.mask),e.nextTick(function(){i.instance.visible=!0}),i.domInserted=!0)};e.directive("loading",{bind:function(e,i){var n=new r({el:document.createElement("div"),data:{text:e.getAttribute("element-loading-text"),fullscreen:!!i.modifiers.fullscreen}});e.instance=n,e.mask=n.$el,e.maskStyle={},t(e,i)},update:function(e,i){e.instance.setText(e.getAttribute("element-loading-text")),i.oldValue!==i.value&&t(e,i)},unbind:function(e,t){e.domInserted&&(t.modifiers.fullscreen||t.modifiers.body?document.body.removeChild(e.mask):e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask))}})}}},function(e,t,i){var n=i(13)(i(870),i(871),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={data:function(){return{text:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}]},[i("div",{staticClass:"el-loading-spinner"},[i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(869),r=n(a),l=i(613),u=n(l),c=o.default.extend(r.default),d={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},h=void 0;c.prototype.originalPosition="",c.prototype.originalOverflow="",c.prototype.close=function(){var e=this;this.fullscreen&&"hidden"!==this.originalOverflow&&(document.body.style.overflow=this.originalOverflow),this.fullscreen||this.body?document.body.style.position=this.originalPosition:this.target.style.position=this.originalPosition,this.fullscreen&&(h=void 0),this.$on("after-leave",function(t){e.$el&&e.$el.parentNode&&e.$el.parentNode.removeChild(e.$el),e.$destroy()}),this.visible=!1};var f=function(e,t,i){var n={};e.fullscreen?(i.originalPosition=document.body.style.position,i.originalOverflow=document.body.style.overflow):e.body?(i.originalPosition=document.body.style.position,["top","left"].forEach(function(t){var i="top"===t?"scrollTop":"scrollLeft";n[t]=e.target.getBoundingClientRect()[t]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(t){n[t]=e.target.getBoundingClientRect()[t]+"px"})):i.originalPosition=t.style.position,Object.keys(n).forEach(function(e){i.$el.style[e]=n[e]})},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!o.default.prototype.$isServer){if(e=(0,u.default)({},d,e),"string"==typeof e.target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&h)return h;var t=e.body?document.body:e.target,i=new c({el:document.createElement("div"),data:e});return f(e,t,i),"absolute"!==i.originalPosition&&(t.style.position="relative"),e.fullscreen&&e.lock&&(t.style.overflow="hidden"),t.appendChild(i.$el),o.default.nextTick(function(){i.visible=!0}),e.fullscreen&&(h=i),i}};t.default=p},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(874),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(875),i(876),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElIcon",props:{name:String}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("i",{class:"el-icon-"+e.name})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(878),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(879),i(880),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElRow",componentName:"ElRow",props:{gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-row",class:["start"!==e.justify?"is-justify-"+e.justify:"","top"!==e.align?"is-align-"+e.align:"",{"el-row--flex":"flex"===e.type}],style:e.style},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(882),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default={name:"ElCol",props:{span:{type:Number,default:24},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var t=this,n=[],s={};return this.gutter&&(s.paddingLeft=this.gutter/2+"px",s.paddingRight=s.paddingLeft),["span","offset","pull","push"].forEach(function(e){t[e]&&n.push("span"!==e?"el-col-"+e+"-"+t[e]:"el-col-"+t[e])}),["xs","sm","md","lg"].forEach(function(e){"number"==typeof t[e]?n.push("el-col-"+e+"-"+t[e]):"object"===i(t[e])&&!function(){var i=t[e];Object.keys(i).forEach(function(t){n.push("span"!==t?"el-col-"+e+"-"+t+"-"+i[t]:"el-col-"+e+"-"+i[t])})}()}),e("div",{class:["el-col",n],style:s},[this.$slots.default])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(884),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(885),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(886),a=n(o),r=i(893),l=n(r),u=i(899),c=n(u),d=i(888),h=n(d),f=i(901),p=n(f);t.default={name:"ElUpload",mixins:[p.default],components:{ElProgress:h.default,UploadList:a.default,Upload:l.default,IframeUpload:c.default},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,onRemove:{type:Function,default:s},onChange:{type:Function,default:s},onPreview:{type:Function},onSuccess:{type:Function,default:s},onProgress:{type:Function,default:s},onError:{type:Function,default:s},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},watch:{fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status="success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};try{t.url=URL.createObjectURL(e)}catch(e){return void console.error(e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(e,t){t&&(e=this.getFile(t));var i=this.uploadFiles;i.splice(i.indexOf(e),1),this.onRemove(e,i)},getFile:function(e){var t,i=this.uploadFiles;return i.every(function(i){return t=e.uid===i.uid?i:null,!t}),t},clearFiles:function(){this.uploadFiles=[]},submit:function(){var e=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(t){e.$refs["upload-inner"].upload(t.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},render:function(e){var t;this.showFileList&&(t=e(a.default,{attrs:{listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}},[]));var i={props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.disabled,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},n=this.$slots.trigger||this.$slots.default,s="undefined"!=typeof FormData||this.$isServer?e("upload",i,[n]):e("iframeUpload",i,[n]);return e("div",null,["picture-card"===this.listType?t:"",this.$slots.trigger?[s,this.$slots.default]:s,this.$slots.tip,"picture-card"!==this.listType?t:""])}}},function(e,t,i){var n=i(13)(i(887),i(892),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(608),o=n(s),a=i(888),r=n(a);t.default={mixins:[o.default],components:{ElProgress:r.default},props:{files:{type:Array,default:function(){return[]}},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(889),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(890),i(891),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return["line","circle"].indexOf(e)>-1}},percentage:{type:Number,default:0,required:!0,validator:function(e){return e>=0&&e<=100}},status:{type:String},strokeWidth:{
+type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e;switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-cross":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}]},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?i("i",{class:e.iconClass}):[e._v(e._s(e.percentage)+"%")]],2):e._e()])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition-group",{class:["el-upload-list","el-upload-list--"+e.listType],attrs:{tag:"ul",name:"list"}},e._l(e.files,function(t){return i("li",{key:t,class:["el-upload-list__item","is-"+t.status]},[["picture-card","picture"].indexOf(e.listType)>-1&&"success"===t.status?i("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):e._e(),i("a",{staticClass:"el-upload-list__item-name",on:{click:function(i){e.handleClick(t)}}},[i("i",{staticClass:"el-icon-document"}),e._v(e._s(t.name)+"\n    ")]),i("label",{staticClass:"el-upload-list__item-status-label"},["success"===t.status?i("i",{class:{"el-icon-circle-check":"text"===e.listType,"el-icon-check":["picture-card","picture"].indexOf(e.listType)>-1}}):e._e(),i("i",{staticClass:"el-icon-close",on:{click:function(i){e.$emit("remove",t)}}})]),"picture-card"===e.listType&&"success"===t.status?i("span",{staticClass:"el-upload-list__item-actions"},[e.handlePreview&&"picture-card"===e.listType?i("span",{staticClass:"el-upload-list__item-preview",on:{click:function(i){e.handlePreview(t)}}},[i("i",{staticClass:"el-icon-view"})]):e._e(),i("span",{staticClass:"el-upload-list__item-delete",on:{click:function(i){e.$emit("remove",t)}}},[i("i",{staticClass:"el-icon-delete2"})])]):e._e(),"uploading"===t.status?i("el-progress",{attrs:{type:"picture-card"===e.listType?"circle":"line","stroke-width":"picture-card"===e.listType?6:2,percentage:e.parsePercentage(t.percentage)}}):e._e()],1)}))},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(894),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(895),o=n(s),a=i(896),r=n(a);t.default={components:{UploadDragger:r.default},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:o.default},disabled:Boolean},data:function(){return{mouseover:!1}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleChange:function(e){var t=e.target.files;t&&(this.uploadFiles(t),this.$refs.input.value=null)},uploadFiles:function(e){var t=this,i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})},upload:function(e,t){var i=this;if(!this.beforeUpload)return this.post(e);var n=this.beforeUpload(e);n&&n.then?n.then(function(t){"[object File]"===Object.prototype.toString.call(t)?i.post(t):i.post(e)},function(){i.onRemove(e,!0)}):n!==!1?this.post(e):this.onRemove(e,!0)},post:function(e){var t=this,i={headers:this.headers,withCredentials:this.withCredentials,file:e,data:this.data,filename:this.name,action:this.action,onProgress:function(i){t.onProgress(i,e)},onSuccess:function(i){t.onSuccess(i,e)},onError:function(i){t.onError(i,e)}},n=this.httpRequest(i);n&&n.then&&n.then(i.onSuccess,i.onError)},handleClick:function(){this.disabled||this.$refs.input.click()}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,o=this.multiple,a=this.accept,r=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t}};return c.class["el-upload--"+r]=!0,e("div",c,[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:o,accept:a},ref:"input",on:{change:s}},[])])}}},function(e,t){"use strict";function i(e,t,i){var n=void 0;n=i.response?i.status+" "+(i.response.error||i.response):i.responseText?i.status+" "+i.responseText:"fail to post "+e+" "+i.status;var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}function n(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}function s(e){if("undefined"!=typeof XMLHttpRequest){var t=new XMLHttpRequest,s=e.action;t.upload&&(t.upload.onprogress=function(t){t.total>0&&(t.percent=t.loaded/t.total*100),e.onProgress(t)});var o=new FormData;e.data&&Object.keys(e.data).map(function(t){o.append(t,e.data[t])}),o.append(e.filename,e.file),t.onerror=function(t){e.onError(t)},t.onload=function(){return t.status<200||t.status>=300?e.onError(i(s,e,t)):void e.onSuccess(n(t))},t.open("post",s,!0),e.withCredentials&&"withCredentials"in t&&(t.withCredentials=!0);var a=e.headers||{};for(var r in a)a.hasOwnProperty(r)&&null!==a[r]&&t.setRequestHeader(r,a[r]);return t.send(o),t}}t.__esModule=!0,t.default=s},function(e,t,i){var n=i(13)(i(897),i(898),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElUploadDrag",props:{disabled:Boolean},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){this.disabled||(this.dragover=!1,this.$emit("file",e.dataTransfer.files))}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-upload-dragger",class:{"is-dragover":e.dragover},on:{drop:function(t){t.preventDefault(),e.onDrop(t)},dragover:function(t){t.preventDefault(),e.onDragover(t)},dragleave:function(t){t.preventDefault(),e.dragover=!1}}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(900),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(896),o=n(s);t.default={components:{UploadDragger:o.default},props:{type:String,data:{},action:{type:String,required:!0},name:{type:String,default:"file"},withCredentials:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},drag:Boolean,listType:String,disabled:Boolean},data:function(){return{mouseover:!1,domain:"",file:null,submitting:!1}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleClick:function(){this.disabled||this.$refs.input.click()},handleChange:function(e){var t=e.target.value;t&&this.uploadFiles(t)},uploadFiles:function(e){if(!this.submitting){this.submitting=!0,this.file=e,this.onStart(e);var t=this.getFormNode(),i=this.getFormDataNode(),n=this.data;"function"==typeof n&&(n=n(e));var s=[];for(var o in n)n.hasOwnProperty(o)&&s.push('<input name="'+o+'" value="'+n[o]+'"/>');i.innerHTML=s.join(""),t.submit(),i.innerHTML=""}},getFormNode:function(){return this.$refs.form},getFormDataNode:function(){return this.$refs.data}},created:function(){this.frameName="frame-"+Date.now()},mounted:function(){var e=this;!this.$isServer&&window.addEventListener("message",function(t){if(e.file){var i=new URL(e.action).origin;if(t.origin===i){var n=t.data;"success"===n.result?e.onSuccess(n,e.file):"failed"===n.result&&e.onError(n,e.file),e.submitting=!1,e.file=null}}},!1)},render:function(e){var t=this.drag,i=this.uploadFiles,n=this.listType,s=this.frameName,o=this.disabled,a={"el-upload":!0};return a["el-upload--"+n]=!0,e("div",{class:a,on:{click:this.handleClick},nativeOn:{drop:this.onDrop,dragover:this.handleDragover,dragleave:this.handleDragleave}},[e("iframe",{on:{load:this.onload},ref:"iframe",attrs:{name:s}},[]),e("form",{ref:"form",attrs:{action:this.action,target:s,enctype:"multipart/form-data",method:"POST"}},[e("input",{class:"el-upload__input",attrs:{type:"file",name:"file",accept:this.accept},ref:"input",on:{change:this.handleChange}},[]),e("input",{attrs:{type:"hidden",name:"documentDomain",value:this.$isServer?"":document.domain}},[]),e("span",{ref:"data"},[])]),t?e("upload-dragger",{on:{file:i},attrs:{disabled:o}},[this.$slots.default]):this.$slots.default])}}},function(e,t,i){"use strict";t.__esModule=!0,t.default={mounted:function(){return},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(903),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(904),i(905),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-spinner"},[i("svg",{staticClass:"el-spinner-inner",style:{width:e.radius/2+"px",height:e.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:e.strokeColor,"stroke-width":e.strokeWidth}})])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(907),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(618),r=o.default.extend(i(908)),l=void 0,u=[],c=1,d=function e(t){if(!o.default.prototype.$isServer){t=t||{},"string"==typeof t&&(t={message:t});var i=t.onClose,n="message_"+c++;return t.onClose=function(){e.close(n,i)},l=new r({data:t}),l.id=n,l.vm=l.$mount(),document.body.appendChild(l.vm.$el),l.vm.visible=!0,l.dom=l.vm.$el,l.dom.style.zIndex=a.PopupManager.nextZIndex(),u.push(l),l.vm}};["success","warning","info","error"].forEach(function(e){d[e]=function(t){return"string"==typeof t&&(t={message:t}),t.type=e,d(t)}}),d.close=function(e,t){for(var i=0,n=u.length;i<n;i++)if(e===u[i].id){"function"==typeof t&&t(u[i]),u.splice(i,1);break}},d.closeAll=function(){for(var e=u.length-1;e>=0;e--)u[e].close()},t.default=d},function(e,t,i){var n=i(13)(i(909),i(915),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null}},computed:{typeImg:function(){return i(910)("./"+this.type+".svg")}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){this.startTimer()}}},function(e,t,i){function n(e){return i(s(e))}function s(e){return o[e]||function(){throw new Error("Cannot find module '"+e+"'.")}()}var o={"./error.svg":911,"./info.svg":912,"./success.svg":913,"./warning.svg":914};n.keys=function(){return Object.keys(o)},n.resolve=s,e.exports=n,n.id=910},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9kYW5nZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iRWxlbWVudC1ndWlkZWxpbmUtdjAuMi40IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWVzc2FnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwLjAwMDAwMCwgLTMzMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuW4puWAvuWQkV/kv6Hmga8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMzMyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl9kYW5nZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiNGRjQ5NDkiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuODE3MjYyNywxNi4zNDUxNzk2IEMyNS45MzkwOTAyLDE2LjIyMzM0ODMgMjYsMTYuMDc2MTQxOCAyNiwxNS45MDM1NTIzIEMyNiwxNS43MzA5NjI4IDI1LjkzOTA5MDIsMTUuNTgzNzU2MyAyNS44MTcyNjI3LDE1LjQ2MTkyODkgTDI0LjUwNzYxNTcsMTQuMTgyNzQxMSBDMjQuMzg1Nzg4MiwxNC4wNjA5MTM3IDI0LjI0MzY1NzUsMTQgMjQuMDgxMjE5NiwxNCBDMjMuOTE4NzgxNywxNCAyMy43NzY2NTEsMTQuMDYwOTEzNyAyMy42NTQ4MjM1LDE0LjE4Mjc0MTEgTDIwLDE3LjgzNzU2MzUgTDE2LjMxNDcyMTYsMTQuMTgyNzQxMSBDMTYuMTkyODkwMiwxNC4wNjA5MTM3IDE2LjA1MDc1OTUsMTQgMTUuODg4MzIxNiwxNCBDMTUuNzI1ODg3NiwxNCAxNS41ODM3NTY5LDE0LjA2MDkxMzcgMTUuNDYxOTI5NCwxNC4xODI3NDExIEwxNC4xNTIyODI0LDE1LjQ2MTkyODkgQzE0LjA1MDc1ODIsMTUuNTgzNzU2MyAxNCwxNS43MzA5NjI4IDE0LDE1LjkwMzU1MjMgQzE0LDE2LjA3NjE0MTggMTQuMDUwNzU4MiwxNi4yMjMzNDgzIDE0LjE1MjI4MjQsMTYuMzQ1MTc5NiBMMTcuODM3NTYwOCwyMC4wMDAwMDE5IEwxNC4xNTIyODI0LDIzLjY1NDgyNDMgQzE0LjA1MDc1ODIsMjMuNzc2NjUxNyAxNCwyMy45MjM4NTgyIDE0LDI0LjA5NjQ0NzcgQzE0LDI0LjI2OTAzNzIgMTQuMDUwNzU4MiwyNC40MTYyNDM3IDE0LjE1MjI4MjQsMjQuNTM4MDcxMSBMMTUuNDYxOTI5NCwyNS44MTcyNTg5IEMxNS41ODM3NTY5LDI1LjkzOTA4NjMgMTUuNzI1ODg3NiwyNiAxNS44ODgzMjE2LDI2IEMxNi4wNTA3NTk1LDI2IDE2LjE5Mjg5MDIsMjUuOTM5MDg2MyAxNi4zMTQ3MjE2LDI1LjgxNzI1ODkgTDIwLDIyLjE2MjQzNjUgTDIzLjY1NDgyMzUsMjUuODE3MjU4OSBDMjMuNzc2NjUxLDI1LjkzOTA4NjMgMjMuOTE4NzgxNywyNiAyNC4wODEyMTk2LDI2IEMyNC4yNDM2NTc1LDI2IDI0LjM4NTc4ODIsMjUuOTM5MDg2MyAyNC41MDc2MTU3LDI1LjgxNzI1ODkgTDI1LjgxNzI2MjcsMjQuNTM4MDcxMSBDMjUuOTM5MDkwMiwyNC40MTYyNDM3IDI2LDI0LjI2OTAzNzIgMjYsMjQuMDk2NDQ3NyBDMjYsMjMuOTIzODU4MiAyNS45MzkwOTAyLDIzLjc3NjY1MTcgMjUuODE3MjYyNywyMy42NTQ4MjQzIEwyMi4xMzE5ODA0LDIwLjAwMDAwMTkgTDI1LjgxNzI2MjcsMTYuMzQ1MTc5NiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0xNTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDE1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25faW5mbyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzUwQkZGRiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMS42MTUzODQ2LDI2LjU0MzIwOTkgQzIxLjYxNTM4NDYsMjYuOTQ3ODc1MSAyMS40NTgzMzQ4LDI3LjI5MTgzNjggMjEuMTQ0MjMwOCwyNy41NzUxMDI5IEMyMC44MzAxMjY4LDI3Ljg1ODM2ODkgMjAuNDQ4NzE5NCwyOCAyMCwyOCBDMTkuNTUxMjgwNiwyOCAxOS4xNjk4NzMyLDI3Ljg1ODM2ODkgMTguODU1NzY5MiwyNy41NzUxMDI5IEMxOC41NDE2NjUyLDI3LjI5MTgzNjggMTguMzg0NjE1NCwyNi45NDc4NzUxIDE4LjM4NDYxNTQsMjYuNTQzMjA5OSBMMTguMzg0NjE1NCwxOS43NDQ4NTYgQzE4LjM4NDYxNTQsMTkuMzQwMTkwNyAxOC41NDE2NjUyLDE4Ljk5NjIyOSAxOC44NTU3NjkyLDE4LjcxMjk2MyBDMTkuMTY5ODczMiwxOC40Mjk2OTY5IDE5LjU1MTI4MDYsMTguMjg4MDY1OCAyMCwxOC4yODgwNjU4IEMyMC40NDg3MTk0LDE4LjI4ODA2NTggMjAuODMwMTI2OCwxOC40Mjk2OTY5IDIxLjE0NDIzMDgsMTguNzEyOTYzIEMyMS40NTgzMzQ4LDE4Ljk5NjIyOSAyMS42MTUzODQ2LDE5LjM0MDE5MDcgMjEuNjE1Mzg0NiwxOS43NDQ4NTYgTDIxLjYxNTM4NDYsMjYuNTQzMjA5OSBaIE0yMCwxNS44MDQyOTgxIEMxOS40NDQ0NDI3LDE1LjgwNDI5ODEgMTguOTcyMjI0LDE1LjYxOTM2ODcgMTguNTgzMzMzMywxNS4yNDk1MDQ2IEMxOC4xOTQ0NDI3LDE0Ljg3OTY0MDYgMTgsMTQuNDMwNTI1NSAxOCwxMy45MDIxNDkxIEMxOCwxMy4zNzM3NzI2IDE4LjE5NDQ0MjcsMTIuOTI0NjU3NSAxOC41ODMzMzMzLDEyLjU1NDc5MzUgQzE4Ljk3MjIyNCwxMi4xODQ5Mjk1IDE5LjQ0NDQ0MjcsMTIgMjAsMTIgQzIwLjU1NTU1NzMsMTIgMjEuMDI3Nzc2LDEyLjE4NDkyOTUgMjEuNDE2NjY2NywxMi41NTQ3OTM1IEMyMS44MDU1NTczLDEyLjkyNDY1NzUgMjIsMTMuMzczNzcyNiAyMiwxMy45MDIxNDkxIEMyMiwxNC40MzA1MjU1IDIxLjgwNTU1NzMsMTQuODc5NjQwNiAyMS40MTY2NjY3LDE1LjI0OTUwNDYgQzIxLjAyNzc3NiwxNS42MTkzNjg3IDIwLjU1NTU1NzMsMTUuODA0Mjk4MSAyMCwxNS44MDQyOTgxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9zdWNjZXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yMTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDIxMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25fc3VjY2VzcyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzEzQ0U2NiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy44MjU1ODE0LDE3LjE0ODQzNTcgTDE5LjAxNzQ0LDI1LjgyODEyMTMgQzE4LjkwMTE2MDksMjUuOTQyNzA4MyAxOC43NjU1MDMzLDI2IDE4LjYxMDQ2NywyNiBDMTguNDU1NDI3LDI2IDE4LjMxOTc2OTMsMjUuOTQyNzA4MyAxOC4yMDM0ODY1LDI1LjgyODEyMTMgTDE4LjAyOTA3MTYsMjUuNjU2MjUgTDEzLjE3NDQxODYsMjAuODQzNzUgQzEzLjA1ODEzOTUsMjAuNzI5MTYzIDEzLDIwLjU5NTQ4MzcgMTMsMjAuNDQyNzA0NyBDMTMsMjAuMjg5OTI5MyAxMy4wNTgxMzk1LDIwLjE1NjI1IDEzLjE3NDQxODYsMjAuMDQxNjY2NyBMMTQuMzY2Mjc3MiwxOC44NjcxODU3IEMxNC40ODI1NiwxOC43NTI2MDIzIDE0LjYxODIxNzcsMTguNjk1MzEwNyAxNC43NzMyNTc3LDE4LjY5NTMxMDcgQzE0LjkyODI5NCwxOC42OTUzMTA3IDE1LjA2Mzk1MTYsMTguNzUyNjAyMyAxNS4xODAyMzA3LDE4Ljg2NzE4NTcgTDE4LjYxMDQ2NywyMi4yNzYwMzggTDI1LjgxOTc2OTMsMTUuMTcxODcxMyBDMjUuOTM2MDQ4NCwxNS4wNTcyODggMjYuMDcxNzA2LDE1IDI2LjIyNjc0MjMsMTUgQzI2LjM4MTc4MjMsMTUgMjYuNTE3NDQsMTUuMDU3Mjg4IDI2LjYzMzcyMjgsMTUuMTcxODcxMyBMMjcuODI1NTgxNCwxNi4zNDYzNTIzIEMyNy45NDE4NjA1LDE2LjQ2MDkzNTcgMjgsMTYuNTk0NjE1IDI4LDE2Ljc0NzM5NCBDMjgsMTYuOTAwMTczIDI3Ljk0MTg2MDUsMTcuMDMzODUyMyAyNy44MjU1ODE0LDE3LjE0ODQzNTcgTDI3LjgyNTU4MTQsMTcuMTQ4NDM1NyBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl93YXJuaW5nPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yNzIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMjcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl93YXJuaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjRjdCQTJBIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjYxNTM4NDYsMjYuNTQzMjA5OSBDMjEuNjE1Mzg0NiwyNi45NDc4NzUxIDIxLjQ1ODMzNDgsMjcuMjkxODM2OCAyMS4xNDQyMzA4LDI3LjU3NTEwMjkgQzIwLjgzMDEyNjgsMjcuODU4MzY4OSAyMC40NDg3MTk0LDI4IDIwLDI4IEMxOS41NTEyODA2LDI4IDE5LjE2OTg3MzIsMjcuODU4MzY4OSAxOC44NTU3NjkyLDI3LjU3NTEwMjkgQzE4LjU0MTY2NTIsMjcuMjkxODM2OCAxOC4zODQ2MTU0LDI2Ljk0Nzg3NTEgMTguMzg0NjE1NCwyNi41NDMyMDk5IEwxOC4zODQ2MTU0LDE5Ljc0NDg1NiBDMTguMzg0NjE1NCwxOS4zNDAxOTA3IDE4LjU0MTY2NTIsMTguOTk2MjI5IDE4Ljg1NTc2OTIsMTguNzEyOTYzIEMxOS4xNjk4NzMyLDE4LjQyOTY5NjkgMTkuNTUxMjgwNiwxOC4yODgwNjU4IDIwLDE4LjI4ODA2NTggQzIwLjQ0ODcxOTQsMTguMjg4MDY1OCAyMC44MzAxMjY4LDE4LjQyOTY5NjkgMjEuMTQ0MjMwOCwxOC43MTI5NjMgQzIxLjQ1ODMzNDgsMTguOTk2MjI5IDIxLjYxNTM4NDYsMTkuMzQwMTkwNyAyMS42MTUzODQ2LDE5Ljc0NDg1NiBMMjEuNjE1Mzg0NiwyNi41NDMyMDk5IFogTTIwLDE1LjgwNDI5ODEgQzE5LjQ0NDQ0MjcsMTUuODA0Mjk4MSAxOC45NzIyMjQsMTUuNjE5MzY4NyAxOC41ODMzMzMzLDE1LjI0OTUwNDYgQzE4LjE5NDQ0MjcsMTQuODc5NjQwNiAxOCwxNC40MzA1MjU1IDE4LDEzLjkwMjE0OTEgQzE4LDEzLjM3Mzc3MjYgMTguMTk0NDQyNywxMi45MjQ2NTc1IDE4LjU4MzMzMzMsMTIuNTU0NzkzNSBDMTguOTcyMjI0LDEyLjE4NDkyOTUgMTkuNDQ0NDQyNywxMiAyMCwxMiBDMjAuNTU1NTU3MywxMiAyMS4wMjc3NzYsMTIuMTg0OTI5NSAyMS40MTY2NjY3LDEyLjU1NDc5MzUgQzIxLjgwNTU1NzMsMTIuOTI0NjU3NSAyMiwxMy4zNzM3NzI2IDIyLDEzLjkwMjE0OTEgQzIyLDE0LjQzMDUyNTUgMjEuODA1NTU3MywxNC44Nzk2NDA2IDIxLjQxNjY2NjcsMTUuMjQ5NTA0NiBDMjEuMDI3Nzc2LDE1LjYxOTM2ODcgMjAuNTU1NTU3MywxNS44MDQyOTgxIDIwLDE1LjgwNDI5ODEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMjAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-message",class:e.customClass,on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?e._e():i("img",{staticClass:"el-message__img",attrs:{src:e.typeImg,alt:""}}),i("div",{staticClass:"el-message__group",class:{"is-with-icon":e.iconClass}},[i("p",[e.iconClass?i("i",{staticClass:"el-message__icon",class:e.iconClass}):e._e(),e._v(e._s(e.message))]),e.showClose?i("div",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(917),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(918),i(919),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||e.isDot),expression:"!hidden && ( content || isDot )"}],staticClass:"el-badge__content",class:{"is-fixed":e.$slots.default,"is-dot":e.isDot},domProps:{textContent:e._s(e.content)}})])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(921),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(922),i(923),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElCard",props:["header","bodyStyle"]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(925),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(926),i(927),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71);t.default={name:"ElRate",data:function(){return{classMap:{},colorMap:{},pointerAtLeftHalf:!1,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},textTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return e=this.disabled?this.textTemplate.replace(/\{\s*value\s*\}/,this.value):this.texts[Math.ceil(this.currentValue)-1]},decimalStyle:function(){var e="";return this.disabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.disabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e}},watch:{value:function(e){this.$emit("change",e),this.currentValue=e}},methods:{getValueFromMap:function(e,t){var i="";return i=e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.disabled&&this.valueDecimal>0&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&(e-.5).toFixed(1)===this.currentValue.toFixed(1);return t||i},getIconStyle:function(e){var t=this.disabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.disabled||(this.allowHalf&&this.pointerAtLeftHalf?this.$emit("input",this.currentValue):this.$emit("input",e))},setCurrentValue:function(e,t){if(!this.disabled){if(this.allowHalf){var i=t.target;(0,n.hasClass)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),(0,n.hasClass)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.disabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0),this.classMap={lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass},this.colorMap={lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-rate"},[e._l(e.max,function(t){return i("span",{staticClass:"el-rate__item",style:{cursor:e.disabled?"auto":"pointer"},on:{mousemove:function(i){e.setCurrentValue(t,i)},mouseleave:e.resetCurrentValue,click:function(i){e.selectValue(t)}}},[i("i",{staticClass:"el-rate__icon",class:[e.classes[t-1],{hover:e.hoverIndex===t}],style:e.getIconStyle(t)},[e.showDecimalIcon(t)?i("i",{staticClass:"el-rate__decimal",class:e.decimalIconClass,style:e.decimalStyle}):e._e()])])}),e.showText?i("span",{staticClass:"el-rate__text",style:{color:e.textColor}},[e._v(e._s(e.text))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(929),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(930),i(931),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,
+t.default={name:"ElSteps",props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,center:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-steps",class:["is-"+e.direction,e.center?"is-center":""]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(933),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(934),i(935),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,style:{},lineStyle:{},mainOffset:0,isLast:!1,internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},computed:{currentStatus:function(){return this.status||this.internalStatus}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?t=50:"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i},adjustPosition:function(){this.style={},this.$parent.stepOffset=this.$el.getBoundingClientRect().width/(this.$parent.steps.length-1)}},mounted:function(){var e=this,t=this.$parent,i=t.center,n=t.steps.length,s=this.isLast=t.steps[t.steps.length-1]===this,o="number"==typeof t.space?t.space+"px":t.space?t.space:100/(i?n-1:n)+"%";"horizontal"===t.direction?(this.style={width:o},t.alignCenter&&(this.mainOffset=-this.$refs.title.getBoundingClientRect().width/2+16+"px"),i&&s&&this.adjustPosition()):s||(this.style={height:o});var a=this.$watch("index",function(t){e.$watch("$parent.active",e.updateStatus,{immediate:!0}),a()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:["is-"+e.$parent.direction],style:[e.style,e.isLast?"":{marginRight:-e.$parent.stepOffset+"px"}]},[i("div",{staticClass:"el-step__head",class:["is-"+e.currentStatus,{"is-text":!e.icon}]},[i("div",{staticClass:"el-step__line",class:["is-"+e.$parent.direction,{"is-icon":e.icon}],style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("span",{staticClass:"el-step__icon"},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{class:["el-icon-"+e.icon]}):i("div",[e._v(e._s(e.index+1))])]):i("i",{class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main",style:{marginLeft:e.mainOffset}},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(937),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(938),i(939),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(31),o=n(s),a=i(635),r=n(a),l=i(632);t.default={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},watch:{items:function(e){e.length>0&&this.setActiveItem(0)},activeIndex:function(e,t){this.resetItemPosition(),this.$emit("change",e,t)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(e){var t=this;this.items.forEach(function(i,n){e===t.itemInStage(i,n)&&(i.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(){var e=this;this.items.forEach(function(t,i){t.translateItem(i,e.activeIndex)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.activeIndex=0},pauseTimer:function(){clearInterval(this.timer)},startTimer:function(){this.interval<=0||!this.autoplay||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(e){if("string"==typeof e){var t=this.items.filter(function(t){return t.name===e});t.length>0&&(e=this.items.indexOf(t[0]))}if(e=Number(e),!isNaN(e)&&e===Math.floor(e)){var i=this.items.length;e<0?this.activeIndex=i-1:e>=i?this.activeIndex=0:this.activeIndex=e}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var e=this;this.handleItemChange=(0,r.default)(100,this.updateItems),this.throttledArrowClick=(0,o.default)(300,!0,function(t){e.setActiveItem(t)}),this.throttledIndicatorHover=(0,o.default)(300,function(t){e.handleIndicatorHover(t)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){(0,l.addResizeListener)(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&e.initialIndex>=0&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&(0,l.removeResizeListener)(this.$el,this.resetItemPosition)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===e.type},on:{mouseenter:function(t){t.stopPropagation(),e.handleMouseEnter(t)},mouseleave:function(t){t.stopPropagation(),e.handleMouseLeave(t)}}},[i("div",{staticClass:"el-carousel__container",style:{height:e.height}},[i("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",on:{mouseenter:function(t){e.handleButtonEnter("left")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex-1)}}},[i("i",{staticClass:"el-icon-arrow-left"})]):e._e()]),i("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",on:{mouseenter:function(t){e.handleButtonEnter("right")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex+1)}}},[i("i",{staticClass:"el-icon-arrow-right"})]):e._e()]),e._t("default")],2),"none"!==e.indicatorPosition?i("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--outside":"outside"===e.indicatorPosition||"card"===e.type}},e._l(e.items,function(t,n){return i("li",{staticClass:"el-carousel__indicator",class:{"is-active":n===e.activeIndex},on:{mouseenter:function(t){e.throttledIndicatorHover(n)},click:function(t){t.stopPropagation(),e.handleIndicatorClick(n)}}},[i("button",{staticClass:"el-carousel__button"})])})):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(941),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(942),i(943),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i=.83;t.default={name:"ElCarouselItem",props:{name:String},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&t-e>=i/2?i+1:e>t+1&&e-t>=i/2?-2:e},calculateTranslate:function(e,t,n){return this.inStage?n*((2-i)*(e-t)+1)/4:e<t?-(1+i)*n/4:(3+i)*n/4},translateItem:function(e,t){var n=this.$parent.$el.offsetWidth,s=this.$parent.items.length;e!==t&&s>2&&(e=this.processIndex(e,t,s)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:i):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.handleItemChange()},destroyed:function(){this.$parent&&this.$parent.handleItemChange()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(945),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(946),i(947),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);i>-1?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(949),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(950),i(951),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[o.default],data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0}},props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return this.$parent.activeNames.indexOf(this.name)>-1}},watch:{isActive:function(e){}},methods:{handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this)}},mounted:function(){}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse-item",class:{"is-active":e.isActive}},[i("div",{staticClass:"el-collapse-item__header",on:{click:e.handleHeaderClick}},[i("i",{staticClass:"el-collapse-item__header__arrow el-icon-arrow-right"}),e._t("title",[e._v(e._s(e.title))])],2),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap"},[i("div",{staticClass:"el-collapse-item__content"},[e._t("default")],2)])])],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(953),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(954),i(958),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(955),r=n(a),l=i(609),u=n(l),c=i(617),d=n(c),h=i(636),f=n(h),p=i(607),m=n(p),v=i(608),g=n(v),y=i(15),b=i(635),_=n(b),C={props:{placement:{type:String,default:"bottom-start"},appendToBody:d.default.props.appendToBody,offset:d.default.props.offset,boundariesPadding:d.default.props.boundariesPadding,popperOptions:d.default.props.popperOptions},methods:d.default.methods,data:d.default.data,beforeDestroy:d.default.beforeDestroy};t.default={name:"ElCascader",directives:{Clickoutside:f.default},mixins:[C,m.default,g.default],components:{ElInput:u.default},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},placeholder:{type:String,default:function(){return(0,y.t)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300}},data:function(){return{currentValue:this.value,menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},currentLabels:function(){var e=this,t=this.options,i=[];return this.currentValue.forEach(function(n){var s=t&&t.filter(function(t){return t[e.valueKey]===n})[0];s&&(i.push(s[e.labelKey]),t=s[e.childrenKey])}),i}},watch:{menuVisible:function(e){e?this.showMenu():this.hideMenu()},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new o.default(r.default).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.popperElm=this.menu.$el,this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy)},showMenu:function(){var e=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(t){e.updatePopper(),e.menu.inputWidth=e.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handlePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t&&(this.menuVisible=!1)},handleInputChange:function(e){var t=this;if(this.menuVisible){var i=this.flatOptions;if(!e)return void(this.menu.options=this.options);var n=i.filter(function(i){return i.some(function(i){return new RegExp(e,"i").test(i[t.labelKey])})});n=n.length>0?n.map(function(i){return{__IS__FLAT__OPTIONS:!0,value:i.map(function(e){return e[t.valueKey]}),label:t.renderFilteredOptionLabel(e,i)}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n}},renderFilteredOptionLabel:function(e,t){var i=this;return t.map(function(t,n){var s=t[i.labelKey],o=s.toLowerCase().indexOf(e.toLowerCase()),a=s.slice(o,e.length+o),r=o>-1?i.highlightKeyword(s,a):s;return 0===n?r:[" / ",r]})},highlightKeyword:function(e,t){var i=this,n=this._c;return e.split(t).map(function(e,s){return 0===s?e:[n("span",{class:{"el-cascader-menu__item__keyword":!0}},[i._v(t)]),e]})},flattenOptions:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=[];return e.forEach(function(e){var s=i.concat(e);e[t.childrenKey]?(t.changeOnSelect&&n.push(s),n=n.concat(t.flattenOptions(e[t.childrenKey],s))):n.push(s)}),n},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){this.menuVisible=!1},handleClick:function(){if(!this.disabled)return this.filterable?(this.menuVisible=!0,void this.$refs.input.$refs.input.focus()):void(this.menuVisible=!this.menuVisible)}},created:function(){var e=this;this.debouncedInputChange=(0,_.default)(this.debounce,function(t){e.handleInputChange(t)})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}}},function(e,t,i){var n=i(13)(i(956),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(957),o=n(s);t.default={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:""}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{cache:!1,get:function(){var e=this,t=this.activeValue,i=["label","value","children","disabled"],n=function t(n){n.forEach(function(n){n.__IS__FLAT__OPTIONS||(i.forEach(function(t){var i=n[e.props[t]||t];i&&(n[t]=i)}),Array.isArray(n.children)&&t(n.children))})},s=function e(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],s=n.length;n[s]=i;var o=t[s];return o&&(i=i.filter(function(e){return e.value===o})[0],i&&i.children&&e(i.children,n)),n};return n(this.options),s(this.options)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue)},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue,!1):this.$emit("activeItemChange",this.activeValue)}},render:function(e){var t=this,i=this.activeValue,n=this.activeOptions,s=this.visible,a=this.expandTrigger,r=this.popperClass,l=this._l(n,function(n,s){var r=!1,l=t._l(n,function(n){var l={on:{}};if(n.__IS__FLAT__OPTIONS&&(r=!0),!n.disabled)if(n.children){var u={click:"click",hover:"mouseenter"}[a];l.on[u]=function(){t.activeItem(n,s)}}else l.on.click=function(){t.select(n,s)};return e("li",(0,o.default)([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":n.children,"is-active":n.value===i[s],"is-disabled":n.disabled}},l]),[n.label])}),u={};return r&&(u.minWidth=t.inputWidth+"px"),e("ul",{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":r},style:u},[l])});return e("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":this.handleMenuLeave}},[e("div",{directives:[{name:"show",value:s}],class:["el-cascader-menus",r]},[l])])}}},function(e,t){function i(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}var n=/^(attrs|props|on|nativeOn|class|style|hook)$/;e.exports=function(e){return e.reduce(function(e,t){var s,o,a,r,l;for(a in t)if(s=e[a],o=t[a],s&&n.test(a))if("class"===a&&("string"==typeof s&&(l=s,e[a]=s={},s[l]=!0),"string"==typeof o&&(l=o,t[a]=o={},o[l]=!0)),"on"===a||"nativeOn"===a||"hook"===a)for(r in o)s[r]=i(s[r],o[r]);else if(Array.isArray(s))e[a]=s.concat(o);else if(Array.isArray(o))e[a]=[s].concat(o);else for(r in o)s[r]=o[r];else e[a]=t[a];return e},{})}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":e.menuVisible,"is-disabled":e.disabled},e.size?"el-cascader--"+e.size:""],on:{click:e.handleClick,mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}}},[i("el-input",{ref:"input",attrs:{readonly:!e.filterable,placeholder:e.currentLabels.length?void 0:e.placeholder,"validate-event":!1,size:e.size,disabled:e.disabled},on:{change:e.debouncedInputChange},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}},[i("template",{slot:"icon"},[e.clearable&&e.inputHover&&e.currentLabels.length?i("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:e.clearValue}}):i("i",{key:"2",staticClass:"el-input__icon el-icon-caret-bottom",class:{"is-reverse":e.menuVisible}})])],2),i("span",{directives:[{name:"show",rawName:"v-show",value:""===e.inputValue,expression:"inputValue === ''"}],staticClass:"el-cascader__label"},[e.showAllLevels?[e._l(e.currentLabels,function(t,n){return[e._v("\n        "+e._s(t)+"\n        "),n<e.currentLabels.length-1?i("span",[e._v(" / ")]):e._e()]})]:[e._v("\n      "+e._s(e.currentLabels[e.currentLabels.length-1])+"\n    ")]],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(960),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(961),i(976),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(962),o=n(s),a=i(963),r=n(a),l=i(636),u=n(l);t.default={name:"ElColorPicker",props:{value:{type:String},showAlpha:{type:Boolean},colorFormat:{type:String}},directives:{Clickoutside:u.default},computed:{displayedColor:function(){if(this.value||this.showPanelColor){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return this.showAlpha?"rgba("+t+", "+i+", "+n+", "+this.color.get("alpha")/100+")":"rgb("+t+", "+i+", "+n+")"}return"transparent"}},watch:{value:function(e){e&&e!==this.color.value&&this.color.fromString(e)},color:{deep:!0,handler:function(){this.showPanelColor=!0}}},methods:{confirmValue:function(e){this.$emit("input",this.color.value),this.$emit("change",this.color.value),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var e=this;this.$nextTick(function(t){e.value?e.color.fromString(e.value):e.showPanelColor=!1})}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){var e=new o.default({enableAlpha:this.showAlpha,format:this.colorFormat});return{color:e,showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:r.default}}},function(e,t){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},o=function(e){return"string"==typeof e&&e.indexOf(".")!==-1&&1===parseFloat(e)},a=function(e){return"string"==typeof e&&e.indexOf("%")!==-1},r=function(e,t){o(e)&&(e="100%");var i=a(e);return e=Math.min(t,Math.max(0,parseFloat(e))),i&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},l={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},u=function(e){var t=e.r,i=e.g,n=e.b,s=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(l[t]||t)+(l[i]||i)};return isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+s(t)+s(i)+s(n)},c={A:10,B:11,C:12,D:13,E:14,F:15},d=function(e){return 2===e.length?16*(c[e[0].toUpperCase()]||+e[0])+(c[e[1].toUpperCase()]||+e[1]):c[e[1].toUpperCase()]||+e[1]},h=function(e,t,i){t/=100,i/=100;var n=t,s=Math.max(i,.01),o=void 0,a=void 0;return i*=2,t*=i<=1?i:2-i,n*=s<=1?s:2-s,a=(i+t)/2,o=0===i?2*n/(s+n):2*t/(i+t),{h:e,s:100*o,v:100*a}},f=function(e,t,i){e=r(e,255),t=r(t,255),i=r(i,255);var n=Math.max(e,t,i),s=Math.min(e,t,i),o=void 0,a=void 0,l=n,u=n-s;if(a=0===n?0:u/n,n===s)o=0;else{switch(n){case e:o=(t-i)/u+(t<i?6:0);break;case t:o=(i-e)/u+2;break;case i:o=(e-t)/u+4}o/=6}return{h:Math.round(360*o),s:Math.round(100*a),v:Math.round(100*l)}},p=function(e,t,i){e=6*r(e,360),t=r(t,100),i=r(i,100);var n=Math.floor(e),s=e-n,o=i*(1-t),a=i*(1-s*t),l=i*(1-(1-s)*t),u=n%6,c=[i,a,o,o,l,i][u],d=[l,i,i,a,o,o][u],h=[o,o,l,i,i,a][u];return{r:Math.round(255*c),g:Math.round(255*d),b:Math.round(255*h)}},m=function(){function e(t){i(this,e),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",t=t||{};for(var n in t)t.hasOwnProperty(n)&&(this[n]=t[n]);this.doOnChange()}return e.prototype.set=function(e,t){if(1!==arguments.length||"object"!==("undefined"==typeof e?"undefined":n(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},e.prototype.get=function(e){return this["_"+e]},e.prototype.toRgb=function(){return p(this._hue,this._saturation,this._value)},e.prototype.fromString=function(e){var t=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var i=function(e,i,n){t._hue=e,t._saturation=i,t._value=n,t.doOnChange()};if(e.indexOf("hsl")!==-1){var n=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===n.length&&(this._alpha=Math.floor(100*parseFloat(n[3]))),n.length>=3){var s=h(n[0],n[1],n[2]),o=s.h,a=s.s,r=s.v;i(o,a,r)}}else if(e.indexOf("hsv")!==-1){var l=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});4===l.length&&(this._alpha=Math.floor(100*parseFloat(l[3]))),l.length>=3&&i(l[0],l[1],l[2])}else if(e.indexOf("rgb")!==-1){var u=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===u.length&&(this._alpha=Math.floor(100*parseFloat(u[3]))),u.length>=3){var c=f(u[0],u[1],u[2]),p=c.h,m=c.s,v=c.v;i(p,m,v)}}else if(e.indexOf("#")!==-1){var g=e.replace("#","").trim(),y=void 0,b=void 0,_=void 0;3===g.length?(y=d(g[0]+g[0]),b=d(g[1]+g[1]),_=d(g[2]+g[2])):6===g.length&&(y=d(g.substring(0,2)),b=d(g.substring(2,4)),_=d(g.substring(4)));var C=f(y,b,_),x=C.h,w=C.s,M=C.v;i(x,w,M)}},e.prototype.doOnChange=function(){var e=this._hue,t=this._saturation,i=this._value,n=this._alpha,o=this.format;if(this.enableAlpha)switch(o){case"hsl":var a=s(e,t/100,i/100);this.value="hsla("+e+", "+Math.round(100*a[1])+"%, "+Math.round(100*a[2])+"%, "+n/100+")";break;case"hsv":this.value="hsva("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%, "+n/100+")";break;default:var r=p(e,t,i),l=r.r,c=r.g,d=r.b;this.value="rgba("+l+", "+c+", "+d+", "+n/100+")"}else switch(o){case"hsl":var h=s(e,t/100,i/100);this.value="hsl("+e+", "+Math.round(100*h[1])+"%, "+Math.round(100*h[2])+"%)";break;case"hsv":this.value="hsv("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%)";break;case"rgb":var f=p(e,t,i),m=f.r,v=f.g,g=f.b;this.value="rgb("+m+", "+v+", "+g+")";break;default:this.value=u(p(e,t,i))}},e}();t.default=m},function(e,t,i){var n=i(13)(i(964),i(975),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(965),o=n(s),a=i(969),r=n(a),l=i(972),u=n(l),c=i(617),d=n(c),h=i(608),f=n(h);t.default={name:"el-color-picker-dropdown",mixins:[d.default,f.default],components:{SvPanel:o.default,HueSlider:r.default,AlphaSlider:u.default},props:{color:{required:!0},showAlpha:Boolean},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var t=this;e===!0&&this.$nextTick(function(){var e=t.$refs,i=e.sl,n=e.hue,s=e.alpha;i&&i.update(),n&&n.update(),s&&s.update()})}}}},function(e,t,i){var n=i(13)(i(966),i(968),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(967),o=n(s);t.default={name:"el-sl-panel",props:{color:{required:!0}},watch:{"color.value":function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.getBoundingClientRect(),s=n.width,o=n.height;o||(o=3*s/4),this.cursorLeft=e*s/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el,i=t.getBoundingClientRect(),n=e.clientX-i.left,s=e.clientY-i.top;n=Math.max(0,n),n=Math.min(n,i.width),s=Math.max(0,s),s=Math.min(s,i.height),this.cursorLeft=n,this.cursorTop=s,this.color.set({saturation:n/i.width*100,value:100-s/i.height*100})}},mounted:function(){var e=this;(0,o.default)(this.$el,{drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e,t){if(!o.default.prototype.$isServer){var i=function(e){t.drag&&t.drag(e)},n=function e(n){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,a=!1,t.end&&t.end(n)};e.addEventListener("mousedown",function(e){a||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",i),document.addEventListener("mouseup",n),a=!0,t.start&&t.start(e))})}};var s=i(2),o=n(s),a=!1},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-svpanel",style:{backgroundColor:e.background}},[i("div",{staticClass:"el-color-svpanel__white"}),i("div",{
+staticClass:"el-color-svpanel__black"}),i("div",{staticClass:"el-color-svpanel__cursor",style:{top:e.cursorTop+"px",left:e.cursorLeft+"px"}},[i("div")])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(970),i(971),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(967),o=n(s);t.default={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},watch:{"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var o=e.clientX-t.left;o=Math.min(o,t.width-i.offsetWidth/2),o=Math.max(i.offsetWidth/2,o),n=Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(973),i(974),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(967),o=n(s);t.default={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:e.background},on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:e.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:e.color}})],1),e.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:e.color}}):e._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[e._v(e._s(e.currentColor))]),i("a",{staticClass:"el-color-dropdown__link-btn",attrs:{href:"JavaScript:"},on:{click:function(t){e.$emit("clear")}}},[e._v(e._s(e.t("el.colorpicker.clear")))]),i("button",{staticClass:"el-color-dropdown__btn",on:{click:e.confirmValue}},[e._v(e._s(e.t("el.colorpicker.confirm")))])])],1)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.hide,expression:"hide"}],staticClass:"el-color-picker"},[i("div",{staticClass:"el-color-picker__trigger",on:{click:function(t){e.showPicker=!e.showPicker}}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":e.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:e.displayedColor}}),e.value||e.showPanelColor?e._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{staticClass:"el-color-picker__icon el-icon-caret-bottom"})]),i("picker-dropdown",{ref:"dropdown",staticClass:"el-color-picker__panel",attrs:{color:e.color,"show-alpha":e.showAlpha},on:{pick:e.confirmValue,clear:e.clearValue},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}})],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(978),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(979),i(983),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(653),o=n(s),a=i(607),r=n(a),l=i(608),u=n(l),c=i(980),d=n(c);t.default={name:"ElTransfer",mixins:[r.default,u.default],components:{TransferPanel:d.default,ElButton:o.default},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},footerFormat:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{sourceData:function(){var e=this;return this.data.filter(function(t){return e.value.indexOf(t[e.props.key])===-1})},targetData:function(){var e=this;return this.data.filter(function(t){return e.value.indexOf(t[e.props.key])>-1})}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{onSourceCheckedChange:function(e){this.leftChecked=e},onTargetCheckedChange:function(e){this.rightChecked=e},addToLeft:function(){var e=this.value.slice();this.rightChecked.forEach(function(t){var i=e.indexOf(t);i>-1&&e.splice(i,1)}),this.$emit("input",e),this.$emit("change",e,"left",this.rightChecked)},addToRight:function(){var e=this,t=this.value.slice();this.leftChecked.forEach(function(i){e.value.indexOf(i)===-1&&(t=t.concat(i))}),this.$emit("input",t),this.$emit("change",t,"right",this.leftChecked)}}}},function(e,t,i){var n=i(13)(i(981),i(982),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(710),o=n(s),a=i(702),r=n(a),l=i(609),u=n(l),c=i(608),d=n(c);t.default={mixins:[d.default],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:o.default,ElCheckbox:r.default,ElInput:u.default,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t},i=t(this);return i.renderContent?i.renderContent(e,this.option):e("span",null,[this.option[i.labelProp]||this.option[i.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1}},watch:{checked:function(e){this.updateAllChecked(),this.$emit("checked-change",e)},data:function(){var e=this,t=[],i=this.filteredData.map(function(t){return t[e.keyProp]});this.checked.forEach(function(e){i.indexOf(e)>-1&&t.push(e)}),this.checked=t},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return t.indexOf(e)>-1})){var n=[],s=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){s.indexOf(e)>-1&&n.push(e)}),this.checked=n}}}},computed:{filteredData:function(){var e=this;return this.data.filter(function(t){if("function"==typeof e.filterMethod)return e.filterMethod(e.query,t);var i=t[e.labelProp]||t[e.keyProp].toString();return i.toLowerCase().indexOf(e.query.toLowerCase())>-1})},checkableData:function(){var e=this;return this.filteredData.filter(function(t){return!t[e.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,s=i.hasChecked;return n&&s?e>0?s.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e>0?this.t("el.transfer.hasCheckedFormat",{total:t,checked:e}):this.t("el.transfer.noCheckedFormat",{total:t})},isIndeterminate:function(){var e=this.checked.length;return e>0&&e<this.checkableData.length},hasNoMatch:function(){return this.query.length>0&&0===this.filteredData.length},inputIcon:function(){return this.query.length>0&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"}},methods:{updateAllChecked:function(){var e=this,t=this.checkableData.map(function(t){return t[e.keyProp]});this.allChecked=t.length>0&&t.every(function(t){return e.checked.indexOf(t)>-1})},handleAllCheckedChange:function(e){var t=this;this.checked=e.target.checked?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[e._v(e._s(e.title))]),i("div",{staticClass:"el-transfer-panel__body"},[e.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:e.placeholder,icon:e.inputIcon},on:{click:e.clearQuery},nativeOn:{mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}},model:{value:e.query,callback:function(t){e.query=t},expression:"query"}}):e._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!e.hasNoMatch&&e.data.length>0,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":e.filterable},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},e._l(e.filteredData,function(t){return i("el-checkbox",{key:t[e.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:t[e.keyProp],disabled:t[e.disabledProp]}},[i("option-content",{attrs:{option:t}})],1)})),i("p",{directives:[{name:"show",rawName:"v-show",value:e.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===e.data.length&&!e.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noData")))])],1),i("p",{staticClass:"el-transfer-panel__footer"},[i("el-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleAllCheckedChange},model:{value:e.allChecked,callback:function(t){e.allChecked=t},expression:"allChecked"}},[e._v(e._s(e.checkedSummary))]),e._t("default")],2)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",{attrs:{filterable:e.filterable,"filter-method":e.filterMethod,data:e.sourceData,"render-content":e.renderContent,title:e.titles[0]||e.t("el.transfer.titles.0"),format:e.footerFormat,"default-checked":e.leftDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder"),props:e.props},on:{"checked-change":e.onSourceCheckedChange}},[e._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{attrs:{type:"primary",size:"small",disabled:0===e.rightChecked.length},nativeOn:{click:function(t){e.addToLeft(t)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==e.buttonTexts[0]?i("span",[e._v(e._s(e.buttonTexts[0]))]):e._e()]),i("el-button",{attrs:{type:"primary",size:"small",disabled:0===e.leftChecked.length},nativeOn:{click:function(t){e.addToRight(t)}}},[void 0!==e.buttonTexts[1]?i("span",[e._v(e._s(e.buttonTexts[1]))]):e._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",{attrs:{filterable:e.filterable,"filter-method":e.filterMethod,data:e.targetData,"render-content":e.renderContent,title:e.titles[1]||e.t("el.transfer.titles.1"),format:e.footerFormat,"default-checked":e.rightDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder"),props:e.props},on:{"checked-change":e.onTargetCheckedChange}},[e._t("right-footer")],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var s=i(71),o=function(){function e(){n(this,e)}return e.prototype.beforeEnter=function(e){(0,s.addClass)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height=e.scrollHeight+"px",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},e.prototype.afterEnter=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&((0,s.addClass)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}();t.default={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children,n={on:new o};return e("transition",n,i)}}}]);
\ No newline at end of file
diff --git a/1.3/favicon.ico b/1.3/favicon.ico
new file mode 100644
index 000000000..11af42b6a
Binary files /dev/null and b/1.3/favicon.ico differ
diff --git a/1.3/index.html b/1.3/index.html
new file mode 100644
index 000000000..82c95184a
--- /dev/null
+++ b/1.3/index.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
+    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#20a0ff">
+    <title>Element</title>
+  <link rel="shortcut icon" href="favicon.ico"><link href="docs.2dddc2b.css" rel="stylesheet"></head>
+  <body>
+    <div id="app"></div>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.runtime.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.min.js"></script>
+  <script type="text/javascript" src="manifest.a242324.js"></script><script type="text/javascript" src="element-ui.44813ae.js"></script><script type="text/javascript" src="docs.130412a.js"></script></body>
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+
+    ga('create', 'UA-84335471-1', 'auto');
+    ga('send', 'pageview');
+
+    window.addEventListener('hashchange', function () {
+      ga('set', 'page', window.location.href);
+      ga('send', 'pageview');
+    });
+  </script>
+</html>
diff --git a/manifest.2bfcfec.js b/1.3/manifest.a242324.js
similarity index 60%
rename from manifest.2bfcfec.js
rename to 1.3/manifest.a242324.js
index 77d2deaa8..a3ce483c3 100644
--- a/manifest.2bfcfec.js
+++ b/1.3/manifest.a242324.js
@@ -1 +1 @@
-!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,c){for(var p,l,s=0,i=[];s<o.length;s++)l=o[s],a[l]&&i.push.apply(i,a[l]),a[l]=0;for(p in c)e[p]=c[p];for(n&&n(o,c);i.length;)i.shift().call(null,t);if(c[0])return r[0]=0,t(0)};var r={},a={2:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+""+e+"."+{0:"597e34b",1:"b8cc43b"}[e]+".js",r.appendChild(o)}},t.m=e,t.c=r,t.p=""}([]);
\ No newline at end of file
+!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,p){for(var l,c,s=0,i=[];s<o.length;s++)c=o[s],a[c]&&i.push.apply(i,a[c]),a[c]=0;for(l in p)e[l]=p[l];for(n&&n(o,p);i.length;)i.shift().call(null,t);if(p[0])return r[0]=0,t(0)};var r={},a={2:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+""+e+"."+{0:"130412a",1:"44813ae"}[e]+".js",r.appendChild(o)}},t.m=e,t.c=r,t.p=""}([]);
\ No newline at end of file
diff --git a/1.3/static/banner-bg.75437e1.svg b/1.3/static/banner-bg.75437e1.svg
new file mode 100644
index 000000000..1963922b9
--- /dev/null
+++ b/1.3/static/banner-bg.75437e1.svg
@@ -0,0 +1,556 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="568px" height="507px" viewBox="0 0 568 507" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 39.1 (31720) - http://www.bohemiancoding.com/sketch -->
+    <title>landingpage_illustration</title>
+    <desc>Created with Sketch.</desc>
+    <defs>
+        <path d="M0.172590677,23.6485671 L0.42612487,5.77688935 L16.8540329,0.0294293998 C16.8540329,0.0294293998 15.177854,1.93690856 14.7900681,3.04976293 C12.4344075,9.8099545 8.62369332,23.6485672 8.62369332,23.6485672 L12.4503267,50.5104432 L6.77057777,52.869339 L0.172590677,23.6485671 Z" id="path-1"></path>
+        <path d="M0.50165759,9.70533955 C0.50165759,6.98052183 2.76494799,3.85642502 4.24369921,2.10604949 C4.96116228,1.25679927 6.79457103,1.34458247 6.79457103,1.34458247 C6.79457103,1.34458247 14.3103209,-0.421861028 18.1620961,0.730924858 C22.8270631,2.12708837 31.0441705,8.37777304 31.0441705,8.37777304 L31.0441705,12.3253024 L32.4964571,25.8307437 C32.555656,26.3812599 32.1792224,26.7158395 31.6448531,26.5752017 L19.8473817,23.4702876 L3.10426007,18.5661795 C3.10426007,18.5661795 0.50165759,13.752189 0.50165759,9.70533955 Z" id="path-3"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.0431372549   0 0 0 0 0.325490196   0 0 0 0 0.654901961  0 0 0 0.5 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M2.19875271,28.4418279 L3.86287255,27.3843007 L6.00303843,26.0242524 L12.3564954,21.9867108 C12.8199515,21.6921903 13.2299841,21.0067545 13.2727227,20.4506211 L14.6860304,2.06005034 C14.7706085,0.959484285 15.6971156,0.305616758 16.7589871,0.600581073 L22.4471523,2.18062709 C22.4471523,2.18062709 19.490047,15.5881641 17.4849039,21.8866814 C17.1024344,23.0880871 10.8227555,24.3985444 10.8227555,24.3985444 C10.2887808,24.518499 10.3004206,24.5815937 10.8442251,24.5911455 C10.8442251,24.5911455 11.4579499,24.2941008 15.9345701,25.5864254 C20.4111904,26.8787501 23.0420277,28.6605191 23.0420277,28.6605191 C23.5152035,28.9490808 23.617099,28.8328455 23.2761666,28.3987505 C23.2761666,28.3987505 19.3560675,23.6520346 20.0569902,22.4715851 C20.8897111,21.0691694 21.9010058,19.2755192 22.9498965,17.3732235 C26.1042698,11.652369 29.5986652,4.94891231 29.5986652,4.94891231 C29.5986652,4.94891231 29.7107135,4.94887078 29.9094828,4.95967229 C30.9942045,5.01861815 34.6615557,5.40047936 36.7953331,7.87421481 C39.3201135,10.8012488 38.2266685,14.5788175 38.2266685,14.5788175 C38.2266685,14.5788175 42.5812294,18.9778511 40.2515442,23.8137714 C37.921859,28.6496917 33.2744095,26.6149704 33.2744095,26.6149704 C33.2744095,26.6149704 30.9601231,25.2560818 29.852942,26.6149701 C28.9073415,27.775544 28.470517,27.5861458 28.4060007,29.1830071 C28.2854326,32.1672236 28.3770127,36.7431881 28.3770127,36.7431881 C28.3930228,37.8450485 27.6523336,38.2394478 26.7260907,37.6446122 C26.7260907,37.6446122 18.8318554,32.2240559 11.6465746,30.2807614 C4.4612938,28.3374669 1.23580654,29.7833552 1.23580654,29.7833552 C0.169460637,30.0580646 0.0653116146,29.7976027 0.988314829,29.2110458 L2.19875271,28.4418279 Z" id="path-6"></path>
+        <path d="M30.7057243,18.9325412 L38.1357241,18.9325412 L38.1357241,27.8766294 C38.1357241,27.8766294 38.5162616,29.2690566 35.2086449,29.8766291 C31.9010282,30.4842017 31.6674262,30.0990066 31.6674262,30.0990066 C31.1362929,29.9761909 30.7057243,29.4340532 30.7057243,28.8666523 L30.7057243,18.9325412 Z" id="path-8"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-9">
+            <feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="64.8554444%" y1="50%" x2="64.8554466%" y2="100%" id="linearGradient-10">
+            <stop stop-color="#1D5A90" offset="0%"></stop>
+            <stop stop-color="#0D4372" offset="100%"></stop>
+        </linearGradient>
+        <polygon id="path-11" points="61 21 335.540789 102.890039 335.540802 506.637756 61 424.528974"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-12">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.870588235   0 0 0 0 0.898039216   0 0 0 0 0.956862745  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-13"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-14">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.596078431   0 0 0 0 0.741176471   0 0 0 0 0.952941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-15"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-16">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M54.5141339,50.0541547 L67.0333492,47.095196 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.1967468,18.0347958 C55.0508728,18.571516 55.929142,21.0423924 55.929142,22.7188969 L55.929142,46.8712959 C55.929142,48.5209333 55.5199636,50.6291097 53.471927,50.0308699" id="path-17"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-18">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.0194380412   0 0 0 0 0.303028282   0 0 0 0 0.561410502  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M54.5141339,50.0541547 L67.0333492,47.095196 L67.0860961,47.0808669 C68.4702488,46.7083104 68.8758546,45.0174768 68.8758546,43.8693579 L68.8758546,19.7839357 C68.8758546,18.1056402 67.9736999,15.5067001 66.0457081,14.944283 L15.1012506,0.0885908995 C14.744754,-0.0224596079 14.4209968,-0.0278330196 14.0590436,0.0653061157 L2,2.91679656 L2.52928834,3.06008754 L53.471927,17.9157796 C55.4017377,18.4781967 56.3020736,21.0789279 56.3020736,22.7554324 L56.3020736,46.8426457 C56.3020736,48.492283 55.5199636,50.6291097 53.471927,50.0308699" id="path-19"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-20">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M6.98591477,5.788899 C3.14429572,8.41812349 1.01086715,13.3604908 1.00181953,17.8179602 L1.00181953,25.9085725 C1.08686715,27.0723276 1.3872481,28.0924092 1.94096239,29.0999194 C2.02239096,29.2489806 1.99886715,29.4303684 1.88667667,29.5596745 C1.43791477,30.0679194 1.15743858,30.6192663 0.99639096,31.2999194 L1.00181953,46.0336337 C1.08686715,47.1973888 1.3872481,48.2174704 1.94096239,49.2267766 C1.43791477,50.1929806 1.15743858,50.7443276 0.99639096,51.4249806 L1.00181953,66.1586949 C1.08686715,67.32245 1.3872481,68.3443276 1.94096239,69.3518378 C1.43791477,70.3180419 1.15743858,70.8693888 0.99639096,71.5500419 L1.00181953,86.2837561 C1.08686715,87.4475112 1.3872481,88.4693888 1.94096239,89.476899 C1.43791477,90.4431031 1.15743858,90.99445 0.99639096,91.676899 L1.00181953,106.408817 C1.08686715,107.572572 1.3872481,108.59445 1.94096239,109.60196 C2.02239096,109.751021 1.99886715,109.932409 1.88667667,110.061715 C1.43791477,110.56996 1.15743858,111.121307 0.99639096,111.80196 L1.00181953,126.535675 C1.08686715,127.69943 1.3872481,128.719511 1.94096239,129.728817 C1.43791477,130.695021 1.15743858,131.246368 0.99639096,131.927021 L1.00181953,146.660736 C1.08686715,147.824491 1.3872481,148.846368 1.94096239,149.853879 C1.43791477,150.820083 1.15743858,151.37143 0.99639096,152.052083 L1.00181953,170.442287 C1.00181953,172.554287 2.42772429,174.529797 4.52315286,174.894368 C4.93210525,174.966205 5.33201001,174.973389 5.74458144,174.915919 C7.91058144,174.619593 9.41791477,172.599185 9.41791477,170.427919 L9.41791477,17.8179602 C9.42877191,16.0992663 10.4041052,12.9186949 12.4452481,12.3386133 C12.4452481,12.3368174 28.9408672,8.40734798 28.9408672,8.40734798 C29.6284862,8.24391941 29.8094386,9.17959288 29.8962957,9.75787859 C29.9198195,9.91591941 29.8962952,10.3005438 29.8962952,10.3005438 L38.420963,12.8788443 L38.4209624,10.9072663 C38.4535338,4.556899 33.8464862,-1.3875908 26.9757243,0.286205122 L10.4819148,4.21567451" id="path-21"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-23">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M0.00542857143,23.7750868 L0.00542857143,17.8179602 C0.0144761905,13.3604908 2.14790476,8.41812349 5.98952381,5.788899 L9.48552381,4.21567451 L25.9793333,0.286205122 C32.8500952,-1.3875908 37.4571429,4.556899 37.4245714,10.9072663 L37.424572,13.2903538 L28.8999043,10.7727194 C28.8999043,10.7727194 28.9234286,9.91591941 28.8999048,9.75787859 C28.8130476,9.17959288 28.6320952,8.24391941 27.9444762,8.40734798 C27.9444762,8.40734798 11.4488571,12.3368174 11.4488571,12.3386133 C9.40771429,12.9186949 8.43238095,16.0992663 8.42152381,17.8179602 L8.42152381,170.427919 C8.42152381,172.599185 6.91419048,174.619593 4.74819048,174.915919 C4.33561905,174.973389 3.93571429,174.966205 3.5267619,174.894368 C1.43133333,174.529797 0.00542857143,172.554287 0.00542857143,170.442287 L0.000803798701,154.775087 L0,154.775087 L0,23.7750868 L0.00542857143,23.7750868 Z" id="path-24"></path>
+        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-26"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-28">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-29"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-31">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-32"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-34">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-35"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-37">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-38"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-40">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-41"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-43">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M5.81302995,0.0958621923 C3.27469714,0.704733855 1.63734857,2.10832464 0,3.980959 C1.09038564,5.87483306 2.15244958,7.32975314 4.44473758,7.97756427 L37,17.7389806 L37,16.2489125 C37.4278984,14.8780038 37.8905449,14.8246209 38.0144234,14.2293021 C37.4464569,13.206125 37.3033371,12.7071263 37,11.1946294 L37,9.15459816 L6.78835867,0.0586927013 C6.45557864,-0.0262661355 6.14403988,-0.00679640204 5.81302995,0.0958621923 Z" id="path-44"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-46">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.494117647   0 0 0 0 0.670588235   0 0 0 0 0.929411765  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-47" points="68 22.9128354 80.3746586 20 80.3746586 44.1524906 68 47.0336895"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-48">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-49" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-50">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-51" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-52">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-53" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-54">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-55"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-56">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M29.0542967,11.0272067 L29.0542967,9.08490097 C29.0542967,7.42437133 28.1752971,4.85294284 26.2967897,4.29647933 L15.2667615,1.03035754 C14.9194148,0.922254756 14.6039673,0.915166049 14.2513042,1.00731924 L2.5,3.82862466 L3.01570344,3.9703988 L14.0457317,7.23652059 C15.9260112,7.7929841 16.8032387,10.3661848 16.8032387,12.0249422 L16.8032387,27.912507 C16.8032387,29.546454 16.0412027,31.6588887 14.0457317,31.0687538 L15.061189,31.0917921 L27.2590817,28.1623839 L27.312247,28.1482065 C27.5018699,28.0968134 27.6719989,28.0188376 27.8350391,27.9071905" id="path-57"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-58">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-59" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-60">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-61" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-62">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.4   0 0 0 0 0.607843137   0 0 0 0 0.91372549  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-63" points="67.155153 22.89922 79.5298116 19.9863847 79.5298116 44.1388753 67.155153 47.0200742"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-64">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.399626285   0 0 0 0 0.609381731   0 0 0 0 0.91236182  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-65" points="12.4473333 0 79.6014995 19.7749632 67.2320537 22.9228152 0.0375349481 2.96624446"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-66">
+            <feOffset dx="0.5" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.596078431   0 0 0 0 0.741176471   0 0 0 0 0.952941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <polygon id="path-67" points="74 426.153107 74 22.0126982 86.2405882 19.0151402 86.2405882 423.355225"></polygon>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-68">
+            <feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.0258801644   0 0 0 0 0.257757552   0 0 0 0 0.46917517  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-69"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-70">
+            <feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.0431372549   0 0 0 0 0.309803922   0 0 0 0 0.552941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M11.5087093,3.23523138 L23.4218148,0.533037899 C25.5812324,0.0619139855 27.5285302,0.130506739 29.645906,0.749646594 C39.8276555,3.59805094 45.5434236,15.6577401 46.9843093,24.1524111 C47.8518984,29.257156 47.7926577,33.9611749 46.1148093,38.9684459 C44.5898401,43.5208386 41.3468918,48.2699843 35.8699973,49.5118741 L23.0052192,52.4306763" id="path-71"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-72">
+            <feOffset dx="1" dy="0" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.0431372549   0 0 0 0 0.309803922   0 0 0 0 0.552941176  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M0.502950308,30.6485671 C-0.480505421,23.1596051 0.502950301,0 0.502950301,0 L16.2911244,8.0660162 C16.2911244,8.0660162 13.5620575,9.19587032 13.4729521,9.76633142 C13.184641,11.6121269 12.4980011,16.0662639 11.8537478,20.6838739 C11.3498755,24.2953196 10.8719305,28.0067592 10.6307512,30.6485671 C9.9858933,37.7121522 14.3060851,59.0973612 14.3060851,59.0973612 C14.3060851,59.0973612 14.9984979,60.9080209 11.2756091,61.5152334 C7.55272035,62.1224458 6.54182177,59.9181579 6.54182177,59.9181579 C6.54182177,59.9181579 1.48640604,38.137529 0.502950308,30.6485671 Z" id="path-73"></path>
+        <path d="M16.0400649,4.52725302 C9.49659066,2.50714082 2.45854027,1.08555158 2.1308986,0.873127833 C1.29884527,0.333672988 1.45520269,1.46410902 1.24327259,2.65039743 C1.05123062,3.72536106 0.436776451,4.83437071 0.730498906,5.0068793 C1.02138597,5.17772262 8.71912312,7.27225564 15.414447,9.17594001 C22.9404305,11.3158062 27.6226195,12.8946482 28.9166224,13.1268049 C30.2106254,13.3589615 30.7998202,12.0568691 30.7998202,12.0568691 L30.7998202,8.07228044 C30.7998202,8.07228044 30.7387912,9.03862894 29.8405669,9.17594007 C29.4520991,9.23532496 28.844309,9.00429748 28.1212226,8.69753354 C26.9997129,8.22174154 21.8025217,6.3062482 16.0400649,4.52725302 Z" id="path-75"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-77">
+            <feOffset dx="0" dy="0.5" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.208583872   0 0 0 0 0.318645032   0 0 0 0 0.451477466  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+        <path d="M6.99999981,19.2232717 C6.99999981,19.2232717 5.06975199,19.0511389 3.35874473,18.6378029 C2.11803891,18.3380799 0.700774671,18.6378029 0.728358772,16.3886121 C0.735315134,15.8213947 1.28019993,9.67917315 2.83395758,5.56866066 C4.06722125,2.3060246 6.44561296,1.2310278 6.44561296,1.2310278 C7.36973909,0.624436813 8.99503694,0.299150142 10.0867942,0.506565091 L17.0861493,1.83632126 L20.6771876,2.84615544 L24.5986652,3.94891231 L36.852942,7.3949317 L36.8529415,42.8282355 C36.8529415,43.9324216 35.9930002,44.5609098 34.9449571,44.2380744 C34.9449571,44.2380744 26.8215033,41.6983288 19.6362225,39.7550343 C12.4509417,37.8117398 8.40552583,37.201245 8.40552583,37.201245 C7.31979847,37.0100499 6.46820112,35.9564527 6.50337708,34.8496321 L6.99999981,19.2232717 Z" id="path-78"></path>
+        <path d="M36.9899902,15 L44.4199901,15 L44.4199901,23.9440883 C44.4199901,23.9440883 44.8005276,25.3365154 41.4929109,25.944088 C38.1852942,26.5516605 37.9516921,26.1664655 37.9516921,26.1664655 C37.4205588,26.0436498 36.9899902,25.5015121 36.9899902,24.9341111 L36.9899902,15 Z" id="path-80"></path>
+        <filter x="-50%" y="-50%" width="200%" height="200%" filterUnits="objectBoundingBox" id="filter-81">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feColorMatrix values="0 0 0 0 0.996078431   0 0 0 0 1   0 0 0 0 1  0 0 0 1 0" type="matrix" in="shadowOffsetOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="landingpage_illustration">
+            <g id="轮子" transform="translate(14.000000, 380.000000)">
+                <path d="M50.6255266,60.8301496 C62.7757911,60.8301496 72.6255266,57.3668702 72.6255266,53.0946984 C72.6255266,48.8225267 62.7757911,45.3592472 50.6255266,45.3592472 C38.4752621,45.3592472 28.6255266,48.8225267 28.6255266,53.0946984 C28.6255266,57.3668702 38.4752621,60.8301496 50.6255266,60.8301496 Z" id="Oval" fill="#E2ECFA" opacity="0.550839552" transform="translate(50.625527, 53.094698) rotate(-10.000000) translate(-50.625527, -53.094698) "></path>
+                <path d="M10.998595,8.9991166 L22.9120756,6.29683803 C25.0715612,5.82569928 27.4583747,5.67767867 29.5758172,6.29683802 C39.7578873,9.14533206 44.9668086,20.7147518 46.4753121,29.916955 C47.3138222,35.032051 47.1205701,38.9292082 45.4426689,43.9366369 C43.9176517,48.489173 40.5736382,53.2647085 35.2620696,54.7021088 L22.4954669,58.1961107" id="Stroke-3" fill="#CCE7FF" transform="translate(28.979037, 32.041110) rotate(-150.000000) translate(-28.979037, -32.041110) "></path>
+                <path d="M21.4710018,39.0199931 C20.9910513,45.1728716 21.6331472,50.2815336 25.2803384,55.5804462 C28.7610603,60.6393836 34.2372519,63.0672411 40.3317581,61.6036084 C51.8030067,58.8492981 58.3839492,45.3739319 59.1925144,35.0052722 C59.6724648,28.8523937 59.0303689,23.7415698 55.3831778,18.4448191 C51.9024559,13.3858817 46.4262643,10.9580242 40.3317581,12.4216569 C28.8605094,15.1759672 22.279567,28.6513334 21.4710018,39.0199931 Z" id="Page-1-Copy" fill="#80A8E1"></path>
+                <path d="M43,16.9550856 C33.3400012,19.2745048 27.7981549,30.6221816 27.1172579,39.3536845 C26.713089,44.5350559 27.2538014,48.837087 30.3251203,53.2993292 C33.2562545,57.559487 37.8677843,59.6039986 43,58.3714658 C52.6599988,56.0520466 58.2018451,44.7043698 58.8827421,35.9728669 C59.286911,30.7914955 58.7461986,26.4876438 55.6748797,22.0272222 C52.7437455,17.7670644 48.1322157,15.7225528 43,16.9550856 L43,16.9550856 Z" id="Page-1" fill="#9BBBE8"></path>
+                <path d="M48.1057253,16.8410994 L46.8257889,16.4738938 C44.6950385,15.8780845 42.7500553,15.845684 40.6007281,16.3676921 C31.7860718,18.4197239 26.2836457,27.8212696 24.806796,35.4875884 C23.3299464,43.1539072 24.9721289,54.5138832 34.3756674,57.212125 L37.2662059,58.0419379 L37.5578605,58.1265392 C37.3877757,58.0825026 37.219039,58.0346482 37.0517099,57.9830279 C34.4831595,57.1906417 32.2462824,55.5108923 30.5562926,53.1314618 C27.4242567,48.7213935 26.8725279,44.4661275 27.2849312,39.3432481 C27.9778431,30.7103144 33.634456,19.4907405 43.4912666,17.197505 C45.3693736,16.7600982 47.1806043,16.7402979 48.867371,17.0895033" id="Page-1" fill="#C0DBF8"></path>
+            </g>
+            <g id="lady" transform="translate(0.000000, 318.000000)">
+                <g id="鞋子" transform="translate(0.000000, 122.000000)">
+                    <path d="M22.5665213,1.52463221 L28.4753678,2.56652127 L27.2451873,9.54322165 C27.2451873,9.54322165 26.2284251,10.9035575 24.0274738,10.5154704 C21.8265224,10.1273833 21.3363408,8.50133258 21.3363408,8.50133258 L22.5665213,1.52463221 Z" id="Combined-Shape" fill="#FFCFC7"></path>
+                    <path d="M3.56652127,0.524632208 L9.47536779,1.56652127 L8.24518728,8.54322165 C8.24518728,8.54322165 7.22842512,9.90355751 5.02747376,9.5154704 C2.82652239,9.12738329 2.29245931,7.75019664 2.29245931,7.75019664 L3.56652127,0.524632208 Z" id="Combined-Shape" fill="#FFBFBA"></path>
+                    <path d="M23.1902933,17.4944426 C22.8936345,17.9555283 23.0418011,18.5447066 23.5473145,18.7725944 C23.5473145,18.7725944 26.5428133,20.8326334 28.7814677,17.319668 C29.8973272,15.5686269 35.1843376,13.6808502 36.6471005,12.8126659 C38.1189549,11.9390857 38.6198239,10.7291535 38.921474,9.67606089 C39.522911,7.57638057 37.2657576,7.62931993 37.2657576,7.62931993 L33.0163855,8.51218889 C33.0163855,8.51218889 33.5978086,11.1422851 32.0651911,11.865543 C30.5325736,12.5888008 28.4769108,12.4323038 28.4769108,12.4323038 L26.399411,13.4531312 C25.9076031,13.6947923 25.2654328,14.2691311 24.9717658,14.7255668 L23.1902933,17.4944426 Z" id="Path-3" fill="#EFF5FD" transform="translate(31.030938, 13.500993) rotate(7.000000) translate(-31.030938, -13.500993) "></path>
+                    <path d="M4.19029329,15.4944426 C3.89363446,15.9555283 4.04180112,16.5447066 4.54731452,16.7725944 C4.54731452,16.7725944 7.54281334,18.8326334 9.78146771,15.319668 C10.8973272,13.5686269 16.1843376,11.6808502 17.6471005,10.8126659 C19.1189549,9.93908573 19.6198239,8.72915347 19.921474,7.67606089 C20.522911,5.57638057 18.2657576,5.62931993 18.2657576,5.62931993 L14.0163855,6.51218889 C14.0163855,6.51218889 14.5978086,9.14228512 13.0651911,9.86554297 C11.5325736,10.5888008 9.47691082,10.4323038 9.47691082,10.4323038 L7.39941096,11.4531312 C6.90760311,11.6947923 6.26543281,12.2691311 5.97176575,12.7255668 L4.19029329,15.4944426 Z" id="Path-3-Copy" fill="#EFF5FD" transform="translate(12.030938, 11.500993) rotate(7.000000) translate(-12.030938, -11.500993) "></path>
+                    <path d="M1.1086333,14.1724794 C1.1086333,14.7243742 1.49150785,15.3865823 1.99143197,15.6177232 C1.99143197,15.6177232 5.09755,17.7503653 7.33620438,14.2373998 C8.45206387,12.4863587 10.8833052,11.9567362 12.3460681,11.088552 C13.8179225,10.2149718 14.3187914,9.00503952 14.6204416,7.95194694 C15.2218786,5.85226663 12.9647252,5.90520598 12.9647252,5.90520598 L8.66936645,6.93947384 C8.66936645,6.93947384 9.29677619,9.41817118 7.76415869,10.141429 C6.97610138,10.5133213 5.80520989,11.2353857 4.04659154,11.0885519 C2.28797318,10.941718 1.89416703,10.335851 1.89416703,10.335851 C1.46032873,9.9976692 1.1086333,10.1693722 1.1086333,10.7228126 L1.1086333,14.1724794 Z" id="Path-3" fill="#3E0F3F" transform="translate(7.915491, 11.082045) rotate(9.000000) translate(-7.915491, -11.082045) "></path>
+                    <path d="M20.218804,16.2536191 C20.218804,16.8070611 20.6074601,17.4711091 21.1129735,17.6989969 C21.1129735,17.6989969 24.1084723,19.7590359 26.3471267,16.2460704 C27.4629862,14.4950293 29.8942275,13.9654068 31.3569904,13.0972226 C32.8288448,12.2236424 33.3297138,11.0137101 33.6313639,9.96061756 C34.2328009,7.86093724 31.9756475,7.9138766 31.9756475,7.9138766 L27.7262754,8.79674556 C27.7262754,8.79674556 28.3076985,11.4268418 26.775081,12.1500996 C25.2424635,12.8733575 23.1868007,12.7168604 23.1868007,12.7168604 L21.1578967,11.937941 C20.6392501,11.7388266 20.218804,12.0229793 20.218804,12.579508 L20.218804,16.2536191 Z" id="Path-3" fill="#613F62" transform="translate(26.976037, 13.016990) rotate(9.000000) translate(-26.976037, -13.016990) "></path>
+                </g>
+                <g id="下半身" transform="translate(2.000000, 52.000000)">
+                    <polygon id="Rectangle-16" fill="#FFBFBA" transform="translate(9.171588, 43.673843) scale(-1, 1) translate(-9.171588, -43.673843) " points="4.91415179 42.0699344 1.32755844 15.336998 14.6157168 18.0169454 12.3098542 42.0699351 14.6770872 57.4907494 17.0156182 72.0106888 10.908393 71.6553877"></polygon>
+                    <g id="Path-10" transform="translate(16.000000, 21.000000)">
+                        <g id="Oval-3">
+                            <mask id="mask-2" fill="white">
+                                <use xlink:href="#path-1"></use>
+                            </mask>
+                            <use id="Mask" fill="#FFCFC7" transform="translate(8.513312, 26.449384) scale(-1, 1) translate(-8.513312, -26.449384) " xlink:href="#path-1"></use>
+                            <circle fill="#FFBFBA" mask="url(#mask-2)" transform="translate(17.067321, 24.067321) rotate(4.000000) translate(-17.067321, -24.067321) " cx="17.0673205" cy="24.0673205" r="2"></circle>
+                        </g>
+                    </g>
+                    <g id="Rectangle-14">
+                        <mask id="mask-4" fill="white">
+                            <use xlink:href="#path-3"></use>
+                        </mask>
+                        <g id="Mask">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
+                            <use fill="#095DBF" fill-rule="evenodd" xlink:href="#path-3"></use>
+                        </g>
+                        <path d="M27.8203145,12.2265229 C27.4718612,8.86521816 31.3954126,8 31.3954126,8 L35,8 L35,29 L30.3264726,29 C30.3264726,29 28.1687678,15.5878277 27.8203145,12.2265229 Z" fill="#0B53A7" mask="url(#mask-4)"></path>
+                    </g>
+                    <path d="M14.5206212,18.6286037 C10.0060034,15.9131904 10.355923,10.6424186 10.355923,10.6424186 C10.355923,10.6424186 8.08724277,16.5302784 12.9309762,19.6571971 C14.3818233,20.5938053 16.7489087,21.734256 20.5422216,20.9799039 C21.8363554,20.7225478 18.2337334,20.8619342 14.5206212,18.6286037 Z" id="Path-11" fill="#0A52A7" transform="translate(15.318103, 15.933838) rotate(27.000000) translate(-15.318103, -15.933838) "></path>
+                </g>
+                <g id="上半身" transform="translate(5.000000, 25.000000)">
+                    <path d="M28.6940497,37.2134314 C27.8012851,36.5593758 26.8072481,35.1783277 26.4691422,34.1140947 L21.7737477,19.3347221 C21.7737477,19.3347221 19.5151125,17.526373 23.264109,17.526373 C27.0131056,17.526373 27.6481859,16.2145894 27.6481859,16.2145894 L31.7944171,32.7133975 L43.3922272,44.2009182 C43.3922272,44.2009182 42.1197446,44.386172 41.4292954,44.594951 C40.902138,44.7543536 39.7394074,45.3054631 39.7394074,45.3054631 L28.6940497,37.2134314 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(32.245739, 30.760026) rotate(10.000000) translate(-32.245739, -30.760026) "></path>
+                    <path d="M13.2871095,21.7578122 C15.5668959,18.5509753 18.1942608,10.9301248 18.1942608,10.9301248 L29.8281309,9.34344457 L27.1421856,28.0117575 C27.0636587,28.5575487 26.6134616,29.2125942 26.1184633,29.4848409 L24.8925522,30.159086 L8.88530077,25.6469678 C8.35461119,25.4973772 8.32190919,25.1652874 8.79641286,24.9063039 C8.79641286,24.9063039 12.3374689,23.0936139 13.2871095,21.7578122 Z" id="Rectangle-2" fill="#FFCFC7"></path>
+                    <g id="Path-4">
+                        <mask id="mask-7" fill="white">
+                            <use xlink:href="#path-6"></use>
+                        </mask>
+                        <use id="Mask" fill="#FFFFFF" xlink:href="#path-6"></use>
+                        <path d="M30.3221331,24.6612154 C29.7330509,23.7698271 29.3694036,22.4870451 29.3694036,22.4870451 L29.6520908,25.2753153 L30.3221331,27.1764032 L32.1810322,26.7415488 C32.1810322,26.7415488 30.9112154,25.5526036 30.3221331,24.6612154 Z" fill="#EFF5FD" mask="url(#mask-7)"></path>
+                    </g>
+                    <path d="M36.5653995,36.1204839 C35.687644,35.4474586 34.7057742,34.0510326 34.3676683,32.9867995 L29.6722738,18.2074269 C29.6722738,18.2074269 27.4136386,16.3990778 31.1626351,16.3990778 C34.9116317,16.3990778 35.546712,15.0872942 35.546712,15.0872942 L39.6929432,31.5861024 L51.2907533,43.073623 L48.5984304,45.3468977 L36.5653995,36.1204839 Z" id="Rectangle-1459" fill="#FFCFC7" transform="translate(40.144266, 30.217096) rotate(10.000000) translate(-40.144266, -30.217096) "></path>
+                    <path d="M54.9584948,47.5716106 L53.8492328,48.6876421 C53.5604399,48.9778812 53.2125017,48.9784671 53.0093922,48.7372037 C52.8747397,48.5774047 52.9279322,48.0844166 52.965611,47.7716312 L53.5219297,43.1685118 C53.5716138,42.7573062 53.2805595,42.3599765 52.8718132,42.3100299 C52.4631998,42.2600163 52.0916168,42.5762666 52.041916,42.9874052 L51.4282478,46.6028913 C51.396156,46.6928086 51.3273831,46.7083583 51.3196511,46.5873416 L51.1257341,42.0584408 C51.1257341,41.6441721 50.7771003,41.1380261 50.3653609,41.1380261 C49.9536215,41.1380261 49.6199001,41.4737762 49.6199001,41.8880449 L49.6052177,46.6224415 C49.6090587,46.6771082 49.5625506,46.6927416 49.5541036,46.6303586 L48.7664344,43.2012683 C48.6932385,42.7936111 48.4299763,42.2328671 48.0248548,42.3064981 C47.6196834,42.3801124 47.3505946,42.7937283 47.4237239,43.2012683 L48.0142795,47.5259155 C48.0148614,47.6029443 47.9892712,47.6468819 47.9528894,47.5482107 L47.0718782,45.1772212 C46.9340497,44.7868713 46.5078275,44.5594168 46.1198659,44.6980253 C45.7319709,44.8367007 45.5291774,45.2889482 45.6669559,45.6792312 L47.211386,50.7584667 C47.2194505,50.7865198 47.227964,50.8143051 47.2367269,50.8419565 C47.6686026,52.180036 48.9057496,53.1380261 50.3653609,53.1380261 C51.2998307,53.1380261 52.2704163,52.8064605 53.0092592,52.2361255 C53.8073305,51.7524939 56.363999,48.9856645 56.363999,48.9856645 C56.7520935,48.5951974 56.6941454,47.9972612 56.3059345,47.6067272 C55.9178399,47.216327 55.3465727,47.1811435 54.9584948,47.5716106 Z" id="iconfont-shou" fill="#FFCFC7" transform="translate(51.125734, 47.138026) scale(1, -1) rotate(44.000000) translate(-51.125734, -47.138026) "></path>
+                    <path d="M22.7543392,13.0730385 C21.4492879,15.9068643 20.7248905,19.4136168 19.9677507,20.9096016 C18.2408987,24.3215796 17.3529984,24.8604759 17.3529984,24.8604759" id="Path-12" stroke="#FFBFBA" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(20.053669, 18.966757) rotate(7.000000) translate(-20.053669, -18.966757) "></path>
+                </g>
+                <g id="Rectangle-1456" transform="translate(34.427382, 24.575974) scale(-1, 1) rotate(-20.000000) translate(-34.427382, -24.575974) ">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
+                    <use fill="#FFBFBA" fill-rule="evenodd" xlink:href="#path-8"></use>
+                </g>
+                <g id="头" transform="translate(29.718434, 26.425748) rotate(26.000000) translate(-29.718434, -26.425748) translate(16.718434, 3.425748)">
+                    <path d="M10,8.83136671 C10,4.50622231 13.5121654,1 17.8249998,1 L17.8249998,1 C22.1466279,1 25.6499996,4.50396035 25.6499996,8.83113908 L25.6499996,10.2335106 L25.6499996,12.6313763 C25.6499996,16.9554964 22.1378342,20.4608884 17.8249998,20.4608884 L17.8249998,20.4608884 C13.5033717,20.4608884 10,16.9591955 10,12.6295217 L10,8.83136671 Z" id="Mask" fill="#FFCFC7"></path>
+                    <path d="M8.12616287,6.19131478 L23.3177958,7.57739004 L16.367781,42.5447082 C15.9369056,44.7125533 13.8929387,45.8788479 11.8080253,45.1516434 L3.67107574,42.3135275 C1.58366754,41.5854529 0.305490956,39.2454486 0.812141041,37.1040879 L8.12616287,6.19131478 Z" id="Rectangle-648" fill="url(#linearGradient-10)"></path>
+                    <path d="M11.6812421,18.7463612 C16.6800594,18.7937594 23.7179263,10.3822989 24.7383933,6.77450066 C25.7588603,3.1667024 21.6815672,0.0320439684 16.297012,0.0320439684 C10.9124568,0.0320439684 7.85562995,4.59606619 7.85562995,7.99223472 C7.85562995,8.53856826 9.29379502,18.7237237 11.6812421,18.7463612 Z" id="Oval-24" fill="#1D5A90"></path>
+                    <path d="M20,16 C21.1045695,16 20.3236227,15.9542812 20.3236227,14.5357995 C20.3236227,13.1173178 21.1045695,11 20,11 C18.8954305,11 18,12.1192881 18,13.5 C18,14.8807119 18.8954305,16 20,16 Z" id="Oval-2" fill="#FFBFBA"></path>
+                </g>
+            </g>
+            <g id="白色背景墙" transform="translate(118.000000, 0.000000)">
+                <g id="Rectangle-291">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-11"></use>
+                    <use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-11"></use>
+                </g>
+                <path d="M217.324845,66.6102349 C210.394808,69.0648935 212.014476,72.5604878 212.005429,77.0179572 L220.421524,77.0179572 C220.432381,75.2992633 219.347234,71.4116926 223.232513,70.4599518 C219.347234,71.4116926 236.356324,66.0319491 236.443181,66.6102349 C236.466705,66.7682757 226.036481,63.9019464 226.036481,63.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
+                <path d="M256.324845,78.6102349 C250.384193,79.4679693 251.014476,84.5604878 251.005429,89.0179572 L259.421524,89.0179572 C259.432381,87.2992633 259.063665,83.5528001 261.920947,82.1573828 C258.035667,83.1091237 275.356324,78.0319491 275.443181,78.6102349 C275.466705,78.7682757 265.036481,75.9019464 265.036481,75.9019464" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
+                <g id="Group-21" transform="translate(95.000000, 133.000000)">
+                    <polygon id="Rectangle-3" fill="#BDCEEB" opacity="0.300000012" points="3 1 71 21 71 44 3 24"></polygon>
+                    <polygon id="Rectangle-3-Copy" fill="#C0DBF8" opacity="0.639458955" points="3.37286438 24 71 43.9434662 71 45.7272129 0 24.8664486"></polygon>
+                    <polygon id="Rectangle-4" fill="#CCE7FF" points="0 0 3.4625074 1.0179419 3.4625074 24.0179419 0 24.9070677"></polygon>
+                </g>
+                <polygon id="Rectangle-1553" fill="#E2E9F5" points="11.9000244 0 347.343201 100 335.267925 103 0 2.84565806"></polygon>
+                <polygon id="Combined-Shape" fill="#C3D2EB" points="335 102.866152 347.339966 100 347.341035 503.283905 335 506.174164"></polygon>
+                <polygon id="shadow" fill="#E2ECFA" opacity="0.550839552" points="347 432.887124 449.782707 462.038067 347 502.380069"></polygon>
+            </g>
+            <g id="shadow" transform="translate(211.000000, 226.000000)" fill-opacity="0.200000018">
+                <polygon id="Rectangle-6" fill="#BCC4D1" points="28 7.10542736e-15 95 20.0580158 95 44.2405205 28 24.3199844"></polygon>
+                <polygon id="Rectangle-6" fill="#BBC4D0" points="28 40 95 60.0580158 95 84.2405205 28 64.3199844"></polygon>
+                <polygon id="Rectangle-6" fill="#BCC4D1" points="144 32 211 52.0580158 211 76.2405205 144 56.3199844"></polygon>
+                <polygon id="Rectangle-6" fill="#BCC4D1" points="114 33 134 38.0580158 134 53.2405205 114 48.3199844"></polygon>
+                <polygon id="Rectangle-6" fill="#BCC4D1" points="114 73 134 78.0580158 134 93.2405205 114 88.3199844"></polygon>
+                <polygon id="Rectangle-6" fill="#BCC4D1" points="0 2 18 6.05801582 18 21.2405205 0 15.9945803"></polygon>
+                <polygon id="Rectangle-6" fill="#BCC4D1" points="0 42 18 48.0580158 18 61.5267487 0 56.4029055"></polygon>
+                <polygon id="Rectangle-6" fill="#BBC4D0" points="145 72 212 92.0580158 212 116.24052 145 96.3199844"></polygon>
+                <path d="M55.2,120.028239 C57.107455,120.593277 58,123.206131 58,124.89045 L58,149.089935 C58,150.747262 57.2262211,152.892249 55.2,152.29302 L4.8,137.368085 C2.8907455,136.803046 2,134.190192 2,132.505874 L2,108.306388 C2,106.649061 2.77377892,104.502275 4.8,105.103303 L55.2,120.028239" id="Page-1" fill="#BBC4D0"></path>
+                <path d="M121.2,140.028239 C123.107455,140.593277 124,143.206131 124,144.89045 L124,169.089935 C124,170.747262 123.226221,172.892249 121.2,172.29302 L70.8,157.368085 C68.8907455,156.803046 68,154.190192 68,152.505874 L68,128.306388 C68,126.649061 68.7737789,124.502275 70.8,125.103303 L121.2,140.028239" id="Page-1" fill="#BBC4D0"></path>
+            </g>
+            <g id="checkbox1-1" transform="translate(200.000000, 207.000000)">
+                <g id="Page-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-14)" xlink:href="#path-13"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-13"></use>
+                </g>
+                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
+            </g>
+            <g id="checkbox3-1" transform="translate(200.000000, 248.000000)">
+                <g id="Page-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-15"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-15"></use>
+                </g>
+                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#D9EDFE"></path>
+            </g>
+            <g id="confirmbutton" transform="translate(200.000000, 320.000000)">
+                <g id="Page-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
+                    <use fill="#0B66B8" fill-rule="evenodd" xlink:href="#path-17"></use>
+                </g>
+                <path d="M56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 Z" id="Page-1" fill="#157AD6"></path>
+            </g>
+            <g id="cancelbutton" transform="translate(266.000000, 340.000000)">
+                <g id="Page-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-20)" xlink:href="#path-19"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-19"></use>
+                </g>
+                <path d="M53.2,18.0282388 C55.107455,18.5932773 56,21.2061308 56,22.8904496 L56,47.0899354 C56,48.7472619 55.2262211,50.892249 53.2,50.2930203 L2.8,35.3680845 C0.890745501,34.803046 0,32.1901925 0,30.5058737 L0,6.30638786 C0,4.64906138 0.77377892,2.50227475 2.8,3.10330303 L53.2,18.0282388" id="Page-1" fill="#DAEDFE"></path>
+            </g>
+            <g id="梯子" transform="translate(315.000000, 53.000000)">
+                <path d="M54.0848059,44.7867802 C54.0577014,44.6570069 54.0296142,44.5190045 54,44.3713422 L54,42.331311 L23.7883587,33.2354055 C23.6638166,33.2036099 23.5422496,33.1864407 23.4215236,33.1827845 L23.4215238,24 L15.0054286,24 L15.0054286,28.1820398 L15,28.1820398 L15,164.18204 L15.0017558,164.18204 L15.0054286,176.624327 C15.0054286,178.736327 16.4313333,180.711837 18.5267619,181.076408 C18.9357143,181.148245 19.335619,181.155429 19.7481905,181.097959 C21.9141905,180.801633 23.4215238,178.781224 23.4215238,176.609959 L23.4215238,162.752326 L54,171.92102 L54,170.430952 L54.0054286,188.624327 C54.0054286,190.736327 55.4313333,192.711837 57.5267619,193.076408 C57.9357143,193.148245 58.335619,193.155429 58.7481905,193.097959 C60.9141905,192.801633 62.4215238,190.781224 62.4215238,188.609959 L62.4215238,36 L54.0054286,36 L54.0054286,44.0906122 C54.022798,44.3282887 54.0491493,44.5599724 54.0848059,44.7867802 Z M54.5064352,46.3500296 C54.5640446,46.5006767 54.6278024,46.6488138 54.7009815,46.8030432 C54.6307598,46.6529087 54.565952,46.5020457 54.5064352,46.3500296 Z M54.9922085,47.4954176 C54.9639742,47.59234 54.9255935,47.6751334 54.8791834,47.7543362 C54.8828727,47.7501259 54.8865734,47.7459186 54.8902857,47.7417143 C54.9519257,47.6706706 54.9868003,47.5839053 54.9922085,47.4954176 Z M54.0829305,49.176864 C54.0552095,49.2546599 54.0275328,49.3374152 54,49.4256254 L54,50.9156935 L23.4215238,41.7469995 L23.4215238,53.1827873 C23.5422496,53.1864407 23.6638166,53.2036099 23.7883587,53.2354055 L54,62.331311 L54,64.3713422 C54.0124132,64.4332368 54.0245581,64.4934341 54.0364747,64.5520395 C54.0240563,64.4412008 54.0137193,64.3291198 54.0054286,64.2156735 L54,49.4819592 C54.0247611,49.3773085 54.0523454,49.2757146 54.0829305,49.176864 Z M54.4527177,68.3795845 C54.3086063,68.6174614 54.1521077,68.9382999 54,69.4256254 L54,70.9156935 L23.4215238,61.7469995 L23.4215238,73.1827873 C23.5422496,73.1864407 23.6638166,73.2036099 23.7883587,73.2354055 L54,82.331311 L54,84.3713422 C54.0043085,84.3928252 54.0085847,84.4141038 54.0128302,84.4351822 C54.0102039,84.4038025 54.0077369,84.3723209 54.0054286,84.3407347 L54,69.6070204 C54.0984366,69.190987 54.2414915,68.8232622 54.4527177,68.3795845 Z M54.6837009,88.0385738 C54.4882145,88.3061196 54.2387006,88.660872 54,89.4256254 L54,90.9156935 L23.4215238,81.7469995 L23.4215238,93.1827873 C23.5422496,93.1864407 23.6638166,93.2036099 23.7883587,93.2354055 L54,102.331311 L54,104.371342 C54.0018069,104.380352 54.0036081,104.389325 54.0054037,104.398263 L54,89.7320816 C54.1307623,89.1794268 54.340259,88.7120182 54.6837009,88.0385738 Z M54.9366579,107.644507 C54.7519518,108.047312 54.3634419,108.261223 54,109.425625 L54,110.915693 L23.4215238,101.747 L23.4215238,113.182787 C23.5422496,113.186441 23.6638166,113.20361 23.7883587,113.235406 L54,122.331311 L54,124.371342 C54.0017914,124.380274 54.0035772,124.389171 54.0053575,124.398033 L54,109.858939 C54.1610476,109.17649 54.4415238,108.625143 54.9445714,107.658939 C54.9419278,107.654129 54.93929,107.649318 54.9366579,107.644507 Z M54.9042222,127.709721 C54.7091069,128.073845 54.3433659,128.325543 54,129.425625 L54,130.915693 L23.4215238,121.747 L23.4215238,133.182787 C23.5422496,133.186441 23.6638166,133.20361 23.7883587,133.235406 L54,142.331311 L54,144.371342 C54.0017757,144.380196 54.0035459,144.389015 54.0053107,144.3978 L54,129.984 C54.1610476,129.303347 54.4415238,128.752 54.8902857,128.243755 C55.0024762,128.114449 55.026,127.933061 54.9445714,127.784 C54.930969,127.75925 54.9175194,127.734491 54.9042222,127.709721 Z M54.8693965,147.770793 C54.6676741,148.105139 54.3238831,148.387963 54,149.425625 L54,150.915693 L23.4215238,141.747 L23.4215238,154.188114 C23.5422496,154.191768 23.6638166,154.208937 23.7883587,154.240732 L54,163.336638 L54,165.376669 C54.2776696,166.761183 54.421089,167.296461 54.8790159,168.161935 C54.9004369,168.120712 54.9222858,168.078722 54.9445714,168.035918 C54.3908571,167.028408 54.0904762,166.006531 54.0054286,164.842776 L54,150.109061 C54.1610476,149.428408 54.4415238,148.877061 54.9445714,147.910857 C54.9189729,147.864196 54.8939159,147.817513 54.8693965,147.770793 Z" id="Combined-Shape" fill-opacity="0.200000018" fill="#BCC4D1"></path>
+                <g id="Stroke-1" transform="translate(38.000000, 12.000000)">
+                    <mask id="mask-22" fill="white">
+                        <use xlink:href="#path-21"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-21"></use>
+                        <use fill="#DEEFFF" fill-rule="evenodd" xlink:href="#path-21"></use>
+                    </g>
+                    <path d="M6.66528399,174.019592 C6.91349293,173.22654 7,171.373639 7,171.373639 L7,16.9987958 C7,13.1334676 10.0413722,9.25563755 13.7926382,8.3375317 L27.3522011,5.01888842 C30.569845,4.23138424 33.1782608,6.28199491 33.1782608,9.58720263 L33.1782608,176.999999 L5.23906441,177 C5.23906441,177 6.3265144,175.101994 6.66528399,174.019592 Z" id="Rectangle-18" fill="#C7DAF5" mask="url(#mask-22)"></path>
+                </g>
+                <g id="Rectangle-18">
+                    <mask id="mask-25" fill="white">
+                        <use xlink:href="#path-24"></use>
+                    </mask>
+                    <use id="Mask" stroke="#89B3EF" stroke-width="0.25" stroke-linecap="round" stroke-linejoin="round" fill="#D9EDFE" xlink:href="#path-24"></use>
+                    <path d="M5.42621958,174.169083 C5.67442852,173.376031 5.76093559,171.523129 5.76093559,171.523129 L5.76093559,17.1482867 C5.76093559,13.2829584 8.80230779,9.40512837 12.5535738,8.48702253 L26.1131367,5.16837924 C29.3307806,4.38087506 31.9391964,6.43148573 31.9391964,9.73669345 L31.9391964,177.14949 L4,177.14949 C4,177.14949 5.08744999,175.251485 5.42621958,174.169083 Z" fill="#AFCAF1" opacity="0.550314832" mask="url(#mask-25)"></path>
+                </g>
+                <g id="Rectangle-19" transform="translate(2.000000, 27.000000)">
+                    <mask id="mask-27" fill="white">
+                        <use xlink:href="#path-26"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-28)" xlink:href="#path-26"></use>
+                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-26"></use>
+                    </g>
+                    <polygon fill="#C7DAF5" mask="url(#mask-27)" points="-1 3.74733444 39.3323936 15.4525213 39.3323936 19.3000011 -1 7.38941574"></polygon>
+                </g>
+                <g id="Rectangle-19" transform="translate(2.000000, 47.000000)">
+                    <mask id="mask-30" fill="white">
+                        <use xlink:href="#path-29"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-31)" xlink:href="#path-29"></use>
+                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-29"></use>
+                    </g>
+                    <polygon fill="#C7DAF5" mask="url(#mask-30)" points="0 4 40.3323936 15.7051868 40.3323936 19.5526667 0 7.6420813"></polygon>
+                </g>
+                <g id="Rectangle-19" transform="translate(2.000000, 67.000000)">
+                    <mask id="mask-33" fill="white">
+                        <use xlink:href="#path-32"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-34)" xlink:href="#path-32"></use>
+                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-32"></use>
+                    </g>
+                    <polygon fill="#C7DAF5" mask="url(#mask-33)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
+                </g>
+                <g id="Rectangle-19" transform="translate(2.000000, 87.000000)">
+                    <mask id="mask-36" fill="white">
+                        <use xlink:href="#path-35"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-37)" xlink:href="#path-35"></use>
+                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-35"></use>
+                    </g>
+                    <polygon fill="#C7DAF5" mask="url(#mask-36)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
+                </g>
+                <g id="Rectangle-19" transform="translate(2.000000, 107.000000)">
+                    <mask id="mask-39" fill="white">
+                        <use xlink:href="#path-38"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-40)" xlink:href="#path-38"></use>
+                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-38"></use>
+                    </g>
+                    <polygon fill="#C7DAF5" mask="url(#mask-39)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
+                </g>
+                <g id="Rectangle-19" transform="translate(2.000000, 127.000000)">
+                    <mask id="mask-42" fill="white">
+                        <use xlink:href="#path-41"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-43)" xlink:href="#path-41"></use>
+                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-41"></use>
+                    </g>
+                    <polygon fill="#C7DAF5" mask="url(#mask-42)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
+                </g>
+                <g id="Rectangle-19" transform="translate(2.000000, 148.000000)">
+                    <mask id="mask-45" fill="white">
+                        <use xlink:href="#path-44"></use>
+                    </mask>
+                    <g id="Mask">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-46)" xlink:href="#path-44"></use>
+                        <use fill="#CCE7FF" fill-rule="evenodd" xlink:href="#path-44"></use>
+                    </g>
+                    <polygon fill="#C7DAF5" mask="url(#mask-45)" points="-2 3 38.3323936 14.7051868 38.3323936 18.5526667 -2 6.6420813"></polygon>
+                </g>
+            </g>
+            <g id="checkbox1" transform="translate(226.000000, 215.000000)">
+                <g id="Rectangle-3">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-48)" xlink:href="#path-47"></use>
+                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-47"></use>
+                </g>
+                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
+                <g id="Rectangle-6">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-50)" xlink:href="#path-49"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-49"></use>
+                </g>
+            </g>
+            <g id="checkbox3" transform="translate(226.000000, 255.000000)">
+                <g id="Rectangle-3">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-52)" xlink:href="#path-51"></use>
+                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-51"></use>
+                </g>
+                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
+                <g id="Rectangle-6">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-54)" xlink:href="#path-53"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-53"></use>
+                </g>
+            </g>
+            <g id="checkbox2-1" transform="translate(315.000000, 241.000000)">
+                <g id="Page-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-56)" xlink:href="#path-55"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-55"></use>
+                </g>
+                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
+            </g>
+            <g id="checked·" transform="translate(197.000000, 218.000000)">
+                <polygon id="Rectangle-1652" fill="#60ACF3" transform="translate(5.036130, 5.821554) rotate(54.000000) translate(-5.036130, -5.821554) " points="3.07150394 5.54011888 8.20628364 5.13832831 8.20628364 6.22543373 4.88010346 6.38887731 1.86597545 6.50478"></polygon>
+                <path d="M4.24655456,10.2765387 L0.490921008,5.4976418 L2.64581298,3.64312744 L6.56137826,8.6085276 L18.3494265,0.114318847 L20.5877398,3.51043594 L6.79989774,13.7333834 L4.24440697,10.2780862 L4.24655456,10.2765387 Z" id="Combined-Shape" fill="#076CC8"></path>
+                <polygon id="Rectangle-1654" fill="#0B4F8D" points="20.5585902 3.48939907 21.7298006 3.48939907 8.38340048 13.2209998 6.85243598 13.6752435"></polygon>
+                <path d="M18.3115339,2.45578123 L21.6731061,0.125966083 L21.7389422,1.33108044 C21.7389422,1.33108044 19.5200657,2.79478353 18.3115339,3.52434255 L18.3115339,2.45578123 Z" id="Rectangle-1652" fill="#60ACF3" transform="translate(20.025238, 1.825154) rotate(90.000000) translate(-20.025238, -1.825154) "></path>
+            </g>
+            <g id="checkbox4-1" transform="translate(315.000000, 280.000000)">
+                <g id="Page-1">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-58)" xlink:href="#path-57"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-57"></use>
+                </g>
+                <path d="M16.5564897,28.0604791 L16.5564897,12.161922 C16.5564897,10.5002434 15.6768818,7.92703578 13.7970747,7.37018727 L2.75941494,4.10180569 C0.762563256,3.50948911 0,5.62515879 0,7.25846288 L0,23.1570201 C0,24.8186986 0.879607848,27.3919062 2.75941494,27.9487548 L13.7970747,31.2171363 C15.7939264,31.8094529 16.5564897,29.6955566 16.5564897,28.0604791 L16.5564897,28.0604791 Z" id="Page-1" fill="#DAEDFE"></path>
+            </g>
+            <g id="checkbox2" transform="translate(342.000000, 247.000000)">
+                <g id="Rectangle-3">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-60)" xlink:href="#path-59"></use>
+                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-59"></use>
+                </g>
+                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
+                <g id="Rectangle-6">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-62)" xlink:href="#path-61"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-61"></use>
+                </g>
+            </g>
+            <g id="checkbox4" transform="translate(343.000000, 287.000000)">
+                <g id="Rectangle-3">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-64)" xlink:href="#path-63"></use>
+                    <use fill="#AFCAF1" fill-rule="evenodd" xlink:href="#path-63"></use>
+                </g>
+                <polygon id="Rectangle-6" fill="#DAEDFE" points="0 2.97608068 67.157901 22.9491399 67.157901 47.1316446 0 27.2960651"></polygon>
+                <g id="Rectangle-6">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-66)" xlink:href="#path-65"></use>
+                    <use fill="#C9E2FB" fill-rule="evenodd" xlink:href="#path-65"></use>
+                </g>
+            </g>
+            <g id="title" transform="translate(198.000000, 71.000000)">
+                <g id="Group">
+                    <polygon id="Rectangle-6" fill-opacity="0.200000018" fill="#BCC4D1" points="12 11 107.310913 39.2488499 107.310913 71.595787 12 43.3839226"></polygon>
+                    <polygon id="Rectangle-3" fill="#AFCAF1" points="95 31.1094727 107.374659 28 107.374659 60.4360677 95 63.4540845"></polygon>
+                    <polygon id="Rectangle-6" fill="#DAEDFE" points="0 3 95.3109131 31.2488499 95.3109131 63.595787 0 35.3839226"></polygon>
+                    <polygon id="Rectangle-6" fill="#C9E1FB" points="12.370682 0 107 27.9739961 94.6952441 31 0 3.02147635"></polygon>
+                </g>
+            </g>
+            <g id="sidebar" transform="translate(93.000000, 2.000000)">
+                <g id="Path-22">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-68)" xlink:href="#path-67"></use>
+                    <use fill="#0B4F8D" fill-rule="evenodd" xlink:href="#path-67"></use>
+                </g>
+                <path d="M12,3.81983503 L74.0416107,22.0342636 L74.0416107,426.169933 L12,407.258429 L12,3.81983503 Z M12,52 L18,54 L18,262 L12,261.898651 L12,52 Z" id="Combined-Shape" fill="#076CC8"></path>
+                <polygon id="Rectangle-8" fill="#0660B3" points="15.1800817 53.0544141 18 54 18 263 15.1800817 262.147026"></polygon>
+                <polygon id="Rectangle-3" fill="#0B4F8D" points="15.375 261 17.9528975 261.998988 17.9528975 263.729858 12 261.875"></polygon>
+                <polygon id="Rectangle-3" fill="#C0DCF9" points="0.016992598 211.191724 9.40315488 209 15.1196044 210.629393 5.82774904 212.878718"></polygon>
+                <polygon id="Rectangle-7" fill="#DAEDFE" points="0 211.185312 6 212.854036 6 261.264052 0 259.560964"></polygon>
+                <polyline id="Rectangle-7" fill="#AFCAF1" points="15.1651854 210.60354 5.87419034 212.834552 5.7527486 261.297634 15.1651854 258.978624 15.1651854 210.60354"></polyline>
+                <path d="M15,212.736487 C16.264979,212.752321 17.1587333,213.134102 18.0419314,214.040172 L18.0419314,213.797381 L18.0419314,226.281791 L18.0419314,225.46017 C17.2467012,226.682924 16.2948881,227.550288 15,228.222363" id="Page-1" fill="#CCE7FF"></path>
+                <path d="M15,240.736487 C16.264979,240.752321 17.1587333,241.134102 18.0419314,242.040172 L18.0419314,241.797381 L18.0419314,254.281791 L18.0419314,253.46017 C17.2467012,254.682924 16.2948881,255.550288 15,256.222363" id="Page-1" fill="#CCE7FF"></path>
+                <polygon id="Rectangle-3" fill="#60ACF3" points="25.0292358 0.841064453 86.2996979 19.0151405 74.0416107 22.1046448 12 3.79017687"></polygon>
+                <g id="icon3" transform="translate(33.000000, 225.000000)">
+                    <path d="M9.18493393,0.0443408139 C6.15016629,0.492401472 3.73393728,3.38098505 2.44598203,6.76562457 C0.474055685,11.9476834 0.968307898,16.8168137 1.34888466,21.5209195 C1.96400292,29.148681 7.51800337,39.667213 16.1503104,42.2235678 C21.0122524,43.6632691 22.8779302,40.5685516 25.2439966,36.4190848 C27.6720173,32.1619354 27.6505094,28.3533338 27.2714078,23.649228 C26.6548144,16.0199915 22.3451313,3.27788498 13.7128242,0.721530203 C12.279888,0.297214142 10.4531232,-0.142897818 9.18493393,0.0443408139 Z" id="Page-1-Copy-3" fill="#03437E" opacity="0.270000011"></path>
+                    <path d="M10.8090772,0.0196748547 C-1.39550678,5.4102888 2.02272427,29.7952213 12.5781463,38.0567878 C14.9287853,39.8965967 17.6382768,42.197747 20.6031094,42.050499 C18.7107461,42.8983063 18.5096436,42.7489281 14.5053225,41.5383186 C12.6629209,40.9813132 10.9920776,40.0197943 9.49551677,38.775724 C3.80358874,34.044103 0.632722716,25.2252658 0.132785637,19.0291617 C-0.25713421,14.2052451 0.11132216,10.0216555 2.60108559,5.65741503 C4.01379078,3.1792618 5.91131063,1.1172399 8.31459427,0.283046871 C9.17926978,-0.0170867751 10.1934691,0.0141976558 11.1560701,0" id="Page-1" fill="#0B4F8D"></path>
+                </g>
+                <g id="icon1" transform="translate(17.000000, 61.000000)">
+                    <g id="Group-5">
+                        <g id="Stroke-3">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-70)" xlink:href="#path-69"></use>
+                            <use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-69"></use>
+                        </g>
+                        <path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
+                    </g>
+                </g>
+            </g>
+            <g id="icon2" transform="translate(110.000000, 144.000000)">
+                <g id="Group-5">
+                    <g id="Stroke-3">
+                        <use fill="black" fill-opacity="1" filter="url(#filter-72)" xlink:href="#path-71"></use>
+                        <use fill="#A3C6EC" fill-rule="evenodd" xlink:href="#path-71"></use>
+                    </g>
+                    <path d="M3.12981112,9.80379482 C0.134395046,15.0557819 -0.309639901,20.0893912 0.15987246,25.8927824 C0.918735464,35.3030476 6.38000135,49.3101664 17.0295608,52.4639064 C23.0276722,54.2400462 28.0103267,51.2992246 30.9293105,46.180084 C33.9247266,40.9280968 34.3687615,35.8944876 33.901069,30.0910964 C33.1403862,20.6790114 27.6791203,6.6737124 17.0295608,3.51997239 C11.0314494,1.74383261 6.04879495,4.68465422 3.12981112,9.80379482 Z" id="Page-1" fill="#E2E9F7"></path>
+                </g>
+            </g>
+            <g id="man" transform="translate(281.000000, 104.000000)">
+                <g id="鞋子" transform="translate(21.000000, 124.000000)">
+                    <path d="M22.7742091,2.98024586 L28.7742091,2.98024586 L28.7742091,10.0645731 C28.7742091,10.0645731 28.0091137,11.5808013 25.7742091,11.5808013 C23.5393046,11.5808013 22.7742091,10.0645731 22.7742091,10.0645731 L22.7742091,2.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(25.774209, 7.280524) rotate(10.000000) translate(-25.774209, -7.280524) "></path>
+                    <path d="M3.77420915,0.98024586 L9.77420915,0.98024586 L9.77420915,8.06457308 C9.77420915,8.06457308 9.00911373,9.58080128 6.77420915,9.58080128 C4.53930456,9.58080128 3.77420915,8.06457308 3.77420915,8.06457308 L3.77420915,0.98024586 Z" id="Rectangle-17" fill="#FFACAD" transform="translate(6.774209, 5.280524) rotate(10.000000) translate(-6.774209, -5.280524) "></path>
+                    <path d="M23.7700189,18.4959565 C23.7261817,19.0499152 24.0706124,19.7164204 24.5812584,19.9419643 C24.5812584,19.9419643 27.0658469,21.8058508 29.3045013,18.2928854 C30.4203608,16.5418443 32.8516021,16.0122218 34.314365,15.1440376 C35.7862194,14.2704574 36.2870883,13.0605251 36.5887384,12.0074325 C37.1901754,9.90775222 34.9330221,9.96069158 34.9330221,9.96069158 L30.1129777,11.0236574 C30.1129777,11.0236574 30.1948285,11.5007361 30.3320226,12.3101532 C30.3842407,12.6182289 29.8680036,13.2673156 29.0084362,13.8393364 C27.6370402,14.7519664 25.59562,14.1544363 25.59562,14.1544363 C25.59562,14.1544363 25.0759987,14.6130603 24.7061251,14.2128342 C24.3362515,13.812608 24.102315,14.2968164 24.102315,14.2968164 L23.7700189,18.4959565 Z" id="Path-3" fill="#C7DAF5" transform="translate(30.228455, 15.198282) rotate(19.000000) translate(-30.228455, -15.198282) "></path>
+                    <path d="M1.70635126,14.4875264 C1.69860524,15.0405926 2.07229351,15.7063744 2.58293949,15.9319182 C2.58293949,15.9319182 5.06752802,17.7958048 7.30618239,14.2828394 C8.42204189,12.5317983 10.8532832,12.0021758 12.3160461,11.1339915 C13.7879005,10.2604113 14.2887695,9.05047906 14.5904196,7.99738648 C15.1918566,5.89770617 12.9347032,5.95064553 12.9347032,5.95064553 L8.10114981,7.16653886 C8.10114981,7.16653886 8.39708186,9.17988268 6.83873774,9.93129268 C5.28039361,10.6827027 3.530486,10.1119463 3.530486,10.1119463 C3.530486,10.1119463 2.69022362,9.56452146 2.45515389,9.34125176 C2.22008417,9.11798206 2.45515389,9.34125176 2.45515389,9.34125176 C2.08140847,9.34125177 1.77223568,9.78337845 1.76440251,10.3426667 L1.70635126,14.4875264 Z" id="Path-3" fill="#3E0F3F" transform="translate(8.199279, 11.188236) rotate(19.000000) translate(-8.199279, -11.188236) "></path>
+                    <path d="M20.6927047,16.4798039 C20.6927047,17.0358848 21.0726724,17.7041105 21.5833183,17.9296544 C21.5833183,17.9296544 24.0679069,19.7935409 26.3065612,16.2805755 C27.4224207,14.5295344 29.853662,13.9999119 31.316425,13.1317277 C32.7882793,12.2581475 33.2891483,11.0482152 33.5907984,9.99512261 C34.1922354,7.8954423 31.9350821,7.94838166 31.9350821,7.94838166 L27.1150377,9.01134748 C27.1150377,9.01134748 27.1968885,9.48842615 27.3340826,10.2978433 C27.3863007,10.605919 26.8700635,11.2550057 26.0104961,11.8270264 C24.6391001,12.7396564 22.59768,12.1421264 22.59768,12.1421264 C22.59768,12.1421264 21.7524905,11.6552318 21.3826169,11.2550057 C21.0127434,10.8547795 20.6927047,11.5511954 20.6927047,11.5511954 L20.6927047,16.4798039 Z" id="Path-3" fill="#613F62" transform="translate(27.192705, 13.185972) rotate(19.000000) translate(-27.192705, -13.185972) "></path>
+                </g>
+                <g id="下半身" transform="translate(24.000000, 61.000000)">
+                    <path d="M3.97348091,35.8497366 C2.34956432,26.400557 0,7.00925805 0,7.00925805 L13.0321022,11.6503649 C13.0321022,11.6503649 13.7391421,26.8058403 14.1860792,35.2425241 C14.734544,45.595712 17.1722848,65.7984672 17.1722848,65.7984672 C17.1722848,65.7984672 16.4231357,68.2344309 13.444825,68.2344309 C11.2466274,68.2344309 9.91577321,66.9074514 9.36940221,66.2122961 C9.17550188,65.965594 9.08040349,65.7984672 9.08040349,65.7984672 C9.08040349,65.7984672 5.71789227,46.0000461 3.97348091,35.8497366 Z" id="Rectangle-16" fill="#004183" transform="translate(8.586142, 37.621844) scale(-1, 1) translate(-8.586142, -37.621844) "></path>
+                    <path d="M1,5.10374928 C1,1.05689979 2.75070465,0 2.75070465,0 L32.6036467,8.3949317 L31.8340797,20.4593716 L4,11.7047234 C4,11.7047234 1,9.15059876 1,5.10374928 Z" id="Rectangle-14-Copy" fill="#095DBF"></path>
+                    <path d="M14.9038787,6 C14.9038787,6 13.8032567,8.02548415 14.0310389,10.2576733 C14.1250765,11.1792104 14.4455233,12.1359777 15.1632932,13" id="Path-2" stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <g id="Path-10" transform="translate(17.000000, 7.000000)">
+                        <mask id="mask-74" fill="white">
+                            <use xlink:href="#path-73"></use>
+                        </mask>
+                        <use id="Mask" fill="#095DBF" transform="translate(8.178492, 30.810524) scale(-1, 1) translate(-8.178492, -30.810524) " xlink:href="#path-73"></use>
+                        <polygon id="Rectangle-5" fill="#0A57B2" mask="url(#mask-74)" points="13.5496529 28.1789711 13.5496529 -1 16.4824928 -0.0527771115 16.4824931 28.7343892 10.4490563 60.4088554 7.75643292 62.2039375"></polygon>
+                        <polyline stroke="#267BDE" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round" mask="url(#mask-74)" points="13.4135465 0.875698903 13.597349 28.1937288 7.48305925 61.9805001"></polyline>
+                    </g>
+                </g>
+                <g id="上半身" transform="translate(0.000000, 21.000000)">
+                    <path d="M12.0410227,37.9552057 L22.59781,27.4988081 L26.7440413,11 C26.7440413,11 27.3791216,12.3117836 31.1281182,12.3117836 C34.8771147,12.3117836 34.2606313,12.3117836 34.2606313,12.3117836 L28.6320548,29.3399718 C28.2844569,30.3915632 27.2684431,31.7562232 26.3617752,32.3908971 L14.0131704,41.035008 C14.02288,41.7415503 13.8050846,42.4449476 13.3784498,43.0297345 C13.3779697,43.0304122 13.3776123,43.0311446 13.377078,43.0318616 L13.3705205,43.0406338 C13.3533007,43.0639762 13.3358261,43.0871956 13.3178708,43.1102091 L10.1164762,47.345179 C9.88171485,47.6860467 9.39663987,47.7878077 9.05645015,47.5555054 C8.7162755,47.32311 8.64976284,46.8445946 8.88454903,46.5036471 L10.2848744,44.3972614 C10.3433165,44.3098304 10.2927286,44.3149533 10.230753,44.3607006 L7.0791598,47.3804338 C6.79243741,47.6791427 6.29964865,47.7045626 6.00193968,47.4200415 C5.70424649,47.1355705 5.71437052,46.6489148 6.0011486,46.3500832 L8.60114638,43.6413518 C8.6466503,43.5978502 8.60666579,43.5694134 8.56469718,43.6046532 L4.72585979,46.3755833 C4.39070937,46.6190844 3.92292529,46.5464471 3.68091095,46.2133429 C3.43889662,45.8802388 3.51436766,45.4129035 3.84951808,45.1694025 L7.52858211,42.2382786 C7.62194192,42.1608915 7.56893825,42.1143929 7.4773306,42.1412822 L4.19163573,43.7699435 C3.82980422,43.971396 3.35554137,43.8566662 3.15582627,43.4966939 C2.95597881,43.1366533 3.10634789,42.6676409 3.46822379,42.4661355 L7.51922159,40.2105611 C7.79441733,40.0571932 8.2245189,39.8104558 8.27465218,39.6075921 C8.35045361,39.3014621 8.1454667,39.0203185 7.74091008,38.9572784 L6.18601378,38.7158534 C5.6420128,38.6314026 5.33469446,38.1485574 5.42241854,37.6051108 C5.51018254,37.0614914 5.95986202,36.6631523 6.50387277,36.7476166 C6.50387277,36.7476166 10.2450569,37.1897033 11.1053243,37.5510707 L11.1054176,37.5510851 C11.4283192,37.6457185 11.7438189,37.7829579 12.0410227,37.9552057 Z" id="Combined-Shape" fill="#F0F3F6"></path>
+                    <path d="M9.0410227,32.9552057 L19.59781,22.4988081 L23.7440413,6 C23.7440413,6 24.3791216,7.31178355 28.1281182,7.31178355 C31.8771147,7.31178355 31.2606313,7.31178355 31.2606313,7.31178355 L25.6320548,24.3399718 C25.2844569,25.3915632 24.2684431,26.7562232 23.3617752,27.3908971 L11.0131704,36.035008 C11.02288,36.7415503 10.8050846,37.4449476 10.3784498,38.0297345 C10.3779697,38.0304122 10.3776123,38.0311446 10.377078,38.0318616 L10.3705205,38.0406338 C10.3533007,38.0639762 10.3358261,38.0871956 10.3178708,38.1102091 L7.11647619,42.345179 C6.88171485,42.6860467 6.39663987,42.7878077 6.05645015,42.5555054 C5.7162755,42.32311 5.64976284,41.8445946 5.88454903,41.5036471 L7.28487442,39.3972614 C7.34331648,39.3098304 7.29272862,39.3149533 7.23075303,39.3607006 L4.0791598,42.3804338 C3.79243741,42.6791427 3.29964865,42.7045626 3.00193968,42.4200415 C2.70424649,42.1355705 2.71437052,41.6489148 3.0011486,41.3500832 L5.60114638,38.6413518 C5.6466503,38.5978502 5.60666579,38.5694134 5.56469718,38.6046532 L1.72585979,41.3755833 C1.39070937,41.6190844 0.922925291,41.5464471 0.680910954,41.2133429 C0.438896616,40.8802388 0.51436766,40.4129035 0.849518076,40.1694025 L4.52858211,37.2382786 C4.62194192,37.1608915 4.56893825,37.1143929 4.4773306,37.1412822 L1.19163573,38.7699435 C0.829804215,38.971396 0.35554137,38.8566662 0.155826269,38.4966939 C-0.0440211873,38.1366533 0.106347885,37.6676409 0.468223791,37.4661355 L4.51922159,35.2105611 C4.79441733,35.0571932 5.2245189,34.8104558 5.27465218,34.6075921 C5.35045361,34.3014621 5.1454667,34.0203185 4.74091008,33.9572784 L3.18601378,33.7158534 C2.6420128,33.6314026 2.33469446,33.1485574 2.42241854,32.6051108 C2.51018254,32.0614914 2.95986202,31.6631523 3.50387277,31.7476166 C3.50387277,31.7476166 7.24505686,32.1897033 8.10532429,32.5510707 L8.10541755,32.5510851 C8.42831921,32.6457185 8.74381894,32.7829579 9.0410227,32.9552057 Z" id="Combined-Shape" fill="#FFADAE"></path>
+                    <path d="M79.4187854,11.1021761 L70.8109823,17.3392678 L55.6891321,8.07840842 C55.6891321,8.07840842 55.6398194,8.35807478 54.988813,12.0501156 C54.3378066,15.7421565 53,15.7749743 53,15.7749743 L69.7515272,24.0468342 C70.749787,24.5397723 72.2097055,24.3308544 73.0275442,23.5877077 L82.2493049,15.2081571 C82.2822299,15.2211727 82.3013513,15.2275772 82.3040585,15.2271986 L85.023687,14.2190485 C85.9534804,13.6023712 85.9548168,12.5081181 86.0063196,12.4893921 C86.0063196,12.4893921 86.4107684,10.4982602 85.4152023,9.19157971 C84.4196362,7.88489923 83.7525736,8.03309232 83.7525736,8.03309232 C83.7111586,8.05784814 82.4416163,8.74158976 82.2716101,8.69245976 C81.968593,8.60504069 82.1239261,8.41965901 82.2716101,8.03778267 L82.6614408,7.60665972 C82.8603047,7.09331563 82.8483335,6.52143335 82.333833,6.32568137 C81.8191628,6.12987753 80.7103216,7.10907907 79.9877071,7.97895643 C79.456529,8.61838422 79.5793333,9.95405986 79.5296549,10.346326 C79.4699828,10.5917504 79.433186,10.8455661 79.4187854,11.1021761 Z" id="Combined-Shape" fill="#FFACAD"></path>
+                    <g id="Rectangle-15" transform="translate(26.000000, 35.000000)">
+                        <mask id="mask-76" fill="white">
+                            <use xlink:href="#path-75"></use>
+                        </mask>
+                        <g id="Mask">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-77)" xlink:href="#path-75"></use>
+                            <use fill="#FEFFFF" fill-rule="evenodd" xlink:href="#path-75"></use>
+                        </g>
+                        <rect fill="#EAF1F1" mask="url(#mask-76)" x="28" y="7" width="4" height="8"></rect>
+                    </g>
+                    <g id="Rectangle-25" transform="translate(20.000000, 0.000000)">
+                        <mask id="mask-79" fill="white">
+                            <use xlink:href="#path-78"></use>
+                        </mask>
+                        <use id="Mask" fill="#7C8DA2" xlink:href="#path-78"></use>
+                        <g id="Group-14" mask="url(#mask-79)" fill="#587397" opacity="0.392140858">
+                            <g transform="translate(18.762683, 18.934256) rotate(9.000000) translate(-18.762683, -18.934256) translate(10.762683, 14.934256)">
+                                <polygon id="Fill-1" points="12.43302 7.17390524 15.8898921 3.70061315 12.43302 0.227272727 11.3958333 1.26944564 13.8157753 3.70080649 11.3958333 6.13186122"></polygon>
+                                <polygon id="Fill-2" points="3.45687208 0.227272727 3.69482223e-13 3.7005487 3.45687208 7.17382468 4.49405879 6.13171621 2.07411684 3.70035536 4.49405879 1.26936508"></polygon>
+                                <polygon id="Fill-3" points="10.2916667 0.205618247 6.98740672 7.84705418 5.79166667 7.64150038 9.09595216 -3.49942297e-13"></polygon>
+                            </g>
+                        </g>
+                        <path d="M34,15.0118886 C34,15.0118886 34.9849597,17.2821649 35.4304006,17.6551811 C35.9097756,18.0566141 36.7744477,18.416808 36.7744477,18.416808 L38,46 L34,46 L34,15.0118886 Z" fill="#6B819D" mask="url(#mask-79)"></path>
+                    </g>
+                    <path d="M54.3086113,6.80317972 C54.3086113,6.80317972 56.1500559,6.14752551 57.8128552,7.37989855 C59.4756544,8.6122716 65.0966039,12.5232687 65.0966039,12.5232687 C65.5498581,12.8391496 65.7408275,13.5048742 65.5216636,14.0136474 L62.5495905,20.9131017 C62.3310903,21.4203343 61.7718058,21.5928762 61.3029496,21.300081 L57.0695788,18.6563909 L54.3086113,15.089455 L54.3086113,6.80317972 Z" id="Path-9" fill="#7C8DA2"></path>
+                </g>
+                <g id="Rectangle-1456" transform="translate(40.711648, 20.643433) scale(-1, 1) translate(-40.711648, -20.643433) ">
+                    <use fill="black" fill-opacity="1" filter="url(#filter-81)" xlink:href="#path-80"></use>
+                    <use fill="#FF9EA2" fill-rule="evenodd" xlink:href="#path-80"></use>
+                </g>
+                <g id="头" transform="translate(38.988985, 11.083815) scale(-1, 1) translate(-38.988985, -11.083815) translate(28.988985, 0.583815)">
+                    <path d="M1,8.83136671 C1,4.50622231 4.51216539,1 8.82499981,1 L8.82499981,1 C13.1466279,1 16.6499996,4.50396035 16.6499996,8.83113908 L16.6499996,10.2335106 L16.6499996,12.6313763 C16.6499996,16.9554964 13.1378342,20.4608884 8.82499981,20.4608884 L8.82499981,20.4608884 C4.50337175,20.4608884 1,16.9591955 1,12.6295217 L1,8.83136671 Z" id="Mask" fill="#FFACAD"></path>
+                    <g id="眼镜" transform="translate(15.039748, 10.695366) rotate(-23.000000) translate(-15.039748, -10.695366) translate(11.039748, 8.195366)" stroke="#98B1CA" stroke-width="0.5">
+                        <path d="M6.58972497,-7.54951657e-13 C6.58972497,-7.54951657e-13 7.71474038,0.581779033 7.71474041,2.39983903 C7.71474045,4.21789903 6.41996411,5.17627659 4.9640618,4.30360794" id="Path-5"></path>
+                        <path d="M0.60663877,1.9140498 L7.61773793,2.50485608" id="Path-6" stroke-linecap="round" stroke-linejoin="bevel"></path>
+                    </g>
+                    <path d="M1,6.19138193 C1.30101,6.19138181 3.20160069,3.44330858 3.20160069,3.44330858 L2.23836866,3.20250057 L3.5026107,2.84128856 C3.5026107,2.84128856 7.11919843,-0.530023559 11.2084669,0.0719964876 C15.2977354,0.674016534 16.5619769,3.68411658 16.5619769,3.68411658 L16.7425829,2.48007655 C16.7425829,2.48007655 17.4650072,4.34633848 17.1037949,5.30957063 C16.9321934,5.76717453 16.3872486,6.56759978 14.8996878,7.02071905 C13.2560112,7.52139203 10.4834557,7.58324242 10.4834557,7.58324242 L10.4834561,5.0617077 C10.4834561,5.0617077 9.3498295,6.00075683 7.30296135,6.42217064 C5.25609319,6.84358445 2.23836868,6.6269598 2.23836868,6.6269598" id="Path-7" fill="#375576" transform="translate(9.102467, 3.791621) scale(-1, 1) translate(-9.102467, -3.791621) "></path>
+                    <path d="M7.81226324,4.37166433 C8.92609023,4.60040207 11.3212223,6.31943394 11.3212223,6.31943394 L10.878032,11.1401147 L10.878032,17.2920207 L6.31204298,18.5299749 L5.8991225,17.4749221 L5.8991225,18.5299749 L4.32666901,18.981302 C4.32666901,18.981302 2.38678349,18.2311575 1.27866581,15.3333825 C0.42531037,13.1018217 0.218495667,8.95274544 0.826813149,6.85742976 C2.22505629,2.04125913 1.83665543,4.37166432 1.83665543,4.37166432 C1.83665543,4.37166432 5.76456794,3.95114553 7.81226324,4.37166433 Z" id="Path-8" fill="#375576"></path>
+                    <path d="M11,16 C12.1045695,16 11.3236227,15.9542812 11.3236227,14.5357995 C11.3236227,13.1173178 12.1045695,11 11,11 C9.8954305,11 9,12.1192881 9,13.5 C9,14.8807119 9.8954305,16 11,16 Z" id="Oval-2" fill="#FF9EA2"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/1.3/static/component.bd3411b.png b/1.3/static/component.bd3411b.png
new file mode 100644
index 000000000..ebd183078
Binary files /dev/null and b/1.3/static/component.bd3411b.png differ
diff --git a/1.3/static/element-icons.b02bdc1.ttf b/1.3/static/element-icons.b02bdc1.ttf
new file mode 100644
index 000000000..9c1b72005
Binary files /dev/null and b/1.3/static/element-icons.b02bdc1.ttf differ
diff --git a/1.3/static/guide.0a8462c.png b/1.3/static/guide.0a8462c.png
new file mode 100644
index 000000000..78748298c
Binary files /dev/null and b/1.3/static/guide.0a8462c.png differ
diff --git a/1.3/static/hamburger.50e4091.png b/1.3/static/hamburger.50e4091.png
new file mode 100644
index 000000000..b31a246d6
Binary files /dev/null and b/1.3/static/hamburger.50e4091.png differ
diff --git a/1.3/static/navbar_0.b608f86.png b/1.3/static/navbar_0.b608f86.png
new file mode 100644
index 000000000..5fbe864fb
Binary files /dev/null and b/1.3/static/navbar_0.b608f86.png differ
diff --git a/1.3/static/navbar_1.499e088.png b/1.3/static/navbar_1.499e088.png
new file mode 100644
index 000000000..3137e4848
Binary files /dev/null and b/1.3/static/navbar_1.499e088.png differ
diff --git a/1.3/static/navbar_2.59ecae2.png b/1.3/static/navbar_2.59ecae2.png
new file mode 100644
index 000000000..e225afa97
Binary files /dev/null and b/1.3/static/navbar_2.59ecae2.png differ
diff --git a/1.3/static/navbar_3.8dcec92.png b/1.3/static/navbar_3.8dcec92.png
new file mode 100644
index 000000000..42007eae0
Binary files /dev/null and b/1.3/static/navbar_3.8dcec92.png differ
diff --git a/1.3/static/qrcode.a88f522.png b/1.3/static/qrcode.a88f522.png
new file mode 100644
index 000000000..e921aec03
Binary files /dev/null and b/1.3/static/qrcode.a88f522.png differ
diff --git a/1.3/static/resource.a72b8f8.png b/1.3/static/resource.a72b8f8.png
new file mode 100644
index 000000000..99756867a
Binary files /dev/null and b/1.3/static/resource.a72b8f8.png differ
diff --git a/1.3/versions.json b/1.3/versions.json
new file mode 100644
index 000000000..b7ee41de3
--- /dev/null
+++ b/1.3/versions.json
@@ -0,0 +1 @@
+{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.0-beta.1":"1.3"}
\ No newline at end of file
diff --git a/docs.130412a.js b/docs.130412a.js
new file mode 100644
index 000000000..f46bcaaba
--- /dev/null
+++ b/docs.130412a.js
@@ -0,0 +1,115 @@
+webpackJsonp([0,2],[function(s,t,a){s.exports=a(1)},function(s,t,a){(function(s){"use strict";function t(s){return s&&s.__esModule?s:{default:s}}var l=a(2),n=t(l),e=a(3),i=t(e),v=a(22),_=t(v),c=a(23),r=t(c),p=a(598),o=t(p);a(985);var h=a(990),d=t(h),C=a(996),j=t(C),u=a(1002),g=t(u),m=a(1009),b=t(m),f=a(1014),y=t(f),w=a(1019),k=t(w);n.default.use(o.default),n.default.use(_.default),n.default.component("demo-block",d.default),n.default.component("main-footer",j.default),n.default.component("main-header",g.default),n.default.component("side-nav",b.default),n.default.component("footer-nav",y.default);var x=new _.default({mode:"hash",base:s,routes:r.default});x.afterEach(function(s){var t=k.default[s.meta.lang];for(var a in t)if(new RegExp("^"+a,"g").test(s.name))return void(document.title=t[a]);document.title="Element"}),new n.default({render:function(s){return s(i.default)},router:x}).$mount("#app")}).call(t,"/")},,function(s,t,a){function l(s){a(4)}var n=a(13)(a(14),a(21),l,null,null);s.exports=n.exports},function(s,t){},,,,,,,,,,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},e=a(15),i=a(16),v=l(i),_=a(20),c=l(_);(0,e.use)(location.href.indexOf("zh-CN")>-1?v.default:c.default),t.default={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"}},watch:{lang:function(){this.localize()}},methods:{localize:function(){(0,e.use)("zh-CN"===this.lang?v.default:c.default)},renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a"),t=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var a=s.getAttribute("href");s.href=t+a})}},goAnchor:function(){if(location.href.match(/#/g).length>1){var s=function(){var s=location.href.match(/#[^#]+$/g);if(!s)return{v:void 0};var t=document.querySelector(s[0]);return t?void setTimeout(function(s){document.documentElement.scrollTop=document.body.scrollTop=t.offsetTop+120},50):{v:void 0}}();if("object"===("undefined"==typeof s?"undefined":n(s)))return s.v}}},mounted:function(){this.localize(),this.renderAnchorHref(),this.goAnchor()},created:function(){var s=this;window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})}}},,,,,,function(s,t){"use strict";t.__esModule=!0,t.default={el:{colorpicker:{confirm:"OK",clear:"Clear"},datepicker:{now:"Now",today:"Today",cancel:"Cancel",clear:"Clear",confirm:"OK",selectDate:"Select date",selectTime:"Select time",startDate:"Start Date",startTime:"Start Time",endDate:"End Date",endTime:"End Time",year:"",month1:"Jan",month2:"Feb",month3:"Mar",month4:"Apr",month5:"May",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Oct",month11:"Nov",month12:"Dec",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{jan:"Jan",feb:"Feb",mar:"Mar",apr:"Apr",may:"May",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Dec"}},select:{loading:"Loading",noMatch:"No matching data",noData:"No data",placeholder:"Select"},cascader:{noMatch:"No matching data",placeholder:"Select"},pagination:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{title:"Message",confirm:"OK",cancel:"Cancel",error:"Illegal input"},upload:{delete:"Delete",preview:"Preview",continue:"Continue"},table:{emptyText:"No Data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All",sumText:"Sum"},tree:{emptyText:"No Data"},transfer:{noMatch:"No matching data",noData:"No data",titles:["List 1","List 2"],filterPlaceholder:"Enter keyword",noCheckedFormat:"{total} items",hasCheckedFormat:"{checked}/{total} checked"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{attrs:{id:"app"}},["play"!==s.lang?a("main-header"):s._e(),a("div",{staticClass:"main-cnt"},[a("router-view")],1),"play"!==s.lang?a("main-footer"):s._e()],1)},staticRenderFns:[]}},function(s,t){s.exports=VueRouter},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(25),v=l(i),_=function(s){function t(s,t,n){var e="/changelog"===s.path?a(38)("./"+t+"/changelog.vue"):a(55)("./"+t+s.path+".md"),i={path:s.path.slice(1),meta:{title:s.title||s.name,description:s.description,lang:t},name:"component-"+(s.title||s.name),component:e.default||e};l[n].children.push(i)}var l=[];return Object.keys(s).forEach(function(n,e){var i=s[n];l.push({path:"/"+n+"/component",redirect:"/"+n+"/component/installation",component:a(26)("./"+n+"/component.vue"),children:[]}),i.forEach(function(s){s.groups?s.groups.forEach(function(s){s.list.forEach(function(s){t(s,n,e)})}):s.children?s.children.forEach(function(s){t(s,n,e)}):t(s,n,e)})}),l},c=_(e.default),r=function(s){var t={path:"/"+s+"/guide",redirect:"/"+s+"/guide/design",component:a(521)("./"+s+"/guide.vue"),children:[{path:"design",name:"guide-design"+s,meta:{lang:s},component:a(532)("./"+s+"/design.vue")},{path:"nav",name:"guide-nav"+s,meta:{lang:s},component:a(545)("./"+s+"/nav.vue")}]},l={path:"/"+s+"/resource",meta:{lang:s},name:"resource"+s,component:a(560)("./"+s+"/resource.vue")},n={path:"/"+s,meta:{lang:s},name:"home"+s,component:a(572)("./"+s+"/index.vue")};return[t,l,n]};v.default.forEach(function(s){c=c.concat(r(s.lang))}),c.push({path:"/play",name:"play",component:a(590)});var p=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",o="/en-US";p.indexOf("zh-")!==-1&&(o="/zh-CN"),c=c.concat([{path:"/",redirect:o},{path:"*",redirect:o}]),t.default=c},function(s,t){s.exports={"zh-CN":[{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"},{path:"/transition",name:"内置过渡动画"}]},{name:"更新日志",path:"/changelog"},{name:"基础组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{path:"/icon",title:"Icon 图标"},{path:"/button",title:"Button 按钮"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio 单选框"},{path:"/checkbox",title:"Checkbox 多选框"},{path:"/input",title:"Input 输入框"},{path:"/input-number",title:"InputNumber 计数器"},{path:"/select",title:"Select 选择器"},{path:"/cascader",title:"Cascader 级联选择器"},{path:"/switch",title:"Switch 开关"},{path:"/slider",title:"Slider 滑块"},{path:"/time-picker",title:"TimePicker 时间选择器"},{path:"/date-picker",title:"DatePicker 日期选择器"},{path:"/datetime-picker",title:"DateTimePicker 日期时间选择器"},{path:"/upload",title:"Upload 上传"},{path:"/rate",title:"Rate 评分"},{path:"/color-picker",title:"ColorPicker 颜色选择器"},{path:"/transfer",title:"Transfer 穿梭框"},{path:"/form",title:"Form 表单"}]},{groupName:"Data",list:[{path:"/table",title:"Table 表格"},{path:"/tag",title:"Tag 标签"},{path:"/progress",title:"Progress 进度条"},{path:"/tree",title:"Tree 树形控件"},{path:"/pagination",title:"Pagination 分页"},{path:"/badge",title:"Badge 标记"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert 警告"},{path:"/loading",title:"Loading 加载"},{path:"/message",title:"Message 消息提示"},{path:"/message-box",title:"MessageBox 弹框"},{path:"/notification",title:"Notification 通知"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu 导航菜单"},{path:"/tabs",title:"Tabs 标签页"},{path:"/breadcrumb",title:"Breadcrumb 面包屑"},{path:"/dropdown",title:"Dropdown 下拉菜单"},{path:"/steps",title:"Steps 步骤条"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog 对话框"},{path:"/tooltip",title:"Tooltip 文字提示"},{path:"/popover",title:"Popover 弹出框"},{path:"/card",title:"Card 卡片"},{path:"/carousel",title:"Carousel 走马灯"},{path:"/collapse",title:"Collapse 折叠面板"}]}]}],"en-US":[{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"},{path:"/transition",name:"Built-in transition"}]},{name:"Changelog",path:"/changelog"},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/transfer",title:"Transfer"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"}]}]}]}},function(s,t){s.exports=[{lang:"zh-CN"},{lang:"en-US"}]},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/component.vue":27,"./zh-CN/component.vue":33};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=26},function(s,t,a){function l(s){a(28)}var n=a(13)(a(30),a(32),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(31),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:e.default,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=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(34)}var n=a(13)(a(36),a(37),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(31),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:e.default,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=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/changelog.vue":39,"./zh-CN/changelog.vue":47};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=38},function(s,t,a){function l(s){a(40)}var n=a(13)(a(42),a(46),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(43),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){var v=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(44)},function(s,t,a){var l=a(13)(null,a(45),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"1-3-0-beta-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beta-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0-beta.1")]),a("p",[a("em",[s._v("2017-04-28")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("New component: Transfer")]),a("li",[s._v("Now you can use our pre-defined transitions")]),a("li",[s._v("Vertical mode for Slider, can be activated by the "),a("code",[s._v("vertical")]),s._v(" attribute, #4410 (by @devange)")]),a("li",[s._v("Button style for CheckboxGroup, #3697 (by @mdartic)")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("setCurrentRow")]),s._v(" method, #4390")]),a("li",[s._v("Added summary row, with three attributes: "),a("code",[s._v("show-summary")]),s._v(", "),a("code",[s._v("sum-text")]),s._v(" and "),a("code",[s._v("summary-method")]),s._v(", #4484")])])]),a("li",[s._v("Dialog now has a "),a("code",[s._v("before-close")]),s._v(" hook, #4432")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute, #4473")]),a("li",[a("code",[s._v("on-change")]),s._v(" now also triggers when a file is added, #4447")])])]),a("li",[s._v("Switch now supports "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(", so that you can customize its values, #4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("Added "),a("code",[s._v("default-value")]),s._v(" attribute for initially displayed date in the dropdown, #4222 (by @wacky6)")]),a("li",[a("code",[s._v("type")]),s._v(" now supports dynamic updates, #4417 (by @coffeedeveloper)")])])])]),a("h4",{attrs:{id:"fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Compatibility issues of Select and Table with Vue 2.3.x, #4518")]),a("li",[a("code",[s._v("disabledDate")]),s._v(" of DatePicker having no effect on typed value in the input box, #4309")]),a("li",[s._v("An issue when the key of a Tree node is number 0, #4415")]),a("li",[s._v("TimePicker number not align when picked, #4425 (by @pengchongfu)")]),a("li",[s._v("Autocomplete frequently triggering searching method when typing Chinese, #4393 (by @qazbnm456)")]),a("li",[s._v("Upload not able to select the same file multiple times, #4461")]),a("li",[s._v("Style bug of RadioGroup when nested in a FormItem, #4336")])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.3.0+")])]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("Fixed RadioButton not working properly when some texts on the page are selected, #4217")]),a("li",[s._v("Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)")]),a("li",[s._v("Fixed Cascader clear button not working, #4167 (by @pengchongfu)")]),a("li",[s._v("Fixed router switching error when the page has a Table with Tooltips, #4085")]),a("li",[s._v("Fixed Upload not able to remove selected files, #4233")]),a("li",[s._v("Added "),a("code",[s._v("onClick")]),s._v(" attribute for Notification, #4221 (by @amouillard)")]),a("li",[s._v("Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)")]),a("li",[s._v("Fixed style error of ColorPicker when nested in a FormItem, #4303")]),a("li",[s._v("Added "),a("code",[s._v("enterable")]),s._v(" attribute for Tooltip, #4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("resetFields")]),s._v(" of Form reassigning form items, #3840 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("max")]),s._v(" and "),a("code",[s._v("min")]),s._v(" attributes for CheckboxGroup, #3700 (by @mdartic)")]),a("li",[s._v("Fixed DatePicker adding one to picked month in some specific days, #3935")]),a("li",[s._v("Added "),a("code",[s._v("closeAll")]),s._v(" method for Message, #3966 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("format-tooltip")]),s._v(" attribute for Slider, #3657 (by @liyanlong)")]),a("li",[s._v("Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)")]),a("li",[s._v("Fixed single Select unable to create new items in Vue 2.2.x, #3984")]),a("li",[s._v("Fixed Row disappearing in all breakpoints if its "),a("code",[s._v("span")]),s._v(" is set to 0 in some breakpoints, #4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("Fixed Select not compatible with Vue 2.2.6, #3797")]),a("li",[s._v("Improve performance for rendering tooltip in Table, #3478")]),a("li",[s._v("Add "),a("code",[s._v("tooltip-effect")]),s._v(" property for Table")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("Fixed Switch compatible with SSR, #3752")]),a("li",[s._v("Fixed the time of TimePicker calculating incorrectly, #3479")]),a("li",[s._v("Fixed the week of DatePicker formatting incorrectly, #2774")]),a("li",[s._v("Fixed the week of DatePicker initializing incorrectly, #3058")]),a("li",[s._v("Fixed the events of Popover destroying incorrectly, #3555")]),a("li",[s._v("Fixed InputNumber setInterval, #3514 (by @pengchongfu)")]),a("li",[s._v("Fixed RadioButton css files, #3276")]),a("li",[s._v("Fixed hover style on striped Table, #3696 (by @nicoeg)")]),a("li",[s._v("Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)")]),a("li",[s._v("Added "),a("code",[s._v("delete-tag")]),s._v(" event for Select, #3663 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("onPick")]),s._v(" option for DatePicker, #2921")]),a("li",[s._v("Added "),a("code",[s._v("status")]),s._v(" for Step, #3722")]),a("li",[s._v("Added full example for on-demand importing, #3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("show-tooltip")]),s._v(" property for Slider, #3430 (by @gabrielboliveira)")]),a("li",[s._v("Fixed Slider precision not updating when "),a("code",[s._v("step")]),s._v(" is updated, #3475 (by @gabrielboliveira)")]),a("li",[s._v("Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549")]),a("li",[s._v("Fixed Table automatically shrinking vertically in some conditions, #3539")]),a("li",[s._v("Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)")]),a("li",[s._v("Now Col will hide itself if its "),a("code",[s._v("xs")]),s._v(", "),a("code",[s._v("sm")]),s._v(", "),a("code",[s._v("md")]),s._v(" or "),a("code",[s._v("lg")]),s._v(" is set to 0, #3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("Fixed Carousel not responding to dynamic data updates, #3159")]),a("li",[s._v("Fixed "),a("code",[s._v("cell-dblclick")]),s._v(" of Table not firing issue, #3305")]),a("li",[s._v("Fixed disabled Cascader not displaying initial value, #3297")]),a("li",[s._v("Fixed Slider not correctly displaying initial value when "),a("code",[s._v("show-input")]),s._v(" is true, #3281")]),a("li",[s._v("Fixed Tooltip error in server-side rendering, #3214")]),a("li",[s._v("Fixed "),a("code",[s._v("range-separator")]),s._v(" of DatePicker not working issue, #3378")]),a("li",[s._v("Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)")]),a("li",[s._v("Added "),a("code",[s._v("http-request")]),s._v(" attribute for Upload, #3387")]),a("li",[s._v("Added support for hiding col if its "),a("code",[s._v("span")]),s._v(" is 0, #3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("Fixed Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097")]),a("li",[s._v("Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035")]),a("li",[s._v("Fixed incorrect parameter of "),a("code",[s._v("change")]),s._v(" event of Cascader, #3014")]),a("li",[s._v("Add "),a("code",[s._v("change")]),s._v(" event for ColorPicker, #3049 (by @nicoeg)")]),a("li",[s._v("Fixed "),a("code",[s._v("setCheckedKeys")]),s._v(" method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)")]),a("li",[s._v("Fixed Tooltip not compatible with "),a("code",[s._v("router-link")]),s._v(", #3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("Fixed SSR regression in version 1.2.0, #2982")]),a("li",[s._v("Fixed horizontal scroll buttons not showing in Tabs, #2974")]),a("li",[s._v("Fixed wrong calculation of height after the "),a("code",[s._v("height")]),s._v(" attribute is updated dynamically in Table, #2979")]),a("li",[s._v("Added "),a("code",[s._v("cell-dblclick")]),s._v(" and "),a("code",[s._v("header-dragend")]),s._v(" events for Table, #2983 #2988")]),a("li",[s._v("Fixed form items showing a left padding inside an inline Form with a specified "),a("code",[s._v("label-width")]),s._v(", #2990")]),a("li",[s._v("Fixed Cascader's dropdown misplaces in some conditions, #2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Cascader and ColorPicker")]),a("li",[s._v("New attributes "),a("code",[s._v("editable")]),s._v(" and "),a("code",[s._v("addable")]),s._v(", and new events "),a("code",[s._v("tab-add")]),s._v(" and "),a("code",[s._v("edit")]),s._v(" for Tabs")]),a("li",[s._v("Language config files in UMD format")]),a("li",[s._v("New events "),a("code",[s._v("node-expand")]),s._v(" and "),a("code",[s._v("node-collapse")]),s._v(" for Tree, #2507 (by @masterzhang)")]),a("li",[s._v("New attribute "),a("code",[s._v("indent")]),s._v(" for Tree, #2713")]),a("li",[s._v("Dialog's title now supports named slot, #2657")]),a("li",[s._v("New attribute "),a("code",[s._v("range")]),s._v(" for Slider, #2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Attribute "),a("code",[s._v("auto-upload")]),s._v(" that controls if files are uploaded immediately after selecting, and its default value is "),a("code",[s._v("true")])]),a("li",[s._v("Event "),a("code",[s._v("on-change")]),s._v(" that fires when file status changes")]),a("li",[s._v("Attribute "),a("code",[s._v("list-type")]),s._v(" that configures the appearance of file list")])])]),a("li",[s._v("Scroll bars in Autocomplete are made prettier")])]),a("h4",{attrs:{id:"fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Carousel not responding to contents' update, #2775")]),a("li",[s._v("Numbers in TimePicker not align in some conditions, #2948")]),a("li",[s._v("TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)")]),a("li",[s._v("Tabs' display order error when tab-pane is dynamically changed, #2898")]),a("li",[s._v("Menu highlighting menu-item when "),a("code",[s._v("default-active")]),s._v(" is assigned to an non-existent item")]),a("li",[s._v("Collapse's style issue when nested")])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459")]),a("li",[s._v("The backdrop of Dialog now inserts to body element by default, #2556")]),a("li",[s._v("Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567")]),a("li",[s._v("Upload is refactored\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" renamed to "),a("code",[s._v("file-list")]),s._v(", and "),a("code",[s._v("show-upload-list")]),s._v(" renamed to "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" removed")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("customClass")]),s._v(" of MessageBox affecting follow-up instances, #2472")]),a("li",[s._v("Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466")]),a("li",[s._v("Fixed style missing issue for some components when imported on demand")]),a("li",[s._v("Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540")]),a("li",[s._v("Restored returning to original sorting in sortable Table columns, #2491")]),a("li",[s._v("Added "),a("code",[s._v("reset.css")]),s._v(" in "),a("code",[s._v("theme-default")]),s._v(", #2378")]),a("li",[s._v("Added "),a("code",[s._v("range-separator")]),s._v(" attribute for DatePicker, #2579")]),a("li",[s._v("Published individual component packages: Table, DatePicker, Loading, Upload and Carousel")]),a("li",[s._v("Add Finnish (@groenroos)")])]),a("h3",{attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("Fixed Menu not activating corresponding menu item after router switching in router mode, #2451")]),a("li",[s._v("Fixed "),a("code",[s._v("value")]),s._v(" attribute of Collapse not supporting "),a("code",[s._v("Number")]),s._v(" typed value, #2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("Fixed Input Number triggering "),a("code",[s._v("change")]),s._v(" event when bound value is changed programmatically, #2329")]),a("li",[s._v("Fixed Menu not responding to "),a("code",[s._v("$router")]),s._v(" changing in router mode, #2391")]),a("li",[s._v("Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically")]),a("li",[s._v("Added "),a("code",[s._v("on-icon-click")]),s._v(" attribute for Input, #2414")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Radio Group, #2411")]),a("li",[s._v("Added "),a("code",[s._v("accordion")]),s._v(" attribute for Tree, #2408")]),a("li",[s._v("Added "),a("code",[s._v("show-message")]),s._v(" attribute for Form, #2356")]),a("li",[s._v("Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)")]),a("li",[s._v("Fixed "),a("code",[s._v("firstDayOfWeek")]),s._v(" not working in ranged typed of DatePicker, #2353")]),a("li",[s._v("Fixed DatePicker displaying 1970 when initial value is null, #2388")]),a("li",[s._v("Fixed "),a("code",[s._v("filteredValue")]),s._v(" attribute for Table, #2348")]),a("li",[s._v("Fixed scrollable Table's style with empty data, #2396")]),a("li",[s._v("Added "),a("code",[s._v("beforeClose")]),s._v(" attribute for MessageBox, #2204")]),a("li",[s._v("Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389")])]),a("p",[s._v("Breaking change")]),a("ul",[a("li",[s._v("The "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes added in 1.1.3 are now merged into an object-typed attribute")])]),a("h3",{
+attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167")]),a("li",[s._v("Fixed DatePicker year calculating error when choosing the next year, #2152")]),a("li",[s._v("Added "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes for Table, #2182 (by @njleonzhang)")]),a("li",[s._v("Fixed filterable Select filtering other options with initial value, #2196")]),a("li",[s._v("Added custom i18n processing, making Element compatible with i18n plugins other than "),a("code",[s._v("vue-i18n")]),s._v(", #2129")]),a("li",[s._v("Added "),a("code",[s._v("resize")]),s._v(" attribute for Input, #2263 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown when blurred, #2247")]),a("li",[s._v("Fixed style issues with nested Tabs, #2212 (by @Kingwl)")]),a("li",[s._v("Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("sortable")]),s._v(" and "),a("code",[s._v("fixed")]),s._v(" attribute of Table not working in Vue 2.1.7+")]),a("li",[s._v("Fixed Input Number not resetting on blur when input with illegal values, #2098")]),a("li",[s._v("Removed "),a("code",[s._v("title")]),s._v(" scoped slot of Collapse, and added "),a("code",[s._v("title")]),s._v(" named slot, #2100")]),a("li",[s._v("Fixed range selection in TimePicker not working issue")]),a("li",[s._v("Fixed Tabs' active tab switching when a non-active tab is removed, #2106")]),a("li",[s._v("Fixed console error reporting when navigating Select with arrow keys, #2120")]),a("li",[s._v("Fixed incorrect validation timing of filterable Select in Form, #2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("Fixed compatibility issue with latest Vue due to compilation")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"new-features-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Carousel and Collapse")]),a("li",[s._v("SSR supported")]),a("li",[s._v("Scrollbars' style inside components is upgraded")]),a("li",[s._v("Table now supports custom templates via "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v("; the good old "),a("code",[s._v("inline-template")]),s._v(" is still compatible, but it's no longer recommended and is likely to be removed in the future")]),a("li",[s._v("Table now supports expandable rows")]),a("li",[s._v("DatePicker now supports specifying the first day of week")]),a("li",[s._v("TimeSelect now supports "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete now supports "),a("code",[s._v("popper-class")])]),a("li",[s._v("To customize template of Tab-Pane, now you can use the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("label")])])]),a("h4",{attrs:{id:"fixes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[a("code",[s._v("change")]),s._v(" event of DatePicker incorrectly triggering multiple times, #2070")]),a("li",[s._v("Width shaking of tab-pane while initializing, #1883")])]),a("h4",{attrs:{id:"breaking-changes-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.1.6 and beyond")]),a("li",[s._v("Parameters of Form validateField() methods are updated")]),a("li",[s._v("Alert's render-content attribute is removed, and now you can pass your custom template via default slot")]),a("li",[s._v("The box models of Input and Select are updated from "),a("code",[s._v("block")]),s._v(" to "),a("code",[s._v("inline-block")])]),a("li",[s._v("The box model of Tabs is updated from "),a("code",[s._v("inline-block")]),s._v(" to "),a("code",[s._v("block")]),s._v(", and Tab-Pane's "),a("code",[s._v("label-content")]),s._v(" attribute is removed")]),a("li",[s._v("The dropdown of Autocomplete now inserts directly to "),a("code",[s._v("<body>")]),s._v(", not "),a("code",[s._v("<el-autocomplete>")]),s._v(" any more")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("Fixed DatePicker incorrectly triggering input event, #1834")]),a("li",[s._v("Fixed Tree reporting "),a("code",[s._v("event is undefined")]),s._v(" error in Firefox, #1945")]),a("li",[s._v("Added "),a("code",[s._v("change")]),s._v(" event for DatePicker, whose parameter is the formatted value, #1841")]),a("li",[s._v("Added "),a("code",[s._v("header-align")]),s._v(" attribute for Table, #1424")]),a("li",[s._v("Fixed single select Table's highlight style not removing when data is removed, #1890")]),a("li",[s._v("Fixed filterable Select lagging issue with more options, #1933")]),a("li",[s._v("Fixed multiple disabled Select not disabling removing selected options issue, #2001")]),a("li",[s._v("Fixed Col style not working in "),a("code",[s._v("xs")]),s._v(", #2011")]),a("li",[s._v("Added "),a("code",[s._v("value")]),s._v(" attribute for Tab, #2008")]),a("li",[s._v("Fixed InputNumber "),a("code",[s._v("change")]),s._v(" event incorrectly firing multiple times in some conditions, #1999")]),a("li",[s._v("Added "),a("code",[s._v("clearable")]),s._v(" attribute for DatePicker, #1994")]),a("li",[s._v("Fixed Form always passing validation in async mode, #1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("Fixed nested Popup from event bubbling, #1677")]),a("li",[s._v("Fixed the issue that datetimerange-typed DatePicker can not select time, #1758")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event not firing correctly of Slider, #1809")]),a("li",[s._v("Fixed Loading's spinner splitting while animating in some conditions, #1786")]),a("li",[s._v("Added "),a("code",[s._v("loading-text")]),s._v(", "),a("code",[s._v("no-data-text")]),s._v(", "),a("code",[s._v("no-match-text")]),s._v(" properties and "),a("code",[s._v("visible-change")]),s._v(" event for Select, #1849")]),a("li",[s._v("Added "),a("code",[s._v("popper-class")]),s._v(" property for DatePicker, Select and Tooltip, #1806")]),a("li",[s._v("Added "),a("code",[s._v("expand-on-click-node")]),s._v(", "),a("code",[s._v("current-node-key")]),s._v(" properties and "),a("code",[s._v("current-change")]),s._v(" event for Tree, #1805 #1807")]),a("li",[s._v("Added the third parameter "),a("code",[s._v("column")]),s._v(" for Table's "),a("code",[s._v("row-click")]),s._v(" event, #1808")]),a("li",[s._v("Fixed an error when pages with Checkbox switching routes due to "),a("code",[s._v("computed")]),s._v(" property being cached, #1860")]),a("li",[s._v("Added the tab instance as a parameter for TabPanel's "),a("code",[s._v("label-content")]),s._v(" render function, #1857")]),a("li",[s._v("Added infinite submenus support for NavMenu in vertical mode, #1851")]),a("li",[s._v("Updated Checkbox so that it works without a binding value, #1818")]),a("li",[s._v("Added "),a("code",[s._v("onProgress")]),s._v(" hook for Progress, #1782")]),a("li",[s._v("Fixed Tab not updating active bar with dynamic label, #1761")]),a("li",[s._v("Added "),a("code",[s._v("filter-change")]),s._v(" event for Table, and "),a("code",[s._v("column-key")]),s._v(" property for TableColumn, #1876")]),a("li",[s._v("Added "),a("code",[s._v("hide-on-click")]),s._v(" property for Dropdown, #1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("Fixed DatePicker dropdown appears when hovering on the clear button")]),a("li",[s._v("Fixed DatePicker displays a wrong date when its initial value is null")]),a("li",[s._v("Added "),a("code",[s._v("row-contextmenu")]),s._v(" event and "),a("code",[s._v("max-height")]),s._v(" attribute for Table, #1663 #1674")]),a("li",[s._v("Added "),a("code",[s._v("customClass")]),s._v(" attribute for MessageBox, #1707")]),a("li",[s._v("Added "),a("code",[s._v("iconClass")]),s._v(" and "),a("code",[s._v("customClass")]),s._v(" attributes for Message and Notification, #1671")]),a("li",[s._v("Added empty slot for Table, #1737")]),a("li",[s._v("Added old value as a second parameter in change event for InputNumber")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Tabs, #1620")]),a("li",[s._v("Added "),a("code",[s._v("size")]),s._v(" attribute for DatePicker input, #1440")]),a("li",[s._v("Fixed "),a("code",[s._v("datetimerange")]),s._v(" DatePicker's panel not showing correct date if initial value is present, #1129")]),a("li",[s._v("Fixed DatePicker display error when switching year, #1607")]),a("li",[s._v("Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604")]),a("li",[s._v("Fixed TimePicker not refreshing value after clicking the clear button, #1583")]),a("li",[s._v("Fixed remote filterable Select display error when its value is an object, #1593")]),a("li",[s._v("Fixed Select's clear button still working bug when it's "),a("code",[s._v("disabled")]),s._v(", #1619")]),a("li",[s._v("Fixed Switch's background color error when its "),a("code",[s._v("disabled")]),s._v(" attribute is dynamically changed, #1627")]),a("li",[s._v("Fixed some style bugs of Table")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("Fixed Select with async options and binding value displaying value instead of label, #1537")]),a("li",[s._v("Fixed Select reports an error when initial binding value is an empty object, #1533")]),a("li",[s._v("Fixed remote filtering Select not showing dropdown in some conditions, #1531")]),a("li",[s._v("Fixed Slider sometimes drifting a small distance after releasing dragging, #1546")]),a("li",[s._v("Fixed Steps style in IE9, #1543")]),a("li",[s._v("Added Upload generating URL for all file types, #1530")]),a("li",[s._v("Fixed TimeSelect style, removed flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("controls")]),s._v(" attribute for Input Number, #1473")]),a("li",[s._v("Fixed Checkbox Group and Radio Group async issue, #1511 #1514")]),a("li",[s._v("Added "),a("code",[s._v("offset")]),s._v(" attribute for Notification, #1419")]),a("li",[s._v("Fixed Slider's value not accurate issue when dragging rapidly, #1458")]),a("li",[s._v("Fixed Slider incorrectly showing multiple decimal digits issue, #1450")]),a("li",[s._v("Fixed Select's binding value and displayed value not in sync in some conditions")]),a("li",[s._v("Added "),a("code",[s._v("multiple-limit")]),s._v(" and "),a("code",[s._v("allow-create")]),s._v(" attributes for Select")]),a("li",[s._v("Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438")]),a("li",[s._v("Fixed Tree's view not updating issue after fetching child nodes' data, #1439")]),a("li",[s._v("Fixed some Table's style issues in windows system, #1464 #1507")]),a("li",[s._v("Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451")]),a("li",[s._v("Added "),a("code",[s._v("row-dblclick")]),s._v(" event for Table, #1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("currentPage")]),s._v(" of Pagination not working in some cases, #1336")]),a("li",[s._v("Fixed "),a("code",[s._v("month")]),s._v(" and "),a("code",[s._v("disabledDate")]),s._v(" DatePicker's view not refreshing issue when switching year, #1158")]),a("li",[s._v("Fixed "),a("code",[s._v("readonly")]),s._v(" DatePicker clear button not disabled issue, #1238")]),a("li",[s._v("Fixed Slider not working when binding value is "),a("code",[s._v("NaN")]),s._v(" or "),a("code",[s._v("step")]),s._v(" is smaller than 1, #1239 #1282")]),a("li",[s._v("Added multi-header for Table, #1312")]),a("li",[s._v("Added "),a("code",[s._v("rowStyle")]),s._v(" for Table, #1348")]),a("li",[s._v("Fixed some attributes of TableColumn can not dynamically assigned issue, #1314")]),a("li",[s._v("Added "),a("code",[s._v("filter-node-method")]),s._v(" attribute and "),a("code",[s._v("filter")]),s._v(" method for Tree, #1257")]),a("li",[s._v("Added "),a("code",[s._v("getCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedKeys")]),s._v(" methods for Tree, #1254")]),a("li",[s._v("Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152")]),a("li",[s._v("Fixed Popper not triggering destroy issue when keep-alive, #1359")]),a("li",[s._v("Added object deep validation for Form, #1363")]),a("li",[s._v("Added "),a("code",[s._v("append")]),s._v(" and "),a("code",[s._v("prepend")]),s._v(" for Autocomplete, #1369")]),a("li",[s._v("Added dynamic "),a("code",[s._v("pageSizes")]),s._v(" support for Pagination, #1372")]),a("li",[s._v("Added custom style API for checked buttons in Radio Button, #1380")]),a("li",[s._v("Added assigning title via slot for Menu Group, #1382")]),a("li",[s._v("Fixed DatePicker year switching bug, #1385")]),a("li",[s._v("Added uploaded file list API for Upload, #1393")]),a("li",[s._v("Added multi-type support for "),a("code",[s._v("label")]),s._v(" attribute of Checkbox, #1400")]),a("li",[s._v("Added "),a("code",[s._v("setChecked")]),s._v(" method for Tree, #1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("context")]),s._v(" for Table to specify which context to access inside of table columns, #1161")]),a("li",[s._v("Added multiple languages")]),a("li",[s._v("Fixed language's dynamic switching issue, #1160")]),a("li",[s._v("Added "),a("code",[s._v("render-content")]),s._v(" for Alert, #568")]),a("li",[s._v("Added styles for focused Button, #982")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" triggering timing in Switch, #1162")]),a("li",[s._v("Fixed TimeSelect being disabled when start time is set to "),a("code",[s._v("00:00")]),s._v(", #676")]),a("li",[s._v("Added "),a("code",[s._v("show-header")]),s._v(" attribute and "),a("code",[s._v("header-click")]),s._v(" method for Table, #1195")]),a("li",[s._v("Improved "),a("code",[s._v("height")]),s._v(" attribute for Table when set to a string, #1195")]),a("li",[s._v("Fixed "),a("code",[s._v("selection-change")]),s._v(" of Table not triggering in some cases, #1198")]),a("li",[s._v("Fixed Table's fixed columns not disappear when "),a("code",[s._v("fixed")]),s._v(" attribute is dynamically changed, #1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" and "),a("code",[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",[s._v("nodeKey")]),s._v(", "),a("code",[s._v("emptyText")]),s._v(", "),a("code",[s._v("checkStrictly")]),s._v(", "),a("code",[s._v("defaultExpandAll")]),s._v(", "),a("code",[s._v("autoExpandParent")]),s._v(", "),a("code",[s._v("defaultCheckedKeys")]),s._v(", "),a("code",[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("p",[s._v("Element 1.0.0 released.")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n    Changelog\n  ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(48)}var n=a(13)(a(50),a(54),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(51),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){var v=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(52)},function(s,t,a){var l=a(13)(null,a(53),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"geng-xin-ri-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更新日志")]),a("h3",{attrs:{id:"1-3-0-beta-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-3-0-beta-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.3.0-beta.1")]),a("p",[a("em",[s._v("2017-04-28")])]),a("h4",{attrs:{id:"xin-te-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Transfer 组件")]),a("li",[s._v("新增 transition 的文档，现在用户可以使用内置 transition 了")]),a("li",[s._v("Slider 新增垂直模式，使用 "),a("code",[s._v("vertical")]),s._v(" 属性即可打开，#4410（by @devange）")]),a("li",[s._v("CheckboxGroup 新增按钮模式，#3697（by @mdartic）")]),a("li",[s._v("Table\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("setCurrentRow")]),s._v(" 方法，#4390")]),a("li",[s._v("新增表尾合计行的功能，提供 "),a("code",[s._v("show-summary")]),s._v("、"),a("code",[s._v("sum-text")]),s._v(" 和 "),a("code",[s._v("summary-method")]),s._v("，#4484")])])]),a("li",[s._v("Dialog 新增 "),a("code",[s._v("before-close")]),s._v(" 属性，#4432")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("disabled")]),s._v(" 属性，#4473")]),a("li",[a("code",[s._v("on-change")]),s._v(" 事件现在也会在添加文件后触发，#4447")])])]),a("li",[s._v("Switch 新增 "),a("code",[s._v("on-value")]),s._v(" 和 "),a("code",[s._v("off-value")]),s._v(" 属性，支持自定义两种状态的值，#4403")]),a("li",[s._v("DatePicker\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("default-value")]),s._v(" 属性，用于设定下拉框初次弹出时显示的日期，#4222（by @wacky6）")]),a("li",[s._v("支持动态改变 "),a("code",[s._v("type")]),s._v("，#4417（by @coffeedeveloper）")])])])]),a("h4",{attrs:{id:"xiu-fu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("Select 和 Table 的某些功能与 Vue 2.3.x 不兼容的问题，#4518")]),a("li",[s._v("DatePicker 的 "),a("code",[s._v("disabledDate")]),s._v(" 对手动在输入框中输入的值无效的问题，#4309")]),a("li",[s._v("Tree 的树节点 ID 为数字 0 时的一些问题，#4415")]),a("li",[s._v("TimePicker 在完成选择后数字不居中显示的问题，#4425（by @pengchongfu）")]),a("li",[s._v("Autocomplete 在输入中文时频繁触发搜索方法的问题，#4393（by @qazbnm456）")]),a("li",[s._v("Upload 不能选择同一个文件的问题，#4461")]),a("li",[s._v("嵌套在 FormItem 中的按钮样式的 RadioGroup 的样式问题，#4336")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新:")]),a("ul",[a("li",[s._v("最低兼容 Vue 2.3.0")])]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("修复在有文本选中的情况下，RadioButton 需要多次点击才能生效的问题，#4217")]),a("li",[s._v("修复 Tree 的多选框在某些浏览器下不能全选的问题，#4107（by @pengchongfu）")]),a("li",[s._v("修复可清空的 Cascader 清空按钮无效的问题，#4167（by @pengchongfu）")]),a("li",[s._v("修复带有 Tooltip 的 Table 在路由切换时有时会报错的问题，#4085")]),a("li",[s._v("修复 Upload 无法移除待上传的文件的问题，#4233")]),a("li",[s._v("新增 Notification 的 "),a("code",[s._v("onClick")]),s._v(" 属性，#4221（by @amouillard）")]),a("li",[s._v("修复 DatePicker 在清空后值变为 undefined 的问题，#4186（by @pengchongfu）")]),a("li",[s._v("修复 FormItem 中 ColorPicker 的样式错误，#4303")]),a("li",[s._v("新增 Tooltip 的 "),a("code",[s._v("enterable")]),s._v(" 属性，#4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("修复 Form 的 "),a("code",[s._v("resetFields")]),s._v(" 会给表单项重新赋值的问题，#3840（by @pengchongfu）")]),a("li",[s._v("新增 CheckboxGroup 的 "),a("code",[s._v("max")]),s._v(" 和 "),a("code",[s._v("min")]),s._v(" 属性，#3700（by @mdartic）")]),a("li",[s._v("修复 DatePicker 在一些特定的日期会导致月份 +1 的问题，#3935")]),a("li",[s._v("新增 Message 的 "),a("code",[s._v("closeAll")]),s._v(" 方法，#3966（by @pengchongfu）")]),a("li",[s._v("新增 Slider 的 "),a("code",[s._v("format-tooltip")]),s._v(" 属性，#3657（by @liyanlong）")]),a("li",[s._v("修复内嵌于 Dialog 中的 Table 的筛选面板被遮挡的问题，#4023（by @liyanlong）")]),a("li",[s._v("修复单选的 Select 在 Vue 2.2.x 下无法创建条目的问题，#3984")]),a("li",[s._v("修复某些断点下 "),a("code",[s._v("span")]),s._v(" 为 0 的 Row 在其他断点下也会消失的问题，#4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("修复 Select 不兼容 Vue 2.2.6 的问题，#3797")]),a("li",[s._v("优化 Table 的 Tooltip 渲染性能，#3478")]),a("li",[s._v("新增 Table "),a("code",[s._v("tooltip-effect")]),s._v(" 属性")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("修复 Switch 样式不兼容 vue SSR，#3752")]),a("li",[s._v("修复 TimePicker 日期计算错误，#3479")]),a("li",[s._v("修复 DatePicker 格式化 week 类型错误，#2774")]),a("li",[s._v("修复 DatePicker 周选择器默认值，#3058")]),a("li",[s._v("修复 Popover 销毁时未正确清除事件，#3555")]),a("li",[s._v("修复 InputNumber 鼠标左右键一起按下会导致值一直自增加，#3514（by @pengchongfu）")]),a("li",[s._v("修复 RadioButton 样式文件引入但无样式，#3276")]),a("li",[s._v("修复 Table 的 hover 样式，#3696（by @nicoeg）")]),a("li",[s._v("修复 Slider 跳动问题，#3664（by @gabrielboliveira）")]),a("li",[s._v("新增 Select "),a("code",[s._v("delete-tag")]),s._v(" 事件 #3663（by @pengchongfu）")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("onPick")]),s._v(" 选项，#2921")]),a("li",[s._v("新增 Steps 可分别设置 step 的状态（status）和样式调整，#3722")]),a("li",[s._v("新增完整的按需引入组件的文档，#3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("新增 Slider 的 "),a("code",[s._v("show-tooltip")]),s._v(" 属性，#3430（by @gabrielboliveira）")]),a("li",[s._v("修复动态改变 Slider "),a("code",[s._v("step")]),s._v(" 的精度时，其值的精度不随之改变的问题，#3475（by @gabrielboliveira）")]),a("li",[s._v("修复含有 Tooltip 的 Table 在当前窗口高度临界于出现滚动条时，弹出 Tooltip 会导致 Table 宽度抖动的问题，#3549")]),a("li",[s._v("修复 Table 在某些情况下高度自动往复变小的问题，#3539")]),a("li",[s._v("修复 Popover 中的弹出类组件在点击 Popover 的空白区域时不隐藏的问题，#3451（by @nicoeg）")]),a("li",[s._v("现在 "),a("code",[s._v("xs")]),s._v("、"),a("code",[s._v("sm")]),s._v("、"),a("code",[s._v("md")]),s._v("、"),a("code",[s._v("lg")]),s._v(" 值为 0 的 Col 会被正确隐藏，#3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("修复 Carousel 有时不响应数据动态更新的问题，#3159")]),a("li",[s._v("修复 Table 的 "),a("code",[s._v("cell-dblclick")]),s._v(" 事件无法触发的问题，#3305")]),a("li",[s._v("修复禁用的 Cascader 不显示默认值的问题，#3297")]),a("li",[s._v("修复 Slider 在 "),a("code",[s._v("show-input")]),s._v(" 时初始值不正确的问题，#3281")]),a("li",[s._v("修复 Tooltip 在服务端渲染时报错的问题，#3214")]),a("li",[s._v("修复 DatePicker 的 "),a("code",[s._v("range-separator")]),s._v(" 属性有时无效的问题，#3378")]),a("li",[s._v("新增指令式调用 Loading 时响应动态加载文案的功能，#3345（by @imyzf）")]),a("li",[s._v("新增 Upload 的 "),a("code",[s._v("http-request")]),s._v(" 参数，用于实现覆盖默认的上传行为，#3387")]),a("li",[s._v("新增 Col 支持将 "),a("code",[s._v("span")]),s._v(" 值设为 0 时隐藏该列的功能，#3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("修复 Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("修复若干组件与 Vue 2.2 不兼容的问题，#3002 #3067 #3097")]),a("li",[s._v("修复嵌套在 Dialog 内的 Cascader 下拉框有时出现在 Dialog 之后的问题，#3035")]),a("li",[s._v("修复 Cascader 的 "),a("code",[s._v("change")]),s._v(" 事件参数在某些情况下不正确的问题，#3014")]),a("li",[s._v("新增 ColorPicker 的 "),a("code",[s._v("change")]),s._v(" 事件，#3049（by @nicoeg）")]),a("li",[s._v("修复 Tree 的 "),a("code",[s._v("setCheckedKeys")]),s._v(" 方法对非叶子节点无效的问题，#2967（by @rainyLeo）")]),a("li",[s._v("修复 Tooltip 和 "),a("code",[s._v("router-link")]),s._v(" 共用报错的问题，#3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("修复用于 SSR 时报错的问题，#2982")]),a("li",[s._v("修复 Tabs 左右滚动按钮无法出现的问题，#2974")]),a("li",[s._v("修复 Table 在动态改变 "),a("code",[s._v("height")]),s._v(" 属性后高度计算错误的问题，#2979")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("cell-dblclick")]),s._v(" 和 "),a("code",[s._v("header-dragend")]),s._v(" 事件，#2983 #2988")]),a("li",[s._v("修复行内表单在指定 "),a("code",[s._v("label-width")]),s._v(" 时表单元素出现左边距的问题，#2990")]),a("li",[s._v("修复 Cascader 在某些情况下弹出框位置不正确的问题，#2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"xin-te-xing-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Cascader、ColorPicker 组件")]),a("li",[s._v("Tabs 新增 "),a("code",[s._v("editable")]),s._v(" 和 "),a("code",[s._v("addable")]),s._v(" 属性以及 "),a("code",[s._v("tab-add")]),s._v(" 和 "),a("code",[s._v("edit")]),s._v(" 事件")]),a("li",[s._v("新增 UMD 格式的语言包文件")]),a("li",[s._v("Tree 新增 "),a("code",[s._v("node-expand")]),s._v(" 和 "),a("code",[s._v("node-collapse")]),s._v(" 事件，#2507（by @masterzhang）")]),a("li",[s._v("Tree 新增 "),a("code",[s._v("indent")]),s._v(" 属性，#2713")]),a("li",[s._v("Dialog 的标题支持以具名 slot 的方式传入，#2657")]),a("li",[s._v("Slider 新增 "),a("code",[s._v("range")]),s._v(" 属性，支持范围选择，#2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("auto-upload")]),s._v(" 属性，用以控制是否在选择图片后自动上传，默认为开启")]),a("li",[s._v("新增 "),a("code",[s._v("on-change")]),s._v(" 钩子函数在文件状态改变时会调用")]),a("li",[s._v("新增 "),a("code",[s._v("list-type")]),s._v(" 设置文件列表展示外观")])])]),a("li",[s._v("Autocomplete 滚动条使用 el-scrollbar")])]),a("h4",{attrs:{id:"xiu-fu-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("Carousel 不响应内容动态更新的问题，#2775")]),a("li",[s._v("TimePicker 在某些情况下数字位置不居中的问题，#2948")]),a("li",[s._v("TimePicker 在某些情况下范围选择时仅响应偶数次点击的问题，#2884（by @k55k32）")]),a("li",[s._v("Tab 修复 tab-pane 动态显示时插入顺序问题, #2898")]),a("li",[s._v("Menu 修复将 "),a("code",[s._v("default-active")]),s._v(" 设置为不存在的 index 时 menu-item 还会高亮的问题")]),a("li",[s._v("Collapse 修复嵌套使用时的样式问题")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新:")]),a("ul",[a("li",[s._v("重构 Tooltip，不再生成额外的 HTML 标签，确保被 tooltip 包裹的组件的结构不变，#2459")]),a("li",[s._v("Dialog 的遮罩层现在默认插入至 body 元素上，#2556")]),a("li",[s._v("Tabs 现在内部不再维护 tab 实例，需要在外部通过相关事件去处理, #2567")]),a("li",[s._v("Upload 重构升级\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" 属性更名为 "),a("code",[s._v("file-list")]),s._v(", "),a("code",[s._v("show-upload-list")]),s._v(" 属性更名为 "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" 属性被移除")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("修复 MessageBox 的 "),a("code",[s._v("customClass")]),s._v(" 会影响后续实例的问题，#2472")]),a("li",[s._v("修复位于 Tabs 非默认激活页中的 Select 在激活后样式不正确的问题，#2466")]),a("li",[s._v("修复一些组件在单独引入时样式缺失的问题")]),a("li",[s._v("修复被禁用的可搜索多选 Select 点击特定区域仍能打开下拉框的问题，#2540")]),a("li",[s._v("修复 Table 排序支持返回原始顺序，#2491")]),a("li",[s._v("新增 "),a("code",[s._v("reset.css")]),s._v(" 在 "),a("code",[s._v("theme-default")]),s._v(" 内，#2378")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("range-separator")]),s._v(" 属性，#2579")]),a("li",[s._v("发布单独组件包：Table，DatePicker，Loading，Upload，Carousel")]),a("li",[s._v("新增芬兰语（@groenroos）")])]),a("h3",{
+attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("修复 Menu 在启用 router 模式下点击菜单跳转后没有激活对应菜单项的问题，#2451")]),a("li",[s._v("新增 Collapse "),a("code",[s._v("value")]),s._v(" 属性增加对 "),a("code",[s._v("Number")]),s._v(" 类型的支持，#2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("修复 Input Number 在主动改变绑定值时也会触发 change 事件的问题，#2329")]),a("li",[s._v("修复 Menu 在启用 router 模式后没有对 "),a("code",[s._v("$route")]),s._v(" 变化进行响应的问题，#2391")]),a("li",[s._v("修复 Menu、Tree 在快速点击时出现展开状态错误的问题，#2354")]),a("li",[s._v("修复 Input Number 和 Checkbox Group 的 change 事件触发时机，现在主动改变绑定值时不触发该事件。")]),a("li",[s._v("新增 Input 增加点击图标后的钩子函数属性，#2414")]),a("li",[s._v("新增 Radio Group 的 "),a("code",[s._v("disabled")]),s._v(" 属性，#2411")]),a("li",[s._v("新增 Tree 增加 "),a("code",[s._v("accordion")]),s._v(" 属性，#2408")]),a("li",[s._v("新增 Form 增加 "),a("code",[s._v("show-message")]),s._v(" 属性，#2356")]),a("li",[s._v("修复 Table 排序点击区域，调整默认排序的 API，#2309 #2405（by @njleonzhang）")]),a("li",[s._v("修复 DatePicker firstDayOfWeek 在范围类型中无法使用，#2353")]),a("li",[s._v("修复 DatePicker 初始值为 null 显示 1970，#2388")]),a("li",[s._v("修复 Table 缺少 filteredValue 属性，#2348")]),a("li",[s._v("修复 Table 空数据时且存在滚动条时的样式，#2396")]),a("li",[s._v("新增 MessageBox 的 "),a("code",[s._v("beforeClose")]),s._v(" 属性，#2204")]),a("li",[s._v("修复可过滤的 Select 点击三角图标不显示下拉框的问题，#2389")])]),a("p",[s._v("非兼容性更新")]),a("ul",[a("li",[s._v("1.1.3 新增的 "),a("code",[s._v("default-sort-prop")]),s._v(" 和 "),a("code",[s._v("default-sort-order")]),s._v(" 属性现在合并为一个对象类型属性")])]),a("h3",{attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("修复 DatePicker 页面加载后首次清空不会触发 "),a("code",[s._v("change")]),s._v(" 事件，#2167")]),a("li",[s._v("修复 DatePicker 选择下一年时，年份计算错误，#2152")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("default-sort-prop")]),s._v(" 和 "),a("code",[s._v("default-sort-order")]),s._v(" 属性，#2182（by @njleonzhang）")]),a("li",[s._v("修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196")]),a("li",[s._v("新增自定义 i18n 处理方法，方便和除了 "),a("code",[s._v("vue-i18n")]),s._v(" 之外的插件使用，#2129")]),a("li",[s._v("新增 Input "),a("code",[s._v("resize")]),s._v(" 属性，#2263（by @Kingwl）")]),a("li",[s._v("修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247")]),a("li",[s._v("修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl）")]),a("li",[s._v("修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("修复 Vue 2.1.7 升级导致的 Table "),a("code",[s._v("sortable")]),s._v(" 和 "),a("code",[s._v("fixed")]),s._v(" 无法使用的问题")]),a("li",[s._v("修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098")]),a("li",[s._v("移除 Collapse 的 "),a("code",[s._v("title")]),s._v(" scoped slot, 并新增 "),a("code",[s._v("title")]),s._v(" named slot，#2100")]),a("li",[s._v("修复 TimePicker 范围选择无法使用的问题")]),a("li",[s._v("修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106")]),a("li",[s._v("修复 Select 在使用方向键导航时控制台报错的问题，#2120")]),a("li",[s._v("修复 Form 中可搜索的 Select 验证时机错误的问题，#2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("修复由于编译而出现的不兼容新版 Vue 的问题")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"xin-te-xing-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Carousel、Collapse 组件")]),a("li",[s._v("支持 SSR")]),a("li",[s._v("组件内的滚动条样式优化")]),a("li",[s._v("Table 支持通过 "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped Slots")]),s._v(" 传入模板；原来的 "),a("code",[s._v("inline-template")]),s._v(" 仍然兼容，但是不再推荐使用，未来可能会被移除")]),a("li",[s._v("Table 支持展开行功能(Expandable rows)")]),a("li",[s._v("DatePicker 支持指定周起始日(first day of week)")]),a("li",[s._v("TimeSelect 支持设置 "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete 新增 "),a("code",[s._v("popper-class")]),s._v("属性")]),a("li",[s._v("Tab-Pane 新增 name 为 label 的具名 "),a("code",[s._v("slot")]),s._v("，用于实现自定义标签内容")])]),a("h4",{attrs:{id:"xiu-fu-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("DatePicker 的 "),a("code",[s._v("change")]),s._v(" 事件错误地触发多次的问题，#2070")]),a("li",[s._v("Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新：")]),a("ul",[a("li",[s._v("最低兼容 Vue 2.1.6")]),a("li",[s._v("Form validateField() 方法回调的参数更新")]),a("li",[s._v("Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入")]),a("li",[s._v("Input 和 Select 盒模型从 "),a("code",[s._v("block")]),s._v(" 修改为 "),a("code",[s._v("inline-block")])]),a("li",[s._v("Tabs 盒模型从 "),a("code",[s._v("inline-block")]),s._v(" 修改为 "),a("code",[s._v("block")]),s._v("，Tab-Pane 移除 "),a("code",[s._v("label-content")]),s._v(" 属性")]),a("li",[s._v("Autocomplete 下拉列表现在直接插入到 "),a("code",[s._v("<body>")]),s._v(" 标签下，而不是 "),a("code",[s._v("<el-autocomplete>")]),s._v(" 下")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834")]),a("li",[s._v("修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("change")]),s._v(" 事件，返回和输入框一致的格式化后的值，#1841")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("header-align")]),s._v(" 属性，#1424")]),a("li",[s._v("修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890")]),a("li",[s._v("修复可搜索的 Select 在选项较多时的卡顿问题，#1933")]),a("li",[s._v("修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001")]),a("li",[s._v("修复 Col "),a("code",[s._v("xs")]),s._v(" 分辨率下样式无效的问题，#2011")]),a("li",[s._v("新增 Tab 组件的 "),a("code",[s._v("value")]),s._v(" 属性并支持 "),a("code",[s._v("v-model")]),s._v(" 用法，#2008")]),a("li",[s._v("修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("clearable")]),s._v(" 属性，#1994")]),a("li",[s._v("修复 Form 异步验证时某些条件下总是验证通过的问题，#1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("修复 Popup 在叠加使用时阻止事件冒泡，#1677")]),a("li",[s._v("修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758")]),a("li",[s._v("修复 Slider 的 "),a("code",[s._v("change")]),s._v(" 事件不能正确触发的问题，#1809")]),a("li",[s._v("修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786")]),a("li",[s._v("新增 Select 的 "),a("code",[s._v("loading-text")]),s._v("、"),a("code",[s._v("no-data-text")]),s._v("、"),a("code",[s._v("no-match-text")]),s._v(" 属性和 "),a("code",[s._v("visible-change")]),s._v(" 事件，#1849")]),a("li",[s._v("新增 DatePicker、Select 和 Tooltip 的 "),a("code",[s._v("popper-class")]),s._v(" 属性，#1806")]),a("li",[s._v("新增 Tree 的 "),a("code",[s._v("expand-on-click-node")]),s._v("、"),a("code",[s._v("current-node-key")]),s._v(" 属性和 "),a("code",[s._v("current-change")]),s._v(" 事件，#1805 #1807")]),a("li",[s._v("新增 Table "),a("code",[s._v("row-click")]),s._v(" 事件的第三个参数 "),a("code",[s._v("column")]),s._v("，#1808")]),a("li",[s._v("修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860")]),a("li",[s._v("新增 TabPanel "),a("code",[s._v("label-content")]),s._v(" 渲染钩子方法中增加 tab 实例的参数，#1857")]),a("li",[s._v("新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851")]),a("li",[s._v("新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818")]),a("li",[s._v("新增 Progress 的 "),a("code",[s._v("onProgress")]),s._v(" 钩子函数，#1782")]),a("li",[s._v("修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("filter-change")]),s._v(" 事件和 TableColumn 的 "),a("code",[s._v("column-key")]),s._v(" 属性，#1876")]),a("li",[s._v("新增 Dropdown "),a("code",[s._v("hide-on-click")]),s._v(" 属性，#1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框")]),a("li",[s._v("修复 DatePicker 设置默认值为 null 会错误地显示时间值")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("row-contextmenu")]),s._v(" 事件和 "),a("code",[s._v("max-height")]),s._v(" 属性，#1663 #1674")]),a("li",[s._v("新增 MessageBox 的 "),a("code",[s._v("customClass")]),s._v(" 属性，#1707")]),a("li",[s._v("新增 Message 和 Notification 的 "),a("code",[s._v("iconClass")]),s._v(" 和 "),a("code",[s._v("customClass")]),s._v(" 属性，#1671")]),a("li",[s._v("新增 Table 支持 empty slot，#1737")]),a("li",[s._v("改进 InputNumber change 事件增加 old value 的参数")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("新增 Tabs 组件的 "),a("code",[s._v("disabled")]),s._v(" 属性，#1620")]),a("li",[s._v("新增 DatePicker 的 input 支持 "),a("code",[s._v("size")]),s._v("，#1440")]),a("li",[s._v("修复 DatePicker 为 "),a("code",[s._v("datetimerange")]),s._v(" 类型并设置初始值时，面板未显示正确日期的问题，#1129")]),a("li",[s._v("修复 DatePicker 切换年份时显示异常的问题，#1607")]),a("li",[s._v("修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604")]),a("li",[s._v("修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583")]),a("li",[s._v("修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593")]),a("li",[s._v("修复 Select 为 "),a("code",[s._v("disabled")]),s._v(" 时，"),a("code",[s._v("clearable")]),s._v(" 仍然可以工作的问题，#1619")]),a("li",[s._v("修复 自定义背景颜色的 Switch 在动态切换 "),a("code",[s._v("disabled")]),s._v(" 时，背景颜色错误的问题，#1627")]),a("li",[s._v("修复 Table 的一些样式问题")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537")]),a("li",[s._v("修复 Select 的初始值为一个空对象时会报错的问题，#1533")]),a("li",[s._v("修复 Select 远程搜索有时不显示下拉框的问题，#1531")]),a("li",[s._v("修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546")]),a("li",[s._v("修复 IE9 下 Steps 的样式问题，#1543")]),a("li",[s._v("新增 Upload 对所有文件类型生成 URL 的功能，#1530")]),a("li",[s._v("修复 TimeSelect 的样式，移除 flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("新增 Input Number 的 "),a("code",[s._v("controls")]),s._v(" 属性，#1473")]),a("li",[s._v("修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514")]),a("li",[s._v("增加 Notification 的 "),a("code",[s._v("offset")]),s._v(" 属性，#1419")]),a("li",[s._v("修复 Slider 在快速拖动时取值不准确的问题，#1458")]),a("li",[s._v("修复 Slider 在某些情况下绑定值为多位小数的问题，#1450")]),a("li",[s._v("修复 Select 在某些情况下绑定值和显示值不同步的问题")]),a("li",[s._v("新增 Select 的 "),a("code",[s._v("multiple-limit")]),s._v(" 和 "),a("code",[s._v("allow-create")]),s._v(" 属性")]),a("li",[s._v("修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438")]),a("li",[s._v("修复 Tree 有时在获取子级数据后视图不更新的问题，#1439")]),a("li",[s._v("修复 Table 在 windows 系统下的若干样式问题，#1464 #1507")]),a("li",[s._v("修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("row-dblclick")]),s._v(" 事件，#1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("修复 Pagination 的 "),a("code",[s._v("currentPage")]),s._v(" 在某些情况下设置无效的情况，#1336")]),a("li",[s._v("修复 DatePicker 为 "),a("code",[s._v("month")]),s._v(" 且设置了 "),a("code",[s._v("disabledDate")]),s._v(" 的情况下切换年份时界面未更新的问题，#1158")]),a("li",[s._v("修复 DatePicker readonly 时未禁用清除按钮的问题，#1238")]),a("li",[s._v("修复 Slider 绑定值为 "),a("code",[s._v("NaN")]),s._v(" 以及 "),a("code",[s._v("step")]),s._v(" 小于 1 时无法正常工作的问题，#1239 #1282")]),a("li",[s._v("增加 Table 的多表头功能，#1312")]),a("li",[s._v("增加 Table 的 "),a("code",[s._v("rowStyle")]),s._v(" 属性，#1348")]),a("li",[s._v("修复 TableColumn 的某些属性无法动态设置的问题，#1314")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("filter-node-method")]),s._v(" 属性和 "),a("code",[s._v("filter")]),s._v(" 方法，#1257")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("getCheckedKeys")]),s._v(" 和 "),a("code",[s._v("setCheckedKeys")]),s._v(" 方法，#1254")]),a("li",[s._v("重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152")]),a("li",[s._v("修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359")]),a("li",[s._v("增加 Form 中深对象验证的支持，#1363")]),a("li",[s._v("增加 Autocomplete 里的 "),a("code",[s._v("append")]),s._v(" 和 "),a("code",[s._v("prepend")]),s._v(" API，#1369")]),a("li",[s._v("增加 Pagination "),a("code",[s._v("pageSizes")]),s._v(" 属性的动态支持，#1372")]),a("li",[s._v("增加 Radio Button 自定义选中按钮样式的 API，#1380")]),a("li",[s._v("增加 Menu Group 支持通过 slot 来设置 title，#1382")]),a("li",[s._v("修复 DatePicker 选择年的 bug，#1385")]),a("li",[s._v("新增 Upload 默认已上传的文件列表 API，#1393")]),a("li",[s._v("增加 Checkbox "),a("code",[s._v("label")]),s._v(" 属性绑定的多类型支持，#1400")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("setChecked")]),s._v(" 方法，#1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("新增 Table "),a("code",[s._v("context")]),s._v(" 属性，可以指定自定义 column 内部可获取的上下文，#1161")]),a("li",[s._v("新增 多种语言支持")]),a("li",[s._v("修复 没有正确动态渲染语言的问题，#1160")]),a("li",[s._v("新增 Alert 的 "),a("code",[s._v("render-content")]),s._v(" 属性，#568")]),a("li",[s._v("新增 Button 的 focus 样式，#982")]),a("li",[s._v("修复 Switch 的 "),a("code",[s._v("change")]),s._v(" 事件触发时机错误的问题，#1162")]),a("li",[s._v("修复 TimeSelect 开始时间设置 "),a("code",[s._v("00:00")]),s._v(" 后会被禁用的问题，#676")]),a("li",[s._v("新增 Table "),a("code",[s._v("show-header")]),s._v(" 属性，"),a("code",[s._v("header-click")]),s._v(" 事件。#1195")]),a("li",[s._v("完善 Table 的 "),a("code",[s._v("height")]),s._v(" 属性，当 "),a("code",[s._v("height")]),s._v(" 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195")]),a("li",[s._v("修复 Table 的 "),a("code",[s._v("selection-change")]),s._v(" 在某些情况下不触发的问题，#1198")]),a("li",[s._v("修复 Table 动态修改 "),a("code",[s._v("fixed")]),s._v(" 属性可能会造成锁定列不消失的问题，#1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("修复 Pagination 错误地多次触发 "),a("code",[s._v("current-change")]),s._v(" 事件的问题")]),a("li",[s._v("修复 Switch 在 Form 中的样式错误，#967")]),a("li",[s._v("修复 Loading 在某些情况下错误地锁定 "),a("code",[s._v("body")]),s._v(" 滚动的问题，#968")]),a("li",[s._v("Col 组件的 "),a("code",[s._v("span")]),s._v(" 属性不再是必填属性，在省略的情况下其默认值为 "),a("code",[s._v("24")])]),a("li",[s._v("新增 DatePicker "),a("code",[s._v("disabled")]),s._v(" 和 "),a("code",[s._v("editable")]),s._v(" 属性，#976")]),a("li",[s._v("修复 DatePicker 的 "),a("code",[s._v("readonly")]),s._v(" 与原生行为一致，现在通过设置 editable=false 禁止输入但是可通过弹框选日期，#976")]),a("li",[s._v("新增 Message 和 Notification 的 "),a("code",[s._v("close")]),s._v(" 方法，用于手动关闭实例")]),a("li",[s._v("新增 DatePicker 清除功能，#759")]),a("li",[s._v("修复 Form 重置日期报错，#937")]),a("li",[s._v("修复 Tab 设置active-name不是首个tab时的样式问题，#1034")]),a("li",[s._v("修复 Table 的 inline-template 在 vue-loader 9.9.0 渲染报错")]),a("li",[s._v("新增 Step 支持内容居中对齐，#994")]),a("li",[s._v("修复 Upload 单独引入时提示 Progress 组件不存在，#1013")]),a("li",[s._v("Layout 支持响应式布局")]),a("li",[s._v("新增 Dialog "),a("code",[s._v("show-close")]),s._v(" 属性")]),a("li",[s._v("修复 和 "),a("code",[s._v("vue-i18n")]),s._v(" 一起使用时，未初始化 i18n 会报错，#973")]),a("li",[s._v("修复 DatePicker 设置初始值后界面未更新 #1050")]),a("li",[s._v("修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070")]),a("li",[s._v("新增 $loading 服务，用以调用 Loading")]),a("li",[s._v("新增 Popover 可手动控制显示隐藏，将 trigger 设置为 "),a("code",[s._v("manual")])]),a("li",[s._v("新增 Tree 的 "),a("code",[s._v("nodeKey")]),s._v("、"),a("code",[s._v("emptyText")]),s._v("、"),a("code",[s._v("checkStrictly")]),s._v("、"),a("code",[s._v("defaultExpandAll")]),s._v("、"),a("code",[s._v("autoExpandParent")]),s._v("、"),a("code",[s._v("defaultCheckedKeys")]),s._v("、"),a("code",[s._v("defaultExpandedKeys")]),s._v(" 属性，"),a("code",[s._v("setCheckedNodes")]),s._v(" 方法。")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("ul",[a("li",[s._v("修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894")]),a("li",[s._v("修复结合 "),a("code",[s._v("vue-i18n")]),s._v(" 使用时会提示不能覆盖 "),a("code",[s._v("$t")]),s._v(" 方法的问题")]),a("li",[s._v("新增 Loading 自定义加载文案的功能，并优化了视觉表现")]),a("li",[s._v("修复 Input blur 事件的参数不是 event 对象的问题")]),a("li",[a("code",[s._v("window.ELEMENT.locale.use")]),s._v(" 改成 "),a("code",[s._v("window.ELEMENT.locale")])])]),a("h3",{attrs:{id:"1-0-0-rc-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.9")]),a("p",[a("em",[s._v("2016-11-07")])]),a("ul",[a("li",[s._v("新增 MessageBox 确定按钮自动获取焦点, #721")]),a("li",[s._v("修复 Popover focus 失效, #734")]),a("li",[s._v("修复 Clickoutside 报错, #729")]),a("li",[s._v("修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错")]),a("li",[s._v("更新 TimePicker 滚动条在 IE10+ 下隐藏")]),a("li",[s._v("新增 Dropdown 的 command api #432")]),a("li",[s._v("修复 Slider 在 Form 中的显示问题")]),a("li",[s._v("修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题")]),a("li",[s._v("改善 tabs 现在支持动态更新")]),a("li",[s._v("Table 新增 highlightCurrentRow 属性、新增 current-change 事件")]),a("li",[s._v("TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）")]),a("li",[s._v("TableColumn 新增属性 render-header")]),a("li",[s._v("Pagination 新增属性 pageCount")]),a("li",[s._v("DatePicker 修复重置 value 后默认选中日期没有重置, #878")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)")])]),a("h3",{attrs:{id:"1-0-0-rc-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.8")]),a("p",[a("em",[s._v("2016-10-28")])]),a("ul",[a("li",[s._v("修复 Form reset method 对日期控件不起效的问题")]),a("li",[s._v("修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误")]),a("li",[s._v("修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题")]),a("li",[s._v("修复 Autocomplete 的弹出框不会消失 #439")]),a("li",[s._v("新增 Input 图标的点击事件 #444")]),a("li",[s._v("修复 Loading 关闭后有几率滚动失效的问题")]),a("li",[s._v("修复 远程搜索的 Select 不能正确渲染默认初始值的问题")]),a("li",[s._v("修复 Switch 的 width 属性无效的问题")]),a("li",[s._v("Table 增加 rowClassName 属性")]),a("li",[s._v("TableColumn 增加 fixed 属性，可选值：true, false, left, right")]),a("li",[s._v("TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue")]),a("li",[s._v('TableColumn[type="selection"] 增加 selectable 属性')]),a("li",[s._v("修复 Input textarea 在动态赋值时 autosize 没有触发的问题")]),a("li",[s._v("修复 Input Number min max 属性设置后点击加减出现的崩溃的bug")]),a("li",[s._v("优化 TimePicker/DatePicker 输入日期行为")]),a("li",[s._v("修复 DatePicker 输入禁用状态的日期却生效的问题 #484")]),a("li",[s._v("新增 Slider 的 disabled 属性")]),a("li",[s._v("新增 Menu 的 menu-trigger 属性")]),a("li",[s._v("新增 i18n 的支持")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例")]),a("li",[s._v("全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 "),a("code",[s._v("lock")]),s._v(" 修饰符")]),a("li",[s._v("Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode")]),a("li",[s._v("Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。")]),a("li",[s._v("Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change")])]),a("h3",{attrs:{id:"1-0-0-rc-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.7")]),a("p",[a("em",[s._v("2016-10-13")])]),a("ul",[a("li",[s._v("Upload 新增 Data 属性支持额外数据的传输")]),a("li",[s._v("DatePicker 修复 "),a("code",[s._v("$t")]),s._v(" 报错")]),a("li",[s._v("Popper 重构 vue-popper")]),a("li",[s._v("Pagination 修复输入后再点击切换，输入框的值不更新")]),a("li",[s._v("Step: 修复自定义 icon 的样式")]),a("li",[s._v("修复 Tree 组件 checkbox 点击失效的问题")]),a("li",[s._v("Breadcrumb 增加路由跳转的功能")]),a("li",[s._v("修复 可清空的 Select 中清空按钮的不恰当动画")]),a("li",[s._v("DatePicker 修复使用 Tab 键切换时弹出框未隐藏")])]),a("h3",{attrs:{id:"1-0-0-rc-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.6")]),a("p",[a("em",[s._v("2016-10-11")])]),a("ul",[a("li",[s._v("修复 Tabs 切换后 Tab-panel 被销毁的问题")]),a("li",[s._v("修复 TimePicker 错误的隐藏面板")]),a("li",[s._v("修复 Table Cell 的样式, #204")]),a("li",[s._v("修复 Menu default-active 属性不能为空的问题, #200")]),a("li",[s._v("修复 Menu unique-opened 开启后无法展开子菜单的问题, #200")]),a("li",[s._v("为 Notification 和 Message 的不同 type 添加独立的调用方法")]),a("li",[s._v("为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定")]),a("li",[s._v("新增 Input textarea 类型的 rows, autosize 属性")]),a("li",[s._v("为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调")]),a("li",[s._v("新增 DatePicker 禁用日期功能 #253")]),a("li",[s._v("修复 多选可搜索的 Select 下拉选项自动展开的问题")]),a("li",[s._v("为 Dialog 添加 top 属性")]),a("li",[s._v("修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295")]),a("li",[s._v("Checkbox change 事件现在只能被人为的交互操作所触发")]),a("li",[s._v("新增 Checkbox checked 属性")]),a("li",[s._v("修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式")])]),a("h3",{attrs:{id:"1-0-0-rc-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.5")]),a("p",[a("em",[s._v("2016-09-30")])]),a("ul",[a("li",[s._v("修复 Table 头部不同步的问题")]),a("li",[s._v("修复 Menu 组件 default-active 绑定动态值无法更新的问题")]),a("li",[s._v("新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单")]),a("li",[s._v("修复 vue-popper 引入 popper 路径错误")]),a("li",[s._v("修复 DatePicker 初始值是合法时间类型但无法设置成功的问题")]),a("li",[s._v("修复 Pagination 的图标没有正确切换样式, #163")]),a("li",[s._v("修复 Row 组件 align 属性不生效的问题")]),a("li",[s._v("修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题")]),a("li",[s._v("新增 Menu 组件中 MenuItem 的 route 属性")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Menu 组件的 "),a("code",[s._v("unique-opend")]),s._v(" 属性修正为 "),a("code",[s._v("unique-opened")])])]),a("h3",{attrs:{id:"1-0-0-rc-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.4")]),a("p",[a("em",[s._v("2016-09-21")])]),a("ul",[a("li",[s._v("修复 Select 多选时选项变为空数组后 placeholder 不出现的问题")]),a("li",[s._v("修复 Time Picker 时间选择可滚动")]),a("li",[s._v("修复 Tooltip 有时会错位的问题")]),a("li",[s._v("修复 丢失的组件 css 文件")]),a("li",[s._v("修复 Table 在 Safari 下边框没对齐")]),a("li",[s._v("修复 TimePicker 图标样式被默认图标样式覆盖")]),a("li",[s._v("修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题")]),a("li",[s._v("修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题")]),a("li",[s._v("修复 Table 初次渲染时宽度重新计算 #78")]),a("li",[s._v("新增 时间、日期选择器增加 align 属性，可设置对齐方式")]),a("li",[s._v("新增 TableColumn 的 align 属性")]),a("li",[s._v("新增 autocomplete 的 select 事件")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Select 组件样式的 "),a("code",[s._v("display")]),s._v(" 属性默认值修改为 "),a("code",[s._v("block")])])]),a("h3",{attrs:{id:"1-0-0-rc-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.3")]),a("p",[a("em",[s._v("2016-09-09")])]),a("ul",[a("li",[s._v("修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题")]),a("li",[s._v("修复 Steps 样式")]),a("li",[s._v("修复 无法安装的问题")])]),a("h3",{attrs:{id:"1-0-0-rc-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.2")]),a("p",[a("em",[s._v("2016-09-09")])]),a("ul",[a("li",[s._v("修复 Upload 上传的问题，并增加上传成功和失败的钩子函数")]),a("li",[s._v("Button 组件增加 "),a("code",[s._v("nativeType")]),s._v(" 属性，用于组件内 "),a("code",[s._v("<button>")]),s._v(" 标签的原生 "),a("code",[s._v("type")]),s._v(" 属性，默认值为 "),a("code",[s._v("button")])]),a("li",[s._v("修复 Table 自定义模板中渲染静态数据错误")]),a("li",[s._v("修复 Table 中被固定列的高度不与其他列的高度协调的问题")]),a("li",[s._v("修复 Time Picker 的 "),a("code",[s._v("picker-options")]),s._v(" 属性")]),a("li",[s._v("修复一些组件图标丢失的问题")]),a("li",[s._v("修复 远程搜索的 Select 在 Form 中的显示问题")]),a("li",[s._v("修复 Input Number 输入小数和非数字值时的问题")]),a("li",[s._v("修复 Select 选中 value 为 0 的值时绑定值不更新的问题")]),a("li",[s._v("修复 Tree 取消选择某节点后，其同级节点均被取消的问题")]),a("li",[s._v("修复 Upload 的 headers 属性设置无效")]),a("li",[s._v("修复 Pagination 包含 sizes 子组件时 page-size 无效的问题")]),a("li",[s._v("优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Menu 组件 "),a("code",[s._v("mode")]),s._v(" 属性默认值修改为 "),a("code",[s._v("vertical")])]),a("li",[s._v("Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档")]),a("li",[s._v("Popover 现在可以通过 slot 指定 reference")])]),a("h3",{attrs:{id:"1-0-0-rc-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.1")]),a("p",[a("em",[s._v("2016-08-30")])]),a("p",[s._v("Element 1.0.0-rc.1 发布")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n    更新日志\n  ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/alert.md":56,"./en-US/badge.md":60,"./en-US/breadcrumb.md":65,"./en-US/button.md":68,"./en-US/card.md":73,"./en-US/carousel.md":81,"./en-US/cascader.md":85,"./en-US/checkbox.md":89,"./en-US/collapse.md":93,"./en-US/color-picker.md":97,"./en-US/color.md":101,"./en-US/custom-theme.md":104,"./en-US/date-picker.md":107,"./en-US/datetime-picker.md":111,"./en-US/dialog.md":115,"./en-US/dropdown.md":119,"./en-US/form.md":123,"./en-US/home.md":129,"./en-US/i18n.md":134,"./en-US/icon.md":137,"./en-US/input-number.md":142,"./en-US/input.md":146,"./en-US/installation.md":152,"./en-US/layout.md":155,"./en-US/loading.md":158,"./en-US/menu.md":162,"./en-US/message-box.md":166,"./en-US/message.md":170,"./en-US/notification.md":174,"./en-US/pagination.md":178,"./en-US/popover.md":182,"./en-US/progress.md":186,"./en-US/quickstart.md":189,"./en-US/radio.md":192,"./en-US/rate.md":196,"./en-US/select.md":200,"./en-US/slider.md":204,"./en-US/steps.md":208,"./en-US/switch.md":212,"./en-US/table.md":216,"./en-US/tabs.md":220,"./en-US/tag.md":224,"./en-US/time-picker.md":228,"./en-US/tooltip.md":232,"./en-US/transfer.md":238,"./en-US/transition.md":242,"./en-US/tree.md":246,"./en-US/typography.md":250,"./en-US/upload.md":253,"./zh-CN/alert.md":257,"./zh-CN/badge.md":263,"./zh-CN/breadcrumb.md":270,"./zh-CN/button.md":273,"./zh-CN/card.md":279,"./zh-CN/carousel.md":285,"./zh-CN/cascader.md":291,"./zh-CN/checkbox.md":297,"./zh-CN/collapse.md":303,"./zh-CN/color-picker.md":309,"./zh-CN/color.md":315,"./zh-CN/custom-theme.md":320,"./zh-CN/date-picker.md":323,"./zh-CN/datetime-picker.md":329,"./zh-CN/dialog.md":335,"./zh-CN/dropdown.md":341,"./zh-CN/form.md":347,"./zh-CN/home.md":353,"./zh-CN/i18n.md":357,"./zh-CN/icon.md":362,"./zh-CN/input-number.md":368,"./zh-CN/input.md":374,"./zh-CN/installation.md":380,"./zh-CN/layout.md":383,"./zh-CN/loading.md":388,"./zh-CN/menu.md":394,"./zh-CN/message-box.md":400,"./zh-CN/message.md":404,"./zh-CN/notification.md":408,"./zh-CN/pagination.md":412,"./zh-CN/popover.md":418,"./zh-CN/progress.md":424,"./zh-CN/quickstart.md":429,"./zh-CN/radio.md":432,"./zh-CN/rate.md":436,"./zh-CN/select.md":442,"./zh-CN/slider.md":448,"./zh-CN/steps.md":454,"./zh-CN/switch.md":458,"./zh-CN/table.md":464,"./zh-CN/tabs.md":470,"./zh-CN/tag.md":474,"./zh-CN/time-picker.md":480,"./zh-CN/tooltip.md":486,"./zh-CN/transfer.md":492,"./zh-CN/transition.md":498,"./zh-CN/tree.md":504,"./zh-CN/typography.md":510,"./zh-CN/upload.md":515};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=55},function(s,t,a){s.exports=a(57)},function(s,t,a){var l=a(13)(a(58),a(59),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{
+staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("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() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"unclosable alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"customized close-text"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"alert with callback"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      hello() {\n        alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Description includes a message with more detailed information.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"with description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"This is a description."')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(61)},function(s,t,a){function l(s){a(62)}var n=a(13)(null,a(64),l,"data-v-01b04186",null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      comments\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      replies\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      comments\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      replies\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(66)},function(s,t,a){var l=a(13)(null,a(67),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",[s._v("to")]),s._v(" of "),a("code",[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(69)},function(s,t,a){var l=a(13)(a(70),a(72),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={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"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("Default Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text"}},[s._v("Text Button")])],1),a("p",[s._v("Button provides 7 themes defined by the "),a("code",[s._v("type")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Different colors represent different meanings.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hover to display color")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("Success")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("Info")])],1)])]),a("p",[s._v("Use "),a("code",[s._v("plain")]),s._v(" attribute to create a plain button, and it accepts a "),a("code",[s._v("Boolean")]),s._v(" value. You can assign different "),a("code",[s._v("type")]),s._v(" to a plain button as mentioned above. "),a("strong",[s._v("Note")]),s._v(": When using the plain button, you still can set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("text")]),s._v(", but it makes no difference. A plain button will be styled like a "),a("code",[s._v("text button")]),s._v(" by default.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hover to display color"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),a("code",[s._v("<i>")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("<el-button-group>")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">Loading</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("Large Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("Small Button")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("Mini Button")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("Large Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Small Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("Mini Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("disableds")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"color-indication"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-indication","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color Indication")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary/success/warning/danger/info/text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("button icon, accepts an icon name of Element icon component")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button/submit/reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(74)},function(s,t,a){function l(s){a(75)}var n=a(13)(a(77),a(79),l,"data-v-10f2e1a8",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(78),e=l(n);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("Integrate information in a card container.")]),s._m(1),l("p",[s._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",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("Card name")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("Operation button")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("List item "+t)+"\n  ")])})],2)],1),l("p",[s._v("Card is made up of "),l("code",[s._v("header")]),s._v(" and "),l("code",[s._v("body")]),s._v(". "),l("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("Card name"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Operation button"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._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",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("List item "+t)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._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() {\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",slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{key:t,attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(80)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("The "),l("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),l("code",[s._v("body")]),s._v(". This example also uses "),l("code",[s._v("el-col")]),s._v(" for layout.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},function(s,t,a){s.exports=a(82)},function(s,t,a){var l=a(13)(a(83),a(84),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._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",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{
+staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._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",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",[s._v("name")]),s._v(" of corresponding "),a("code",[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(86)},function(s,t,a){var l=a(13)(a(87),a(88),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("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() {\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(value) {\n        console.log(value);\n      }\n    }\n  };\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("Assigning the "),a("code",[s._v("options")]),s._v(" attribute to an array of options renders a Cascader. The "),a("code",[s._v("expand-trigger")]),s._v(" attribute defines how child options are expanded. This example also demonstrates the "),a("code",[s._v("change")]),s._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n  export default {\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("In this example, the first item in "),a("code",[s._v("options")]),s._v(" array has a "),a("code",[s._v("disabled: true")]),s._v(" field, so it is disabled. By default, Cascader checks the "),a("code",[s._v("disabled")]),s._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 "),a("code",[s._v("props")]),s._v(" attribute (see the API table below for details). And of course, field name "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("children")]),s._v(" can also be customized in the same way.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("The "),a("code",[s._v("show-all-levels")]),s._v(" attribute defines if all levels are displayed. If it is "),a("code",[s._v("false")]),s._v(", only the last level is displayed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Parent options can also be selected.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("By default only the options in the last level can be selected. By assigning "),a("code",[s._v("change-on-select")]),s._v(" to "),a("code",[s._v("true")]),s._v(", options in parent levels can also be selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Load child options when their parent option is clicked or hovered over.")]),a("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() {\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(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("In this example, the options array does not have data of cities when initialized. With the "),a("code",[s._v("active-item-change")]),s._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),a("code",[s._v("props")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n        }\n      };\n    },\n    \n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleItemChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v("\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Orlando'")]),s._v("\n            }];\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Search and select options with a keyword.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-cascader")]),s._v(" enables filtering")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"display-only-the-last-level"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[s._v("¶")]),s._v(" Display only the last level")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" With default value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dynamically-load-child-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dynamically load child options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("data of the options")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("selected value")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Cascader's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("input placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Cascader is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether selected value can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("trigger mode of expanding current item")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("whether to display all levels of the selected value in the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether the options can be searched")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing filter keyword, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of option object is used as the option's child options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of option object indicates if the option is disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("triggers when active option changes, only works when "),a("code",[s._v("change-on-select")]),s._v(" is "),a("code",[s._v("false")])]),a("td",[s._v("an array of active options")])])])])}]}},function(s,t,a){s.exports=a(90)},function(s,t,a){var l=a(13)(a(91),a(92),null,null,null);s.exports=l.exports},function(s,t){"use strict";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){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t<this.cities.length}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A group of options for multiple choices.")]),s._m(1),a("p",[s._v("Checkbox can be used alone to switch between two states.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <!-- `checked` should be true or false -->\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",slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected. Content inside the "),a("code",[s._v("el-checkbox")]),s._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` should be true or false -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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",slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("Option")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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",slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},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",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option B"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'Option A'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._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  const 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(event) {\n        this.checkedCities = event.target.checked ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let 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",slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Check all"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n        "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckAllChange(event) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      handleCheckedCitiesChange(value) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._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  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['Shanghai'],\n        checkboxGroup2: ['Beijing'],\n        checkboxGroup3: ['Guangzhou'],\n        cities: cityOptions\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"Shenzhen"===t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"large",fill:"#324057","text-color":"#a4aebd",min:1,max:3},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("p",[s._v("You just need to change "),a("code",[s._v("<el-checkbox>")]),s._v(" element into "),a("code",[s._v("<el-checkbox-button>")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === 'Shenzhen'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("fill")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#324057"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#a4aebd"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("min")]),s._v(" and "),a("code",[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",[s._v("checkbox-group")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("if the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of checkbox buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("Event object")])])])])}]}},function(s,t,a){s.exports=a(94)},function(s,t,a){var l=a(13)(a(95),a(96),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("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() {\n      return {\n        activeNames: ['1']\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{
+staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("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() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{attrs:{name:"1"}},[a("template",{slot:"title"},[s._v("\n      Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n      Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",[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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(98)},function(s,t,a){var l=a(13)(a(99),a(100),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("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() {\n      return {\n        color1: '#20a0ff',\n        color2: null\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])])])])}]}},function(s,t,a){s.exports=a(102)},function(s,t,a){var l=a(13)(null,a(103),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}]}},function(s,t,a){s.exports=a(105)},function(s,t,a){var l=a(13)(null,a(106),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._v("Element 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.")]),a("h2",{attrs:{id:"changing-theme-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),a("p",[s._v("If you just want to change the theme color of Element, the "),a("a",{attrs:{href:"https://elementui.github.io/theme-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended.")]),a("p",[s._v("The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),a("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).")]),a("h2",{attrs:{id:"more-customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" More customizations")]),a("p",[s._v("If you need more customization than just changing the theme color, please follow these steps:")]),a("h3",{attrs:{id:"install-related-tool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" Install related tool")]),a("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.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the default theme from npm or GitHub.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("In "),a("code",[s._v("element-variables.css")]),s._v(" you can find all the variables we used to style Element and they are defined in CSS4 style:")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n  "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n  -------------------------- */")]),s._v("\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"modify-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modify variables")]),a("p",[s._v("Just edit "),a("code",[s._v("element-variables.css")]),s._v(", e.g. changing the theme color to red:")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"build-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Build theme")]),a("p",[s._v("After saving the variable file, use "),a("code",[s._v("et")]),s._v(" to build your theme. You can activate "),a("code",[s._v("watch")]),s._v(" mode by adding a parameter "),a("code",[s._v("-w")]),s._v(". And if you customized the variable file's output, you need to add a parameter "),a("code",[s._v("-c")]),s._v(" and variable file's name:")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),a("p",[s._v("By default the build theme file is placed inside "),a("code",[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",[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:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),a("p",[s._v("If you are using "),a("code",[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",[s._v(".babelrc")]),s._v(" and specify "),a("code",[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",[s._v(".babelrc")]),s._v(". Note that "),a("code",[s._v("~")]),s._v(" is required:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",[s._v("element-theme")]),s._v(".")])])}]}},function(s,t,a){s.exports=a(108)},function(s,t,a){var l=a(13)(a(109),a(110),null,null,null);s.exports=l.exports},function(s,t){"use strict";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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("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() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const 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(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("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() {\n      return {\n        value3: '',\n        value4: '',\n        value5: ''\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{attrs:{type:"month",placeholder:"Pick a month"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{attrs:{type:"year",placeholder:"Pick a year"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Week WW"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("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() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"daterange",placeholder:"Pick a range"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"Pick a range","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("optional default time of the picker")]),a("td",[s._v("Date")]),a("td",[s._v("anything accepted by "),a("code",[s._v("new Date()")])]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the seleted date is changed. Only for "),a("code",[s._v("daterange")]),s._v(" and "),a("code",[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(112)},function(s,t,a){var l=a(13)(a(113),a(114),null,null,null);s.exports=l.exports},function(s,t){"use strict";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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),a("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() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const 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(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{attrs:{type:"datetimerange",placeholder:"Select time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"Select time range",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(116)},function(s,t,a){var l=a(13)(a(117),a(118),null,null,null);s.exports=l.exports},function(s,t){"use strict";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:{openDialog:function(){this.$refs.dialogBind.open()},handleClose:function(s){this.$confirm("Are you sure to close this dialog?").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("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" v-model="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() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('Are you sure to close this dialog?')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{attrs:{title:"Tips",size:"tiny","before-close":s.handleClose},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("v-model")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. This example explicitly changes the value of "),a("code",[s._v("v-model")]),s._v(" to toggle Dialog. In addition, we also provide "),a("code",[s._v("open")]),s._v(" and "),a("code",[s._v("close")]),s._v(" method, which you can call to open/close the Dialog. Finally, this example demonstrates how "),a("code",[s._v("before-close")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(done) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'Are you sure to close this dialog?'")]),s._v(")\n          .then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n            done();\n          })\n          .catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {});\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="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<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address"},model:{value:s.dialogTableVisible,callback:function(t){s.dialogTableVisible=t},expression:"dialogTableVisible"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{attrs:{title:"Shipping address"},model:{value:s.dialogFormVisible,callback:function(t){s.dialogFormVisible=t},expression:"dialogFormVisible"}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"Please select a zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- Table -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- Form -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zones"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",[s._v("top")]),s._v(" of Dialog CSS, works when "),a("code",[s._v("size")]),s._v(" is not "),a("code",[s._v("full")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("callback before Dialog closes, and it will prevent Dialog from closing")]),a("td",[s._v("function(done)，done is used to close the Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Each "),a("code",[s._v("el-dialog")]),s._v(" instance has the following methods that can be used to open/close the instance without explicitly changing the value of "),a("code",[s._v("v-model")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("open the current instance")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the current instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(120)},function(s,t,a){var l=a(13)(a(121),a(122),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n  Dropdown List\n  "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("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 "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n  Dropdown List\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{
+staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("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(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu button size, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("component size, refer to "),a("code",[s._v("Button")]),s._v(" component")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("horizontal alignment")]),a("td",[s._v("string")]),a("td",[s._v("start/end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(124)},function(s,t,a){function l(s){a(125)}var n=a(13)(a(127),a(128),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3):a(new Error("Please input the age"))},a=function(t,a,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()};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:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,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){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("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() {\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() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"please select your zone"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.form.date1,callback:function(t){s.form.date1=t},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.form.date2,callback:function(t){s.form.date2=t},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.form.delivery=t},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.form.type=t},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.form.resource=t},expression:"form.resource"}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.form.desc=t},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsor"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("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() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{attrs:{placeholder:"Approved by"},model:{value:s.formInline.user,callback:function(t){s.formInline.user=t},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.formInline.region,callback:function(t){s.formInline.region=t},expression:"formInline.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),a("p",[s._v("Set the "),a("code",[s._v("inline")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the form will be inline.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("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() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.formLabelAlign.name=t},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.formLabelAlign.region=t},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.formLabelAlign.type=t},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("Left"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("Right"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("Top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Form component allows you to verify your data, helping you find and correct errors.")]),a("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() {\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(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.ruleForm.name=t},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{attrs:{placeholder:"Activity zone"},model:{value:s.ruleForm.region,callback:function(t){s.ruleForm.region=t},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},model:{value:s.ruleForm.date1,callback:function(t){s.ruleForm.date1=t},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},model:{value:s.ruleForm.date2,callback:function(t){s.ruleForm.date2=t},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.ruleForm.delivery,callback:function(t){s.ruleForm.delivery=t},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.ruleForm.type=t},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.ruleForm.resource=t},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"Sponsorship"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.ruleForm.desc=t},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("Create")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Just add the "),a("code",[s._v("rule")]),s._v(" attribute for "),a("code",[s._v("Form")]),s._v(" component, pass validation rules, and set "),a("code",[s._v("prop")]),s._v(" attribute for "),a("code",[s._v("Form-Item")]),s._v(" as a specific key that needs to be validated. See more information at "),a("a",{
+attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsorship"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input Activity name'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Length should be 3 to 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select Activity zone'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a time'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select at least one activity type'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select activity resource'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input activity form'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Please input the age'));\n        }\n        setTimeout(() => {\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 validaePass = (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 validaePass2 = (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: validaePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validaePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.ruleForm2.pass=t},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.ruleForm2.checkPass=t},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.ruleForm2.age=s._n(t)},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Confirm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the age'")]),s._v("));\n        }\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input digits'")]),s._v("));\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Age must be greater than 18'")]),s._v("));\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password again'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("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() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[a("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"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.dynamicValidateForm.email=t},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+l,prop:"domains."+l+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(s){t.value=s},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("Delete")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: 'Please input email address', trigger: 'blur' },\n      { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Domain' + index\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      required: true, message: 'domain can not be null', trigger: 'blur'\n    }\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n          }],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n        }\n      },\n      addDomain() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now(),\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("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() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.numberValidateForm.age=s._n(t)},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Number Validate need a "),a("code",[s._v(".number")]),s._v(" modifier added on the input "),a("code",[s._v("v-model")]),s._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: 'age is required'},\n      { type: 'number', message: 'age must be a number'}\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("radio")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("radio")]),s._v(" and "),a("code",[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left/right/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all form items will inherit from "),a("code",[s._v("Form")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",[s._v("model")])]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(130)},function(s,t,a){var l=a(13)(a(131),a(133),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(132);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},l=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},n=t.removeClass=function(s,t){if(a(s,t)){var l=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(l," ")}};t.toggleClass=function(s,t){a(s,t)?n(s,t):l(s,t)}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("Components Document")])])}]}},function(s,t,a){s.exports=a(135)},function(s,t,a){var l=a(13)(null,a(136),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._v("The default language of Element 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 Element entirely:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v(", which makes multilingual switching even easier.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatible-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n  }\n})\n")])]),a("h2",{attrs:{id:"compatible-with-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n@6.x")])]),a("p",[s._v("You need to manually handle it for compatibility with "),a("code",[s._v("6.x")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n    ...enLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: 'hello' }, enLocale)`")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n    ...zhLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// Or use `Object.assign({ message: '你好' }, zhLocale)`")]),s._v("\n  }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n  messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("key")]),s._v(" =>")]),s._v(" i18n.vm._t(key)\n})\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",[s._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cz)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}]}},function(s,t,a){s.exports=a(138)},function(s,t,a){var l=a(13)(a(139),a(141),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(140);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports=["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._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",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"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n      "+s._s("el-icon-"+t)+"\n    ")])])}))],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])}]}},function(s,t,a){s.exports=a(143)},function(s,t,a){var l=a(13)(a(144),a(145),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("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() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("<el-input-number>")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value)\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        num2: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("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() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{size:"large"},model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"
+}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Additional "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(" sizes of the input box are available")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])])])])}]}},function(s,t,a){s.exports=a(147)},function(s,t,a){function l(s){a(148)}var n=a(13)(a(150),a(151),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(2),e=l(n);e.default.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}}}),t.default={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,l=s?a.filter(this.createStateFilter(s)):a;t(l)},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(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("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() {\n    return {\n      input: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n    return {\n      input1: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Please input",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add an icon to indicate input type.")]),a("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() {\n    return {\n      input2: ''\n    }\n  },\n  methods: {\n    handleIconClick(ev) {\n      console.log(ev);\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Pick a date",icon:"search","on-icon-click":s.handleIconClick},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}})],1),a("p",[s._v("You can add an icon at the end of Input by setting the "),a("code",[s._v("icon")]),s._v(" attribute and use "),a("code",[s._v("on-icon-click")]),s._v(" hook to complete some work after clicking the icon.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n    handleIconClick(ev) {\n      "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n    return {\n      textarea: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"Please input"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("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() {\n    return {\n      textarea2: '',\n      textarea3: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"Please input"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"Please input"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{placeholder:"Select"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Restaurant"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Order No."')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tel"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("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() {\n    return {\n      input6: '',\n      input7: '',\n      input8: '',\n      input9: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{size:"large",placeholder:"Please Input"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{placeholder:"Please Input"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"Please Input"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"Please Input"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("Add "),a("code",[s._v("size")]),s._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{
+staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("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() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(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(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\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(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return suggestions")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("Customize how suggestions are displayed.")]),a("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() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(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(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\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(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-en",placeholder:"Please input",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-en"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-en'")]),s._v(", {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'value'")]),s._v(" } }, [item.value]),\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'link'")]),s._v(" } }, [item.link])\n      ]);\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n    }\n  });\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? link.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return recommended data")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      },\n      handleIconClick(ev) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Search data from server-side.")]),a("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() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\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(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(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"
+},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n        clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),a("code",[s._v('type="textarea"')]),s._v(" to change "),a("code",[s._v("input")]),s._v(" into native "),a("code",[s._v("textarea")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autosize-textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Setting the "),a("code",[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 "),a("code",[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("Same as the "),a("code",[s._v("type")]),s._v(" attribute of native input, except that it can be "),a("code",[s._v("textarea")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("triggers when the icon inside Input is clicked")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when the icon inside Input is blur")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when the icon inside Input is focus")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the icon inside Input value change")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("the placeholder of Autocomplete")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Autocomplete is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("custom-item")]),a("td",[s._v("component name of your customized suggestion list item")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),a("code",[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for autocomplete's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("whether show suggestions when input focus")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when a suggestion is clicked")]),a("td",[s._v("suggestion being clicked")])])])])}]}},function(s,t,a){s.exports=a(153)},function(s,t,a){var l=a(13)(null,a(154),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),a("p",[s._v("Installing with npm is recommended and it works seamlessly with "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("Get the latest version from "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- import CSS -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import JavaScript -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("If you are using CDN, a hello-world page is easy with Element. "),a("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},[s._v("Online Demo")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("<!DOCTYPE html>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import CSS -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import Vue before Element -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import JavaScript -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n      el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n      data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n      }\n    })\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}]}},function(s,t,a){s.exports=a(156)},function(s,t,a){var l=a(13)(null,a(157),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can specify the number of column offset by setting the value of "),a("code",[s._v("offset")]),s._v(" attribute of Col.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can enable flex layout by setting "),a("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),a("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(159)},function(s,t,a){var l=a(13)(a(160),a(161),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("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 "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{
+staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize a text message.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Loading..."')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("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() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 3000);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("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),a("p",[s._v("Add the "),a("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 "),a("code",[s._v("lock")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n    Full screen loading for 3 seconds\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      openFullScreen() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("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 "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(163)},function(s,t,a){var l=a(13)(a(164),a(165),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1"}},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)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("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() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelect(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("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(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("With icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Without icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Groups")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Three")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Four")])],1)],1)],1)],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("With icons"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Without icons"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Groups"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("menu display mode")]),a("td",[s._v("string")]),a("td",[s._v("horizontal/vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("theme color")]),a("td",[s._v("string")]),a("td",[s._v("light/dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("index of currently active menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("array that contains keys of currently active sub-menus")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("whether only one sub-menu can be active")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("how sub-menus are triggered, only works when "),a("code",[s._v("mode")]),s._v(" is 'horizontal'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("whether "),a("code",[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("callback function when menu is activated")]),a("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("callback function when sub-menu expands")]),a("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("callback function when sub-menu collapses")]),a("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("callback function when menu-item is clicked")]),a("td",[s._v("el: menu-item instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router object")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("group title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(167)},function(s,t,a){var l=a(13)(a(168),a(169),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this;this.$msgbox({title:"Message",message:"This is a message",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()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Alert interrupts user operation until the user confirms.")]),a("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() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Open an alert by calling the "),a("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),a("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),a("code",[s._v("message")]),s._v(" and "),a("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),a("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),a("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("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() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._v("string")]),s._v(", and if it is an "),a("code",[s._v("object")]),s._v(", it will be handled as the attribute "),a("code",[s._v("options")]),s._v(". Here we use "),a("code",[s._v("Promise")]),s._v(" to handle further processing.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete completed'")]),s._v("\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete canceled'")]),s._v("\n          });          \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Prompt is used when user input is required.")]),a("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() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(value => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),a("code",[s._v("prompt")]),s._v(". You can use "),a("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),a("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),a("code",[s._v("Boolean")]),s._v(" or "),a("code",[s._v("String")]),s._v(". Returning "),a("code",[s._v("false")]),s._v(" or "),a("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),a("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),a("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'Please input your e-mail'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tip'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Invalid Email'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Your email is:'")]),s._v(" + value\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input canceled'")]),s._v("\n          });       \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can be customized to show various content.")]),a("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() {\n        this.$msgbox({\n          title: 'Message',\n          message: 'This is a message',\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("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 "),a("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: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n              instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n              instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'Loading...'")]),s._v(";\n              setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                done();\n                setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                  instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n                }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n              }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              done();\n            }\n          }\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n          });\n        });\n      },\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added the following global methods for Vue.prototype: "),a("code",[s._v("$msgbox")]),s._v(", "),a("code",[s._v("$alert")]),s._v(", "),a("code",[s._v("$confirm")]),s._v(" and "),a("code",[s._v("$prompt")]),s._v(". So in a vue instance you can call "),a("code",[s._v("MessageBox")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("MessageBox")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The corresponding methods are: "),a("code",[s._v("MessageBox")]),s._v(", "),a("code",[s._v("MessageBox.alert")]),s._v(", "),a("code",[s._v("MessageBox.confirm")]),s._v(" and "),a("code",[s._v("MessageBox.prompt")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("content of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type, used for icon display")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),a("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),a("td",[s._v("function(action, instance, done), where "),a("code",[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),a("code",[s._v("done")]),s._v(" is for closing the instance")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("whether to lock body scroll when MessageBox prompts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("whether to show a cancel button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with confirm and prompt)")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("whether to show a confirm button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("text content of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Cancel")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("text content of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OK")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("custom class name of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("custom class name of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("whether MessageBox can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("whether to show an input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with prompt)")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("placeholder of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("initial value of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("regexp for the input")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("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")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("error message when validation fails")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Illegal input")])])])]);
+}]}},function(s,t,a){s.exports=a(171)},function(s,t,a){var l=a(13)(a(172),a(173),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},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"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">Show message</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")])]],2),a("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. Element has registered a "),a("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string as parameter, and it will be shown as the main body.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),a("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() {\n        this.$message('This is a message.');\n      },\n      open2() {\n        this.$message({\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('Oops, this is a error message.');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("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 "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n      },\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("A close button can be added.")]),a("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() {\n        this.$message({\n          showClose: true,\n          message: 'This is a message.'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: 'Oops, this is a error message.',\n          type: 'error'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),a("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),a("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),a("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Message.success(options)")]),s._v(".\nYou can call "),a("code",[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Message")]),s._v(" and "),a("code",[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}]}},function(s,t,a){s.exports=a(175)},function(s,t,a){var l=a(13)(a(176),a(177),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("p",{style:"color: red"},"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")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at the upper right corner of the page.")]),s._m(1),a("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() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('p', { style: 'color: red' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n    Closes automatically\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n    Won't close automatically\n    ")])]],2),a("p",[s._v("Element has registered the "),a("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),a("code",[s._v("title")]),s._v(" field and the"),a("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 "),a("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),a("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),a("code",[s._v("duration")]),s._v(" receives a "),a("code",[s._v("Number")]),s._v(" in milliseconds.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("\n    Closes automatically\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n    Won't close automatically\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: red'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'This is a reminder'")]),s._v(")\n        });\n      },\n\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Prompt'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message that does not automatically close'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("We provide four types: success, warning, info and error.")]),a("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() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n    Success\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n    Warning\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n    Info\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n    Error\n  ")])]],2),a("p",[s._v("Element provides four notification types: "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("error")]),s._v(". They are set by the "),a("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 "),a("code",[s._v("open5")]),s._v(" and "),a("code",[s._v("open6")]),s._v(" without passing a "),a("code",[s._v("type")]),s._v(" field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n    Success\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n    Warning\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n    Info\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n    Error\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"
+},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an info message'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Error'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Customize Notification's offset from the top edge of the screen")]),a("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() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    Notification with offset\n  ")])]],2),a("p",[s._v("Set the "),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    Notification with offset\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Notification")]),s._v(" and "),a("code",[s._v("this.$notify")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}]}},function(s,t,a){s.exports=a(179)},function(s,t,a){var l=a(13)(a(180),a(181),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){this.currentPage=s,console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use small pagination in the case of limited space.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add more modules based on your scenario.")]),a("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="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="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="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="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(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        this.currentPage = val;\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSizeChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentPage = val;\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`current page: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",[s._v("total")]),s._v(" or "),a("code",[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",[s._v("page-sizes")]),s._v(", "),a("code",[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",[s._v("slot")]),s._v(" in "),a("code",[s._v("layout")])])])])])}]}},function(s,t,a){s.exports=a(183)},function(s,t,a){var l=a(13)(a(184),a(185),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("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() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("triggers when popover shows")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("triggers when popover hides")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(187)},function(s,t,a){var l=a(13)(null,a(188),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Use "),a("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),a("strong",[s._v("required")]),s._v(" and must be between "),a("code",[s._v("0-100")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In this case the percentage takes no additional space.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[a("code",[s._v("stroke-width")]),s._v(" attribute decides the "),a("code",[s._v("width")]),s._v(" of progress bar, and use "),a("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"
+},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("You can specify "),a("code",[s._v("type")]),s._v(" attribute to "),a("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),a("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("the width of progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("whether to place the percentage inside progress bar, only works when "),a("code",[s._v("type")]),s._v(" is 'line'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("the current status of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("the canvas width of circle progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to show percentage")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(190)},function(s,t,a){var l=a(13)(null,a(191),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"quick-start"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),a("p",[s._v("This part walks you through the process of using Element in a webpack project.")]),a("h3",{attrs:{id:"use-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),a("p",[s._v("We provide a general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("project template")]),s._v(" for you. For those who are familiar with "),a("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" or "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("Laravel")]),s._v(", we also provide corresponding templates, and you can download and use them as well.")]),a("p",[s._v("If you prefer not to use them, please read the following.")]),a("h3",{attrs:{id:"config-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Config files")]),a("p",[s._v("Create a new project, and its structure should be")]),a("pre",[a("code",{staticClass:"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")])]),a("p",[s._v("Typical configurations for these config files are:")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-starter"')]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^2.1.6"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-es2015"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.13.2"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n  }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n    "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n        }\n      }\n    ]\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n      "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n      }\n    }),\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    })\n  ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("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.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ],\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-default"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("Next, if you need Button and Select, edit main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("Full example (Component list reference "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(")")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"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} "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-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")])]),a("h3",{attrs:{id:"start-coding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),a("p",[s._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# visit localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("Build:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}]}},function(s,t,a){s.exports=a(193)},function(s,t,a){var l=a(13)(a(194),a(195),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("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 () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{staticClass:"radio",attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionA")]),a("el-radio",{staticClass:"radio",attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("optionB")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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 () {\n      return {\n        radio1: 'selected and disabled'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionA")]),a("el-radio",{attrs:{disabled:"",label:"selected and disabled"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("optionB")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("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 () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("optionA")]),a("el-radio",{attrs:{label:6}},[s._v("optionB")]),a("el-radio",{attrs:{label:9}},[s._v("optionC")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("<el-radio-group>")]),s._v(" with "),a("code",[s._v("<el-radio>")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("<el-radio-group>")]),s._v(" element and set label value in "),a("code",[s._v("<el-radio>")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("optionC"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("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 () {\n      return {\n        radio3: 'New York',\n        radio4: 'New York',\n        radio5: 'New York'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:!0}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("p",[s._v("You just need to change "),a("code",[s._v("<el-radio>")]),s._v(" element into "),a("code",[s._v("<el-radio-button>")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number/boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(197)},function(s,t,a){var l=a(13)(a(198),a(199),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("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() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._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 "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("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() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("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() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("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:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("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() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value} points"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-text")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("text-template")]),s._v(" to provide a text template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("text template when the component is read-only")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(201)},function(s,t,a){var l=a(13)(a(202),a(203),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"Select"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  \n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"Select"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"Select"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("multiple")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" to enable multiple mode. In this case, the value of "),a("code",[s._v("v-model")]),s._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("Insert customized HTML templates into the slot of "),a("code",[s._v("el-option")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{placeholder:"Select"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("Use "),a("code",[s._v("el-option-group")]),s._v(" to group the options, and its "),a("code",[s._v("label")]),s._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popular cities'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'City name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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" :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() {\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",slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"Select"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-select")]),s._v(" enables filtering. By default, Select will find all the options whose "),a("code",[s._v("label")]),s._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[s._v("filter-method")]),s._v(". "),a("code",[s._v("filter-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._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() {\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() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("filterable")]),s._v(" and "),a("code",[s._v("remote")]),s._v(" with "),a("code",[s._v("true")]),s._v(" to enable remote search, and you should pass the "),a("code",[s._v("remote-method")]),s._v(". "),a("code",[s._v("remote-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[s._v("el-option")]),s._v(" is rendered with the "),a("code",[s._v("v-for")]),s._v(" directive, you should add the "),a("code",[s._v("key")]),s._v(" attribute for "),a("code",[s._v("el-option")]),s._v(". Its value needs to be unique, such as "),a("code",[s._v("item.value")]),s._v(" in the following example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please enter a keyword"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n        "),a("span",{
+staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n      });\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      remoteMethod(query) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n          setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n            });\n          }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._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() {\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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("By using the "),a("code",[s._v("allow-create")]),s._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[s._v("allow-create")]),s._v(" to work, "),a("code",[s._v("filterable")]),s._v(" must be "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether multiple-select is activated")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Select is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether single select can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("maximum number of options user can select when "),a("code",[s._v("multiple")]),s._v(" is "),a("code",[s._v("true")]),s._v(". No limit when set to 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("the name attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Select is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("whether creating new items is allowed. To use this, "),a("code",[s._v("filterable")]),s._v(" must be true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("whether options are loaded from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("custom remote search method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("whether Select is loading data from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("displayed text while loading data from server")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Loading")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("displayed text when no data matches the filtering query")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No matching data")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("displayed text when there is no options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No data")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the selected value changes")]),a("td",[s._v("current selected value")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("triggers when a tag is removed in multiple mode")]),a("td",[s._v("removed tag value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("name of the group")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable all options in this group")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of option")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label of option, same as "),a("code",[s._v("value")]),s._v(" if omitted")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether option is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(205)},function(s,t,a){var l=a(13)(a(206),a(207),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Drag the slider within a fixed range.")]),s._m(1),a("p",[s._v("The current value is displayed when the slider is being dragged.")]),a("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() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default value")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Disabled")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("Customize the initial value of the slider by setting the binding value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatTooltip(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("Set step size with the "),a("code",[s._v("step")]),s._v(" attribute. You can display breakpoints by setting the "),a("code",[s._v("show-stops")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"
+},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Set value via a input box.")]),a("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() {\n      return {\n        value8: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("Set the "),a("code",[s._v("show-input")]),s._v(" attribute to display an input box on the right.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Selecting a range of values is supported.")]),a("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() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("range")]),s._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\n      return {\n        value10: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("vertical")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" enables vertical mode. In vertical mode, the "),a("code",[s._v("height")]),s._v(" attribute is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"discrete-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[s._v("¶")]),s._v(" Discrete values")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slider-with-input-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider with input box")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"range-selection"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[s._v("¶")]),s._v(" Range selection")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Slider is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("step size")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("whether to display an input box, works when "),a("code",[s._v("range")]),s._v(" is false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("whether to display control buttons when "),a("code",[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("whether to display breakpoints")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("whether to display tooltip value")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("format to display tooltip value")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("whether to select a range")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("vertical mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider height, required in vertical mode")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(209)},function(s,t,a){var l=a(13)(a(210),a(211),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Simple step bar.")]),a("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() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      next() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Shows the status of the step for each step.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),a("el-step",{attrs:{title:"Processing"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("Use "),a("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),a("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Done"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Processing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("There is description for each step.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("A variety of custom icons can be used in the step bar.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"Step 1",icon:"edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"picture"}})],1)],1),a("p",[s._v("The icon is set by the "),a("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 "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Vertical step bars.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("whether step description is centered")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("center whole "),a("code",[s._v("Steps")]),s._v(" component")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}]}},function(s,t,a){s.exports=a(213)},function(s,t,a){var l=a(13)(a(214),a(215),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:"100",value4:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("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() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. You can add "),a("code",[s._v("on-text")]),s._v(" or "),a("code",[s._v("off-text")]),s._v(" attribute to show texts when the component is "),a("code",[s._v("on")]),s._v(" or "),a("code",[s._v("off")]),s._v(", respectively. The "),a("code",[s._v("on-color")]),s._v(" and "),a("code",[s._v("off-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        value3: '100'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value3,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1)],1),a("p",[s._v("You can set "),a("code",[s._v("on-value")]),s._v(" and "),a("code",[s._v("off-value")]),s._v(" attributes. They both receive a "),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(" typed value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Switch value: ' + value3\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'100'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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() {\n      return {\n        value4: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":"",disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"extended-value-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#extended-value-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Extended value types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58 (with text) / 46 (no text)")])]),a("tr",[a("td",[s._v("on-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("on")]),s._v(" state, overrides "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("off")]),s._v(" state, overrides "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch value when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("background color when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("background color when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(217)},function(s,t,a){var l=a(13)(a(218),a(219),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="Total Cost");var n=a.map(function(t){return Number(t[s.property])});n.every(function(s){return isNaN(s)})?l[t]="N/A":l[t]="$ "+n.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0)}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$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)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v("  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n      data() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Striped table makes it easier to distinguish different rows.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("stripe")]),s._v(" accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", table will be striped.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),a("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(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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Use "),a("code",[s._v("row-class-name")]),s._v(" in "),a("code",[s._v("el-table")]),s._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      tableRowClassName(row, index) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(":  [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("When there are too many columns, you can fix some of them.")]),a("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 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() {\n        console.log('click');\n      }\n    },\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detail")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("Edit")])]}]])})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("fixed")]),s._v(" is used in "),a("code",[s._v("el-table-column")]),s._v(", it accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"
+},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'click'")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),a("p",[s._v("Fix columns and header at the same time by combining the above two examples.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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.")]),a("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 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(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n          Remove\n        ")])]}]])})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("max-height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"
+},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n          Remove\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      deleteRow(index, rows) {\n        rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{label:"Delivery Info"}},[a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{label:"Address Info"}},[a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Delivery Info"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address Info"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Single row selection is supported.")]),a("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() {\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(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("Select second row")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Table supports single row selection. You can activate it by adding the "),a("code",[s._v("highlight-current-row")]),s._v(" attribute. An event called "),a("code",[s._v("current-change")]),s._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),a("code",[s._v("currentRow")]),s._v(" and "),a("code",[s._v("oldCurrentRow")]),s._v(". If you need to display row index, you can add a new "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" attribute assigned to "),a("code",[s._v("index")]),s._v(", and you will see the index starting from 1.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"singleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"
+},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current-row")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"index"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("Select second row"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent()"')]),s._v(">")]),s._v("Clear selection"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      setCurrent(row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can also select multiple rows.")]),a("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 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() {\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(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:s._u([["default",function(t){return[s._v(s._s(t.row.date))]}]])}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("Toggle selection status of second and third rows")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("Clear selection")])],1)]],2),a("p",[s._v("Activating multiple selection is easy: simply add an "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" set to "),a("code",[s._v("selection")]),s._v(". Apart from multiple selection, this example also uses "),a("code",[s._v("show-overflow-tooltip")]),s._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 "),a("code",[s._v("show-overflow-tooltip")]),s._v(", which accepts a "),a("code",[s._v("Boolean")]),s._v(" value. When set "),a("code",[s._v("true")]),s._v(", the extra content will show in tooltip when hover on the cell.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"multipleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selection"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"55"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("Toggle selection status of second and third rows"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("Clear selection"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleSelection(rows) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (rows) {\n          rows.forEach("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("row")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n          });\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Sort the data to find or compare data quickly.")]),a("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() {\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(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})],1)]],2),a("p",[s._v("Set table attribute "),a("code",[s._v("default-sort")]),s._v(" to determine default sort column and order. Set attribute "),a("code",[s._v("sortable")]),s._v(" in a certain column to sort the data based on this column. It accepts "),a("code",[s._v("Boolean")]),s._v(" with a default value "),a("code",[s._v("false")]),s._v(". In this example we use another attribute named "),a("code",[s._v("formatter")]),s._v(" to format the value of certain columns. It accepts a function which has two parameters: "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(". You can handle it according to your own needs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Filter the table to find desired data.")]),a("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">\n      <template 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() {\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(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag},scopedSlots:s._u([["default",function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}]])})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("filters")]),s._v(" and "),a("code",[s._v("filter-method")]),s._v(" in "),a("code",[s._v("el-table-column")]),s._v(" makes this column filterable. "),a("code",[s._v("filters")]),s._v(" is an array, and "),a("code",[s._v("filter-method")]),s._v(" is a function deciding which rows are displayed. It has two parameters: "),a("code",[s._v("value")]),s._v(" and "),a("code",[s._v("row")]),s._v(".")]),a("div",{
+staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("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 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 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 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() {\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(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}]])}),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("Name: "+s._s(t.row.name))]),a("p",[s._v("Addr: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}]])}),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}]])})],1)]],2),a("p",[s._v("You have access to the following data: row, column, $index and store (state management of Table) by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(". (Scoped slots is supported from "),a("code",[s._v("1.1")]),s._v(", "),a("code",[s._v("inline-template")]),s._v(" still works, but it's not recommended).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Name: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Addr: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._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.")]),a("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 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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([["default",function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}]])}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._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 '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("State: "),a("span",[s._v("{{")]),s._v(" props.row.state "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("City: "),a("span",[s._v("{{")]),s._v(" props.row.city "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Address: "),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Zip: "),a("span",[s._v("{{")]),s._v(" props.row.zip "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("For table of numbers, you can add an extra row at the table footer displaying each column's sum.")]),a("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() {\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(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = 'Total Cost';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = '$ ' + values.reduce((prev, curr) => {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"Amount 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"Amount 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"Amount 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name"}}),a("el-table-column",{attrs:{prop:"amount1",label:"Cost 1 ($)"}}),a("el-table-column",{attrs:{prop:"amount2",label:"Cost 2 ($)"}}),a("el-table-column",{attrs:{prop:"amount3",label:"Cost 3 ($)"}})],1)]],2),a("p",[s._v("You can add the summary row by setting "),a("code",[s._v("show-summary")]),s._v(" to "),a("code",[s._v("true")]),s._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 "),a("code",[s._v("sum-text")]),s._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 "),a("code",[s._v("summary-method")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Amount 3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  \n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":summary-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getSummaries"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 1 ($)"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 2 ($)"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Cost 3 ($)"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData6")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'234'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'3.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'165'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.43'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987124'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'324'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1.9'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'621'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("17")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'539'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getSummaries(param) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { columns, data } = param;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" sums = [];\n        columns.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'Total Cost'")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(";\n          }\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" values = data.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(item[column.property]));\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!values.every("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value))) {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'$ '")]),s._v(" + values.reduce("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" value = "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(curr);\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value)) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev + curr;\n              } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev;\n              }\n            }, "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'N/A'")]),s._v(";\n          }\n        });\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" sums;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"striped-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Striped Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with border")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"summary-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#summary-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Summary row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[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")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether table has vertical border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("whether table header is visible")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("whether current row is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("key of current row, a set only prop")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("function that returns custom style for a row,  or a string assigning custom style for every row")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("key of row data, used for optimizing rendering. Required if "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("Displayed text when data is empty. You can customize this area with "),a("code",[s._v('slot="empty"')])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("No Data")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("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")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("set the default sort column and order. property "),a("code",[s._v("prop")]),s._v(" is used to set default sort column, property "),a("code",[s._v("order")]),s._v(" is used to set default sort order")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("if "),a("code",[s._v("prop")]),s._v(" is set, and "),a("code",[s._v("order")]),s._v(" is not set, then "),a("code",[s._v("order")]),s._v(" is default to ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" property")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("whether to display a summary row")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("displayed text for the first column of summary row")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("Sum")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("custom summary method")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when user clicks the checkbox in a row")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("triggers when user clicks the checkbox in table header")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("triggers when selection changes")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("triggers when hovering into a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("triggers when hovering out of a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("triggers when clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("triggers when double clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("triggers when clicking a row")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("triggers when user right clicks on a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("triggers when double clicking a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("triggers when clicking a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("triggers when Table's sorting changes")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("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")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current row changes")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("triggers when finish dragging header")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("triggers when user expands or collapses a row")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("used in multiple selection Table, clear selection, might be useful when "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("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")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("used in single selection Table, set a certain row selected. If called without any parameter, it will clear selection.")]),a("td",[s._v("row")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("Contents to be inserted after the last row. It is still nested inside the "),a("code",[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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the column. If set to "),a("code",[s._v("selection")]),s._v(", the column will display checkbox. If set to "),a("code",[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),a("code",[s._v("expand")]),s._v(", the column will display expand icon.")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("column label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("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")]),a("td",[s._v("string")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("field name. You can also use its alias: "),a("code",[s._v("property")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("column width")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("column minimum width. Columns with "),a("code",[s._v("width")]),s._v(" has a fixed width, while columns with "),a("code",[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),a("code",[s._v("true")])]),a("td",[s._v("string/boolean")]),a("td",[s._v("true/left/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("render function for table header of this column")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("whether column can be sorted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("sorting method, works when "),a("code",[s._v("sortable")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("whether column width can be resized, works when "),a("code",[s._v("border")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("function that formats content")]),a("td",[s._v("Function(row, column)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("string")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("alignment of the table header. If omitted, the value of the above "),a("code",[s._v("align")]),s._v(" attribute will be applied")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("class name of cells in the column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("class name of the label of this column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("function that determines if a certain row can be selected, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("whether to reserve selection after data refreshing, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("an array of data filtering options. For each element in this array, "),a("code",[s._v("text")]),s._v(" and "),a("code",[s._v("value")]),s._v(" are required")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("whether data filtering supports multiple options")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("data filtering method. If "),a("code",[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 "),a("code",[s._v("true")])]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),a("code",[s._v("render-header")])]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(221)},function(s,t,a){var l=a(13)(a(222),a(223),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("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() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._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 "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Tabs styled as cards.")]),a("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() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" can get a card-styled tab.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Border card tabs.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n    Route\n  ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    Route\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("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() {\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(targetName, action) {\n        if (action === 'add') {\n          let 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          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let 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(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"
+},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleTabsEdit(targetName, action) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n          });\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n            tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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() {\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(targetName) {\n        let 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(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let 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(tab => tab.name !== targetName);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n    add tab\n  ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n  >")]),s._v("\n    add tab\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(225)},function(s,t,a){var l=a(13)(a(226),a(227),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"gray"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"primary"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Five")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Six")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("Tag Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Tag Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Tag Four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Tag Five"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Tag Six"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:t.name,attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("close-transition")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.name"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 4'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 6'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let 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}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13)?void s.handleInputConfirm(t):null}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(tag) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      },\n\n      showInput() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("whether the removal animation is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tab is removed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(229)},function(s,t,a){var l=a(13)(a(230),a(231),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("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() {\n      return {\n        value1: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("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() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("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() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("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() {\n      return {\n        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"",placeholder:"Pick a time range"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time range"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("date for Time Picker, and string for Time Select")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(233)},function(s,t,a){function l(s){a(234)}var n=a(13)(a(236),a(237),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to "),a("span",[s._v("{{")]),s._v("disabled ? 'active' : 'close'"),a("span",[s._v("}}")]),s._v(" tooltip function"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" ease;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-leave-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{staticClass:"hljs-selector-class"},[s._v(".expand-fade-leave-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",[s._v("dark")]),s._v(" and "),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._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,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",[s._v("tooltip")]),s._v(". You just need set it to "),a("code",[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("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,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",[s._v("mouseenter")]),s._v(" and "),a("code",[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(239)},function(s,t,a){var l=a(13)(a(240),a(241),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"Option "+a,disabled:a%4===0});return t},t=function(s){var t=[],a=["California","Illinois","Maryland","Texas","Florida","Colorado","Connecticut "],l=["CA","IL","MD","TX","FL","CO","CT"];return a.forEach(function(s,a){t.push({label:s,key:a,initial:l[a]})}),t},a=function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"Option "+a,disabled:a%4===0});return t};return{data:s(),data2:t(),data3:a(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.initial.toLowerCase().indexOf(s.toLowerCase())>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("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() {\n      const generateData = _ => {\n        const data = [];\n        for (let 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Data is passed to Transfer via the "),a("code",[s._v("data")]),s._v(" attribute. The data needs to be an object array, and each object should have these attributes: "),a("code",[s._v("key")]),s._v(" being the identification of the data item, "),a("code",[s._v("label")]),s._v(" being the displayed text, and "),a("code",[s._v("disabled")]),s._v(" indicating if the data item is disabled. Items inside the target list are in sync with the variable binding to "),a("code",[s._v("v-model")]),s._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 "),a("code",[s._v("v-model")]),s._v(" with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"
+},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can search and filter data items.")]),a("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() {\n      const generateData2 = _ => {\n        const data = [];\n        const states = ['California', 'Illinois', 'Maryland', 'Texas', 'Florida', 'Colorado', 'Connecticut '];\n        const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];\n        states.forEach((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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"State Abbreviations",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("Set the "),a("code",[s._v("filterable")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to enable filter mode. By default, if the data item "),a("code",[s._v("label")]),s._v(" contains the search keyword, it will be included in the search result. Also, you can implement you own filter method with the "),a("code",[s._v("filter-method")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State Abbreviations"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData2 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" states = ["),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Illinois'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Maryland'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Texas'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Colorado'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Connecticut '")]),s._v("];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" initials = ["),a("span",{staticClass:"hljs-string"},[s._v("'CA'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'IL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'MD'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'TX'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'FL'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CO'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'CT'")]),s._v("];\n        states.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": city,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": index,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("initial")]),s._v(": initials[index]\n          });\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": generateData2(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": [],\n        filterMethod(query, item) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.initial.toLowerCase().indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can customize list titles, button texts, render function for data items, checking status texts in list footer and list footer contents.")]),a("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() {\n      const generateData = _ => {\n        const data = [];\n        for (let 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(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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["To left","To right"],"footer-format":{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"left-footer"},[s._v("Operation")]),a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"right-footer"},[s._v("Operation")])],1)]],2),a("p",[s._v("Use "),a("code",[s._v("titles")]),s._v(", "),a("code",[s._v("button-texts")]),s._v(", "),a("code",[s._v("render-content")]),s._v(" and "),a("code",[s._v("footer-format")]),s._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: "),a("code",[s._v("left-footer")]),s._v(" and "),a("code",[s._v("right-footer")]),s._v(". Plus, if you want some items initially checked, you can use "),a("code",[s._v("left-default-checked")]),s._v(" and "),a("code",[s._v("right-default-checked")]),s._v(". Finally, this example demonstrate the "),a("code",[s._v("change")]),s._v(" event. Note that this demo can't run in jsfiddle because it doesn't support JSX syntax. In a real project, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":left-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":right-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[1]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderFunc"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":titles")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['Source', 'Target']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":button-texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['To left', 'To right']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":footer-format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      noChecked: '${total}',\n      hasChecked: '${checked}/${total}'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Operation"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transfer-footer")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n        renderFunc(h, option) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")])]),s._v(";\n        }\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value, direction, movedKeys) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("The data items in this example do not have "),a("code",[s._v("key")]),s._v("s or "),a("code",[s._v("label")]),s._v("s, instead they have "),a("code",[s._v("value")]),s._v("s and "),a("code",[s._v("desc")]),s._v("s. So you need to set aliases for "),a("code",[s._v("key")]),s._v(" and "),a("code",[s._v("label")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      key: 'value',\n      label: 'desc'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData3 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`Option "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": generateData3(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": []\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prop-aliases"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prop-aliases","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prop aliases")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("By default, Transfer looks for "),a("code",[s._v("key")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("disabled")]),s._v(" in a data item. If your data items have different key names, you can use the "),a("code",[s._v("props")]),s._v(" attribute to define aliases.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("data source")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Transfer is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("placeholder for the filter input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Enter keyword")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("custom list titles")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['List 1', 'List 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("custom button texts")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("custom render function for data items")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("footer-format")]),a("td",[s._v("texts for checking status in list footer")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '${total} items', hasChecked: '${checked}/${total} checked' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("prop aliases for data source")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("key array of initially checked data items of the left list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("key array of initially checked data items of the right list")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("content of left list footer")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("content of right list footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when data items change in the right list")]),a("td",[s._v("key array of current data items in the right list, transfer direction (left or right), moved item keys")])])])])}]}},function(s,t,a){s.exports=a(243)},function(s,t,a){var l=a(13)(a(244),a(245),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("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: () => ({\n      show: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("We have two fading effects: "),a("code",[s._v("el-fade-in-linear")]),s._v(" and "),a("code",[s._v("el-fade-in")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"
+},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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: () => ({\n      show2: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[a("code",[s._v("el-zoom-in-center")]),s._v(", "),a("code",[s._v("el-zoom-in-top")]),s._v(" and "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" are provided.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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: () => ({\n      show3: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"built-in-transition"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#built-in-transition","aria-hidden":"true"}},[s._v("¶")]),s._v(" Built-in transition")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use Element's built-in transitions directly. Before that, please read the "),a("a",{attrs:{href:"https://vuejs.org/v2/api/#transition"}},[s._v("transition docs")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("For collapse effect, use the "),a("code",[s._v("el-collapse-transition")]),s._v(" component.")])}]}},function(s,t,a){s.exports=a(247)},function(s,t,a){var l=a(13)(a(248),a(249),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0;var a=[{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"}]}]}],l=[{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"}]}],n=1e3,e=[{name:"region1"},{name:"region2"}],i=1,v={label:"name",children:"zones"},_={children:"children",label:"label"};t.default={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){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+i++},{name:"zone"+i++}]:[],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:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;return s("span",null,[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(e,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,regions:e,defaultProps:_,props:v,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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.")]),a("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(() => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{
+staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckChange(data, checked, indeterminate) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      },\n      loadNode(node, resolve) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root2'")]),s._v(" }]);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("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() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\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() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),a("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),a("p",[s._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, "),a("code",[s._v("node-key")]),s._v(" is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n        }]);\n      },\n      setCheckedKeys() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n      },\n      resetChecked() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),a("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  let id = 1000;\n\n  export default {\n    data() {\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(store, data) {\n        store.append({ id: id++, label: 'testtest', children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\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={ () => this.append(store, data) }>Append</el-button>\n              <el-button size=\"mini\" on-click={ () => this.remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("Use "),a("code",[s._v("render-content")]),s._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, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n  export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        data2: [{\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            children: [{\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        defaultProps: {\n          children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n          <span>\n            <span>\n              <span>{node.label}</span>\n            </span>\n            <span style="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; margin-right: 20px"')]),s._v(">\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append</el-button>\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Tree nodes can be filtered")]),a("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(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"Filter keyword"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("Invoke the "),a("code",[s._v("filter")]),s._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),a("code",[s._v("filter-node-method")]),s._v(" is required, and its value is the filtering method.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Filter keyword"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("key of current node, a set only prop")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("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.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of node object is used as the node's subtree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("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 "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("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")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}]}},function(s,t,a){s.exports=a(251)},function(s,t,a){var l=a(13)(null,a(252),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(254)},function(s,t,a){var l=a(13)(a(255),a(256),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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!(s.size>4e7)||(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,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const 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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture must be JPG format!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture size can not exceed 2MB!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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() {\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(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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() {\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(file, fileList) {\n        this.fileList3 = fileList.slice(-3);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("You can drag your file to a certain area to upload it.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("Drop file here or "),a("em",[s._v("click to upload")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"
+},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("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() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("select file")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("upload to server")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("select file"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"manual-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Manual upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("required, request URL")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("request headers")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether uploading multiple files is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("additions options of request")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("key name for uploaded file")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("whether cookies are sent")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-upload-list")]),a("td",[s._v("whether to show the uploaded file list")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("whether to activate drag and drop mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("accepted "),a("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 "),a("code",[s._v("thumbnail-mode")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("hook function when clicking the uploaded files")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("hook function when files are removed")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("hook function when uploaded successfully")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("hook function when some errors occurs")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("hook function when some progress occurs")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("hook function when select file or upload file success or upload file fail")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),a("code",[s._v("false")]),s._v(" or a "),a("code",[s._v("Promise")]),s._v(" is returned, uploading will be aborted")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("thumbnail-mode")]),a("td",[s._v("whether thumbnail is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("type of fileList")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("whether to auto upload file")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable upload")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("clear the uploaded file list")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(258)},function(s,t,a){function l(s){a(259)}var n=a(13)(a(261),a(262),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于页面中展示重要的提示信息。")]),s._m(1),a("p",[s._v("页面中的非浮层元素，不会自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success">\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info">\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning">\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error">\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2),a("p",[s._v("Alert 组件提供四种主题，由"),a("code",[s._v("type")]),s._v("属性指定，默认值为"),a("code",[s._v("info")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("自定义关闭按钮为文字或其他符号。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="不可关闭的 alert" type="success" :closable="false">\n  </el-alert>\n  <el-alert title="自定义 close-text" type="info" close-text="知道了">\n  </el-alert>\n  <el-alert title="设置了回调的 alert" type="warning" @close="hello">\n  </el-alert>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),a("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),a("code",[s._v("closable")]),s._v("属性决定是否可关闭，接受"),a("code",[s._v("boolean")]),s._v("，默认为"),a("code",[s._v("true")]),s._v("。你可以设置"),a("code",[s._v("close-text")]),s._v("属性来代替右侧的关闭图标，注意："),a("code",[s._v("close-text")]),s._v("必须为文本。设置"),a("code",[s._v("close")]),s._v("事件来设置关闭时的回调。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"不可关闭的 alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"自定义 close-text"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"知道了"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"设置了回调的 alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      hello() {\n        alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("表示某种状态时提升可读性。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success" show-icon>\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info" show-icon>\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning" show-icon>\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2),a("p",[s._v("通过设置"),a("code",[s._v("show-icon")]),s._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含标题和内容，解释更详细的警告。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2),a("p",[s._v("除了必填的"),a("code",[s._v("title")]),s._v("属性外，你可以设置"),a("code",[s._v("description")]),s._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"带辅助性文字介绍"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2),a("p",[s._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert-jing-gao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert 警告")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义关闭按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("标题，"),a("strong",[s._v("必选参数")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("辅助性文字。也可通过默认 slot 传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("关闭按钮自定义文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("是否显示图标")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭alert时触发的事件")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(264)},function(s,t,a){function l(s){a(265),a(267)}var n=a(13)(null,a(269),l,"data-v-39800af8",null);s.exports=n.exports},function(s,t){},,function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("出现在按钮、图标旁的数字或状态标记。")]),s._m(1),a("p",[s._v("展示新消息数量。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<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      评论\n      <el-badge class="mark" :value="12">\n    </el-badge></el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      回复\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    点我查看"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      评论\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      回复\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("属性，它接受"),a("code",[s._v("Number")]),s._v("或者"),a("code",[s._v("String")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    点我查看"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      评论\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      回复\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义最大值。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("由"),a("code",[s._v("max")]),s._v("属性定义，它接受一个"),a("code",[s._v("Number")]),s._v("，需要注意的是，只有当"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("Number")]),s._v("时，它才会生效。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以显示数字以外的文本内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge value="new" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("String")]),s._v("类型是时可以用于显示自定义文本。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("以红点的形式标注需要关注的内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge is-dot class="item">数据查询</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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("数据查询")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("除了数字外，设置"),a("code",[s._v("is-dot")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("数据查询"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge-biao-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge 标记")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zui-da-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 最大值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-hong-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小红点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("显示值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("小圆点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("隐藏 badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(271)},function(s,t,a){var l=a(13)(null,a(272),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("显示当前页面的路径，快速返回之前的任意页面。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("首页")]),a("el-breadcrumb-item",[s._v("活动管理")]),a("el-breadcrumb-item",[s._v("活动列表")]),a("el-breadcrumb-item",[s._v("活动详情")])],1)],1),a("p",[s._v("在"),a("code",[s._v("el-breadcrumb")]),s._v("中使用"),a("code",[s._v("el-breadcrumb-item")]),s._v("标签表示从首页开始的每一级。Element 提供了一个"),a("code",[s._v("separator")]),s._v("属性，在"),a("code",[s._v("el-breadcrumb")]),s._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),a("code",[s._v("/")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("首页"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动列表"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动详情"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb 面包屑")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("分隔符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("斜杠'/'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("路由跳转对象，同 "),a("code",[s._v("vue-router")]),s._v(" 的 "),a("code",[s._v("to")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(274)},function(s,t,a){function l(s){a(275)}var n=a(13)(a(277),a(278),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={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"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用的操作按钮。")]),s._m(1),a("p",[s._v("基础的按钮用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button>默认按钮</el-button>\n<el-button type="primary">主要按钮</el-button>\n<el-button type="text">文字按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("默认按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"text"}},[s._v("文字按钮")])],1),a("p",[s._v("Button 组件默认提供7种主题，由"),a("code",[s._v("type")]),s._v("属性来定义，默认为"),a("code",[s._v("default")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("默认按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("按钮不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button :plain="true" :disabled="true">主要按钮</el-button>\n<el-button type="primary" :disabled="true">主要按钮</el-button>\n<el-button type="text" :disabled="true">文字按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"primary",disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"text",disabled:!0}},[s._v("文字按钮")])],1),a("p",[s._v("你可以使用"),a("code",[s._v("disabled")]),s._v("属性来定义按钮是否可用，它接受一个"),a("code",[s._v("Boolean")]),s._v("值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"
+},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("不同的颜色倾向代表不同的提示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认显示颜色</span>\n  <span class="wrapper">\n    <el-button type="success">成功按钮</el-button>\n    <el-button type="warning">警告按钮</el-button>\n    <el-button type="danger">危险按钮</el-button>\n    <el-button type="info">信息按钮</el-button>\n  </span>\n</div>\n<div class="block">\n  <span class="demonstration">hover 显示颜色</span>\n  <span class="wrapper">\n    <el-button :plain="true" type="success">成功按钮</el-button>\n    <el-button :plain="true" type="warning">警告按钮</el-button>\n    <el-button :plain="true" type="danger">危险按钮</el-button>\n    <el-button :plain="true" type="info">信息按钮</el-button>\n  </span>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认显示颜色")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")]),a("el-button",{attrs:{type:"info"}},[s._v("信息按钮")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("hover 显示颜色")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("危险按钮")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("信息按钮")])],1)])]),a("p",[s._v("朴素按钮同样设置了不同的"),a("code",[s._v("type")]),s._v("属性对应的样式（可选值同上），默认为"),a("code",[s._v("info")]),s._v("。设置"),a("code",[s._v("plain")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("。注意，在该情况下，"),a("code",[s._v("type")]),s._v("虽然可以为"),a("code",[s._v("text")]),s._v("，但是是没有意义的，会显示为"),a("code",[s._v("text button")]),s._v("的样式。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认显示颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 显示颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。")]),a("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">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("搜索")]),a("el-button",{attrs:{type:"primary"}},[s._v("上传"),a("i",{staticClass:"el-icon-upload el-icon--right"})])],1),a("p",[s._v("设置"),a("code",[s._v("icon")]),s._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),a("code",[s._v("i")]),s._v("标签即可，可以使用自定义图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("搜索"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("上传"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("以按钮组的方式出现，常用于多项类似操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button-group>\n  <el-button type="primary" icon="arrow-left">上一页</el-button>\n  <el-button type="primary">下一页<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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("上一页")]),a("el-button",{attrs:{type:"primary"}},[s._v("下一页"),a("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("使用"),a("code",[s._v("<el-button-group>")]),s._v("标签来嵌套你的按钮。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("上一页"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("下一页"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">加载中</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("加载中")])],1),a("p",[s._v("要设置为 loading 状态，只要设置"),a("code",[s._v("loading")]),s._v("属性为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("加载中"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" size="large">大型按钮</el-button>\n<el-button type="primary">正常按钮</el-button>\n<el-button type="primary" size="small">小型按钮</el-button>\n<el-button type="primary" size="mini">超小按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("大型按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("正常按钮")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("小型按钮")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("超小按钮")])],1),a("p",[s._v("额外的尺寸："),a("code",[s._v("large")]),s._v("、"),a("code",[s._v("small")]),s._v("、"),a("code",[s._v("mini")]),s._v("，通过设置"),a("code",[s._v("size")]),s._v("属性来配置它们。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("大型按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("正常按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("小型按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("超小按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button 按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-yan-se-qing-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-yan-se-qing-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有颜色倾向")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jia-zai-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large,small,mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("primary,success,warning,danger,info,text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("是否朴素按钮")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否加载中状态")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用状态")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标，已有的图标库中的图标名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("是否默认聚焦")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("原生 type 属性")]),a("td",[s._v("string")]),a("td",[s._v("button,submit,reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(280)},function(s,t,a){function l(s){a(281)}var n=a(13)(a(283),a(284),l,"data-v-13d5050c",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(78),e=l(n);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("将信息聚合在卡片容器中展示。")]),s._m(1),l("p",[s._v("包含标题，内容和操作。")]),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;">卡片名称</span>\n    <el-button style="float: right;" type="primary">操作按钮</el-button>\n  </div>\n  <div v-for="o in 4" :key="o" class="text item">\n    {{\'列表内容 \' + 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",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("卡片名称")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("操作按钮")])],1),s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+t)+"\n  ")])})],2)],1),l("p",[s._v("Card 组件包括"),l("code",[s._v("header")]),s._v("和"),l("code",[s._v("body")]),s._v("部分，"),l("code",[s._v("header")]),s._v("部分需要有显式具名 slot 分发，同时也是可选的。")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("卡片名称"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("操作按钮"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("卡片可以只有内容区域。")]),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    {{\'列表内容 \' + 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",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{key:t,staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+t)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{
+staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("可配置定义更丰富的内容展示。")]),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>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="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() {\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",slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{key:t,attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(80)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("好吃的汉堡")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("操作按钮")])],1)])])],1)}))],1),l("p",[s._v("配置"),l("code",[s._v("body-style")]),s._v("属性来自定义"),l("code",[s._v("body")]),s._v("部分的"),l("code",[s._v("style")]),s._v("，我们还使用了布局组件。")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("好吃的汉堡"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("操作按钮"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card 卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jian-dan-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 简单卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("设置 header，也可以通过 "),a("code",[s._v("slot#header")]),s._v(" 传入 DOM")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("设置 body 的样式")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a(286)},function(s,t,a){function l(s){a(287)}var n=a(13)(a(289),a(290),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在有限空间内，循环播放同一类型的图片、文字等内容")]),s._m(1),a("p",[s._v("适用广泛的基础用法")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认 Hover 指示器触发</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">Click 指示器触发</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",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 Hover 指示器触发")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Click 指示器触发")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("结合使用"),a("code",[s._v("el-carousel")]),s._v("和"),a("code",[s._v("el-carousel-item")]),s._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),a("code",[s._v("el-carousel-item")]),s._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),a("code",[s._v("trigger")]),s._v("属性为"),a("code",[s._v("click")]),s._v("，可以达到点击触发的效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 Hover 指示器触发"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Click 指示器触发"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n     "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n     "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以将指示器的显示位置设置在容器外部")]),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",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[a("code",[s._v("indicator-position")]),s._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),a("code",[s._v("outside")]),s._v("则会显示在外部；设置为"),a("code",[s._v("none")]),s._v("则不会显示指示器。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以设置切换箭头的显示时机")]),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",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[a("code",[s._v("arrow")]),s._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),a("code",[s._v("arrow")]),s._v("设置为"),a("code",[s._v("always")]),s._v("，则会一直显示；设置为"),a("code",[s._v("never")]),s._v("，则会一直隐藏。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),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",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",{key:t},[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("将"),a("code",[s._v("type")]),s._v("属性设置为"),a("code",[s._v("card")]),s._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel-zou-ma-deng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel 走马灯")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-shi-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指示器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qie-huan-jian-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 切换箭头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("走马灯的高度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("初始状态激活的幻灯片的索引，从 0 开始")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("指示器的触发方式")]),a("td",[s._v("string")]),a("td",[s._v("click")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("是否自动切换")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("自动切换的时间间隔，单位为毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("指示器的位置")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("切换箭头的显示时机")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("走马灯的类型")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("幻灯片切换时触发")]),a("td",[s._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("手动切换幻灯片")]),a("td",[s._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),a("code",[s._v("el-carousel-item")]),s._v(" 的 "),a("code",[s._v("name")]),s._v(" 属性值")])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("切换至上一张幻灯片")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("切换至下一张幻灯片")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("幻灯片的名字，可用作 "),a("code",[s._v("setActiveItem")]),s._v(" 的参数")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(292)},function(s,t,a){function l(s){a(293)}var n=a(13)(a(295),a(296),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["zujian","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(a){s.indexOf("江苏")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"南京"}]:s.indexOf("浙江")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"杭州"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),s._m(1),a("p",[s._v("有两种触发子菜单的方式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认 click 触发子菜单</span>\n  <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">\n  </el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">hover 触发子菜单</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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 click 触发子菜单")]),a("el-cascader",{attrs:{options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions,callback:function(t){s.selectedOptions=t},expression:"selectedOptions"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("hover 触发子菜单")]),a("el-cascader",{attrs:{"expand-trigger":"hover",options:s.options},on:{change:s.handleChange},model:{value:s.selectedOptions2,callback:function(t){s.selectedOptions2=t},expression:"selectedOptions2"}})],1)]),a("p",[s._v("只需为 Cascader 的"),a("code",[s._v("options")]),s._v("属性指定选项数组即可渲染出一个级联选择器。通过"),a("code",[s._v("expand-trigger")]),s._v("可以定义展开子级菜单的触发方式。本例还展示了"),a("code",[s._v("change")]),s._v("事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 click 触发子菜单"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 触发子菜单"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{
+staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("本例中，"),a("code",[s._v("options")]),s._v("指定的数组中的第一个元素含有"),a("code",[s._v("disabled: true")]),s._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),a("code",[s._v("disabled")]),s._v("字段是否为"),a("code",[s._v("true")]),s._v("，如果你的数据中表示禁用含义的字段名不为"),a("code",[s._v("disabled")]),s._v("，可以通过"),a("code",[s._v("props")]),s._v("属性来指定（详见下方 API 表格）。当然，"),a("code",[s._v("value")]),s._v("、"),a("code",[s._v("label")]),s._v("和"),a("code",[s._v("children")]),s._v("这三个字段名也可以通过同样的方式指定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"
+},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("属性"),a("code",[s._v("show-all-levels")]),s._v("定义了是否显示完整的路径，将其赋值为"),a("code",[s._v("false")]),s._v("则仅显示最后一级")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions3: ['zujian', 'data', 'tag']\n      };\n    }\n  };\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options},model:{value:s.selectedOptions3,callback:function(t){s.selectedOptions3=t},expression:"selectedOptions3"}})],1),a("p",[s._v("默认值通过数组的方式指定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("若需要允许用户选择任意一级选项，则可将"),a("code",[s._v("change-on-select")]),s._v("赋值为"),a("code",[s._v("true")])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"
+},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("当选中某一级时，动态加载该级下的选项。")]),a("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() {\n      return {\n        options2: [{\n          label: '江苏',\n          cities: []\n        }, {\n          label: '浙江',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: '南京'\n            }];\n          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: '杭州'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("本例的选项数据源在初始化时不包含城市数据。利用"),a("code",[s._v("active-item-change")]),s._v("事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了"),a("code",[s._v("props")]),s._v("属性的用法。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江苏'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'浙江'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n        }\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleItemChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'江苏'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v("\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'浙江'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'杭州'")]),s._v("\n            }];\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以快捷地搜索选项并选择。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">只可选择最后一级菜单的选项</span>\n  <el-cascader placeholder="试试搜索：指南" :options="options" filterable></el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">可选择任意一级菜单的选项</span>\n  <el-cascader placeholder="试试搜索：指南" :options="options" filterable="" change-on-select></el-cascader>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("只可选择最后一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("可选择任意一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("将"),a("code",[s._v("filterable")]),s._v("赋值为"),a("code",[s._v("true")]),s._v("即可打开搜索功能。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("只可选择最后一级菜单的选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("可选择任意一级菜单的选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"
+},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader 级联选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过在数据源中设置 "),a("code",[s._v("disabled")]),s._v(" 字段来声明该选项是禁用的")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅显示最后一级")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择即改变")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态加载次级选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("可选项数据源，键名可通过 "),a("code",[s._v("props")]),s._v(" 属性配置")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体见下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("选中项绑定值")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("自定义浮层类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否支持清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("次级菜单的展开方式")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("输入框中是否显示选中值的完整路径")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("搜索关键词输入的去抖延迟，毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("是否允许选择任意一级的选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("指定选项的值为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定选项标签为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定选项的子选项为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("指定选项的禁用为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("当前值")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("当父级选项变化时触发的事件，仅在 "),a("code",[s._v("change-on-select")]),s._v(" 为 "),a("code",[s._v("false")]),s._v(" 时可用")]),a("td",[s._v("各父级选项组成的数组")])])])])}]}},function(s,t,a){s.exports=a(298)},function(s,t,a){function l(s){a(299)}var n=a(13)(a(301),a(302),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";var a=["上海","北京","广州","深圳"];s.exports={data:function(){return{checkList:["选中且禁用","复选框 A"],checked:!0,checked1:!1,checked2:!0,isValid:"可用",checkAll:!1,cities:a,checkedCities:["上海","北京"],checkedCities1:["上海","北京"],isIndeterminate:!0,checkboxGroup1:["上海"],checkboxGroup2:["北京"],checkboxGroup3:["广州"]}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s.target.checked?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t<this.cities.length}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("一组备选项中进行多选")]),s._m(1),a("p",[s._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <!-- `checked` 为 true 或 false -->\n  <el-checkbox v-model="checked">备选项</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",slot:"source"},[[a("el-checkbox",{model:{value:s.checked,callback:function(t){s.checked=t},expression:"checked"}},[s._v("备选项")])]],2),a("p",[s._v("在"),a("code",[s._v("el-checkbox")]),s._v("元素中定义"),a("code",[s._v("v-model")]),s._v("绑定变量，单一的"),a("code",[s._v("checkbox")]),s._v("中，默认绑定变量的值会是"),a("code",[s._v("Boolean")]),s._v("，选中为"),a("code",[s._v("true")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` 为 true 或 false -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("多选框不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</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",slot:"source"},[[a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked1,callback:function(t){s.checked1=t},expression:"checked1"}},[s._v("备选项1")]),a("el-checkbox",{attrs:{disabled:""},model:{value:s.checked2,callback:function(t){s.checked2=t},expression:"checked2"}},[s._v("备选项")])]],2),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),a("demo-block",{
+staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="复选框 A"></el-checkbox>\n    <el-checkbox label="复选框 B"></el-checkbox>\n    <el-checkbox label="复选框 C"></el-checkbox>\n    <el-checkbox label="禁用" disabled></el-checkbox>\n    <el-checkbox label="选中且禁用" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        checkList: ['选中且禁用','复选框 A']\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{model:{value:s.checkList,callback:function(t){s.checkList=t},expression:"checkList"}},[a("el-checkbox",{attrs:{label:"复选框 A"}}),a("el-checkbox",{attrs:{label:"复选框 B"}}),a("el-checkbox",{attrs:{label:"复选框 C"}}),a("el-checkbox",{attrs:{label:"禁用",disabled:""}}),a("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),a("code",[s._v("v-model")]),s._v("绑定"),a("code",[s._v("Array")]),s._v("类型的变量即可。 "),a("code",[s._v("el-checkbox")]),s._v(" 的 "),a("code",[s._v("label")]),s._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),a("code",[s._v("label")]),s._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 B"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'选中且禁用'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'复选框 A'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</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  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkAll: true,\n        checkedCities: ['上海', '北京'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(event) {\n        this.checkedCities = event.target.checked ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let 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",slot:"source"},[[a("el-checkbox",{attrs:{indeterminate:s.isIndeterminate},on:{change:s.handleCheckAllChange},model:{value:s.checkAll,callback:function(t){s.checkAll=t},expression:"checkAll"}},[s._v("全选")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{on:{change:s.handleCheckedCitiesChange},model:{value:s.checkedCities,callback:function(t){s.checkedCities=t},expression:"checkedCities"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("全选"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n        "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckAllChange(event) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      handleCheckedCitiesChange(value) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._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  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{attrs:{min:1,max:2},model:{value:s.checkedCities1,callback:function(t){s.checkedCities1=t},expression:"checkedCities1"}},s._l(s.cities,function(t){return a("el-checkbox",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("按钮样式的多选组合。")]),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 === \'深圳\'" :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  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data () {\n      return {\n        checkboxGroup1: ['上海'],\n        checkboxGroup2: ['北京'],\n        checkboxGroup3: ['广州'],\n        cities: cityOptions\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{model:{value:s.checkboxGroup1,callback:function(t){s.checkboxGroup1=t},expression:"checkboxGroup1"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"small"},model:{value:s.checkboxGroup2,callback:function(t){s.checkboxGroup2=t},expression:"checkboxGroup2"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t,disabled:"深圳"===t}},[s._v(s._s(t))])})),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{attrs:{size:"large",fill:"#324057","text-color":"#a4aebd",min:1,max:3},model:{value:s.checkboxGroup3,callback:function(t){s.checkboxGroup3=t},expression:"checkboxGroup3"}},s._l(s.cities,function(t){return a("el-checkbox-button",{key:t,attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("p",[s._v("只需要把"),a("code",[s._v("el-checkbox")]),s._v("元素替换为"),a("code",[s._v("el-checkbox-button")]),s._v("元素即可。此外，Element 还提供了"),a("code",[s._v("size")]),s._v("属性，支持"),a("code",[s._v("large")]),s._v("和"),a("code",[s._v("small")]),s._v("两种。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"city === '深圳'\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkboxGroup3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("fill")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#324057"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#a4aebd"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup2")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkboxGroup3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox 多选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" indeterminate 状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("indeterminate")]),s._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选项目数量的限制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("min")]),s._v(" 和 "),a("code",[s._v("max")]),s._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选中状态的值（只有在"),a("code",[s._v("checkbox-group")]),s._v("或者绑定对象类型为"),a("code",[s._v("array")]),s._v("时有效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("选中时的值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("没有选中时的值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("按钮禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("当前是否勾选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("设置 indeterminate 状态，只负责样式控制")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("Checkbox 按钮组尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("可被勾选的 checkbox 的最大数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("可被勾选的 checkbox 的最小数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("event 事件对象")])])])])}]}},function(s,t,a){s.exports=a(304)},function(s,t,a){function l(s){a(305)}var n=a(13)(a(307),a(308),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过折叠面板收纳内容区域")]),s._m(1),a("p",[s._v("可同时展开多个面板，面板之间不影响")]),a("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>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{on:{change:s.handleChange},model:{value:s.activeNames,callback:function(t){s.activeNames=t},expression:"activeNames"}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{
+attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每次只能展开一个面板")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("p",[s._v("通过 "),a("code",[s._v("accordion")]),s._v(" 属性来设置是否以手风琴模式显示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse accordion>\n  <el-collapse-item>\n    <template slot="title">\n      一致性 Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",[a("template",{slot:"title"},[s._v("\n      一致性 Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),a("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n      一致性 Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse 折叠面板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义面板标题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("除了可以通过 "),a("code",[s._v("title")]),s._v(" 属性以外，还可以通过具名 "),a("code",[s._v("slot")]),s._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否手风琴模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),a("code",[s._v("string")]),s._v("，否则为"),a("code",[s._v("array")]),s._v(")")]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),a("code",[s._v("activeNames")]),s._v(" 类型为"),a("code",[s._v("string")]),s._v("，否则为"),a("code",[s._v("array")]),s._v(")")]),a("td",[s._v("(activeNames: array|string)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("唯一标志符")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("面板标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(310)},function(s,t,a){function l(s){a(311)}var n=a(13)(a(313),a(314),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于颜色选择，支持多种格式。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">有默认值</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">无默认值</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color1: '#20a0ff',\n        color2: null\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("有默认值")]),a("el-color-picker",{model:{value:s.color1,callback:function(t){s.color1=t},expression:"color1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("无默认值")]),a("el-color-picker",{model:{value:s.color2,callback:function(t){s.color2=t},expression:"color2"}})],1)]),a("p",[s._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("有默认值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("无默认值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.color3,callback:function(t){s.color3=t},expression:"color3"}})],1),a("p",[s._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),a("code",[s._v("show-alpha")]),s._v("属性即可控制是否支持透明度的选择。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker 颜色选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择透明度")])},function(){
+var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("是否支持透明度选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("写入 v-model 的颜色的格式")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发")]),a("td",[s._v("当前值")])])])])}]}},function(s,t,a){s.exports=a(316)},function(s,t,a){function l(s){a(317)}var n=a(13)(null,a(319),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),s._m(1),a("p",[s._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color-se-cai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color 色彩")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhong-xing-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中性色")])}]}},function(s,t,a){s.exports=a(321)},function(s,t,a){var l=a(13)(null,a(322),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义主题")]),a("p",[s._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法。")]),a("h2",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅替换主题色")]),a("p",[s._v("如果仅希望更换 Element 的主题色，推荐使用"),a("a",{attrs:{href:"https://elementui.github.io/theme-preview"}},[s._v("在线主题生成工具")]),s._v("。")]),a("p",[s._v("Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),a("p",[s._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),a("p",[s._v("如果希望进行除主题色之外的样式定制，请继续阅读。")]),a("h2",{attrs:{id:"shen-ceng-ci-de-ding-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shen-ceng-ci-de-ding-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 深层次的定制")]),a("p",[s._v("如果仅仅改变主题色不能满足你的需求，请按以下步骤进行更深层次的主题定制：")]),a("h3",{attrs:{id:"an-zhuang-gong-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 安装工具")]),a("p",[s._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# 从 npm\nnpm i element-theme-default -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 初始化变量文件")]),a("p",[s._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),a("code",[s._v("et")]),s._v(" 调用工具，如果安装在当前目录下，需要通过 "),a("code",[s._v("node_modules/.bin/et")]),s._v(" 访问到命令。执行 "),a("code",[s._v("-i")]),s._v(" 初始化变量文件。默认输出到 "),a("code",[s._v("element-variables.css")]),s._v("，当然你可以传参数指定文件输出目录。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("如果使用默认配置，执行后当前目录会有一个 "),a("code",[s._v("element-variables.css")]),s._v(" 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下：")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n  "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n  -------------------------- */")]),s._v("\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"xiu-gai-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修改变量")]),a("p",[s._v("直接编辑 "),a("code",[s._v("element-variables.css")]),s._v(" 文件，例如修改主题色为红色。")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"bian-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 编译主题")]),a("p",[s._v("保存文件后，到命令行里执行 "),a("code",[s._v("et")]),s._v(" 编译主题，如果你想启用 "),a("code",[s._v("watch")]),s._v(" 模式，实时编译主题，增加 "),a("code",[s._v("-w")]),s._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),a("code",[s._v("-c")]),s._v(" 参数，并带上你的变量文件名")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入自定义主题")]),a("p",[s._v("默认情况下编译的主题目录是放在 "),a("code",[s._v("./theme")]),s._v(" 下，你可以通过 "),a("code",[s._v("-o")]),s._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),a("code",[s._v("theme/index.css")]),s._v(" 文件即可。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 搭配插件按需引入组件主题")]),a("p",[s._v("如果是搭配 "),a("code",[s._v("babel-plugin-component")]),s._v(" 一起使用，只需要修改 "),a("code",[s._v(".babelrc")]),s._v(" 的配置，指定 "),a("code",[s._v("styleLibraryName")]),s._v(" 路径为自定义主题相对于 "),a("code",[s._v(".babelrc")]),s._v(" 的路径，注意要加 "),a("code",[s._v("~")]),s._v("。")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("如果不清楚 "),a("code",[s._v("babel-plugin-component")]),s._v(" 是什么，请阅读 "),a("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[s._v("快速上手")]),s._v(" 一节。更多 "),a("code",[s._v("element-theme")]),s._v(" 用法请参考"),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("项目仓库")]),s._v("。")])])}]}},function(s,t,a){s.exports=a(324)},function(s,t,a){function l(s){a(325)}var n=a(13)(a(327),a(328),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{pickerOptions0:{disabledDate:function(s){return s.getTime()<Date.now()-864e5}},pickerOptions1:{disabledDate:function(s){return s.getTime()<Date.now()-864e5},shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于选择或输入日期")]),s._m(1),a("p",[s._v("以「日」为基本单位，基础的日期选择控件")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions0: {\n          disabledDate(time) {\n            return time.getTime() < Date.now() - 8.64e7;\n          }\n        },\n        pickerOptions1: {\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"date",placeholder:"选择日期","picker-options":s.pickerOptions0},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("基本单位由"),a("code",[s._v("type")]),s._v("属性指定。快捷选项需配置"),a("code",[s._v("picker-options")]),s._v("对象中的"),a("code",[s._v("shortcuts")]),s._v("，禁用日期通过 "),a("code",[s._v("disabledDate")]),s._v(" 设置，传入函数")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions0")]),s._v(": {\n          disabledDate(time) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" time.getTime() < "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now() - "),a("span",{staticClass:"hljs-number"},[s._v("8.64e7")]),s._v(";\n          }\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("通过扩展基础的日期选择，可以选择周、月、年")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">周</span>\n  <el-date-picker v-model="value3" type="week" format="yyyy 第 WW 周" placeholder="选择周">\n  </el-date-picker>\n</div>\n<div class="block">\n  <span class="demonstration">月</span>\n  <el-date-picker v-model="value4" type="month" placeholder="选择月">\n  </el-date-picker>\n</div>\n<div class="block">\n  <span class="demonstration">年</span>\n  <el-date-picker v-model="value5" align="right" type="year" placeholder="选择年">\n  </el-date-picker>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: '',\n        value4: '',\n        value5: ''\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("周")]),a("el-date-picker",{attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("月")]),a("el-date-picker",{attrs:{type:"month",placeholder:"选择月"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("年")]),a("el-date-picker",{attrs:{align:"right",type:"year",placeholder:"选择年"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("周"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"yyyy 第 WW 周"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择周"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("月"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择月"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("年"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择年"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可在一个选择器中便捷地选择一个时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value6" type="daterange" placeholder="选择日期范围">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value7" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"daterange",placeholder:"选择日期范围"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"daterange",align:"right",placeholder:"选择日期范围","picker-options":s.pickerOptions2},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期范围"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期范围"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一周'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近三个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker 日期选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其他日期单位")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日期范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间日期格式化")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",[s._v("yyyy")]),s._v("，月 "),a("code",[s._v("MM")]),s._v("，日 "),a("code",[s._v("dd")]),s._v("，小时 "),a("code",[s._v("HH")]),s._v("，分 "),a("code",[s._v("mm")]),s._v("，秒 "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DatePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])]),a("tr",[a("td",[s._v("default-value")]),a("td",[s._v("可选，DatePicker打开时默认显示的时间")]),a("td",[s._v("Date")]),a("td",[s._v("可被new Date()解析")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("周起始日")]),a("td",[s._v("Number")]),a("td",[s._v("1 到 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("选中日期后会执行的回调，只有当 "),a("code",[s._v("daterange")]),s._v(" 或 "),a("code",[s._v("datetimerange")]),s._v(" 才生效")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("格式化后的值")])])])])}]}},function(s,t,a){s.exports=a(330)},function(s,t,a){function l(s){a(331)}var n=a(13)(a(333),a(334),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在同一个选择器里选择日期和时间")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":s.pickerOptions1},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("datetime")]),s._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期时间"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期时间"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value3" type="datetimerange" placeholder="选择时间范围">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{attrs:{type:"datetimerange",placeholder:"选择时间范围"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"选择时间范围",align:"right"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("type")]),s._v("为"),a("code",[s._v("datetimerange")]),s._v("即可选择日期和时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一周'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"
+},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近三个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker 日期时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间日期格式化")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",[s._v("yyyy")]),s._v("，月 "),a("code",[s._v("MM")]),s._v("，日 "),a("code",[s._v("dd")]),s._v("，小时 "),a("code",[s._v("HH")]),s._v("，分 "),a("code",[s._v("mm")]),s._v("，秒 "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DateTimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(336)},function(s,t,a){function l(s){a(337)}var n=a(13)(a(339),a(340),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px"}},methods:{openDialog:function(){this.$refs.dialogBind.open()},handleClose:function(s){this.$confirm("确认关闭？").then(function(t){s()}).catch(function(s){})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),s._m(1),a("p",[s._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog title="提示" v-model="dialogVisible" size="tiny" :before-close="handleClose">\n  <span>这是一段信息</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleClose(done) {\n        this.$confirm('确认关闭？')\n          .then(_ => {\n            done();\n          })\n          .catch(_ => {});\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("el-dialog",{attrs:{title:"提示",size:"tiny","before-close":s.handleClose},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("span",[s._v("这是一段信息")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("确 定")])],1)])],1),a("p",[s._v("需要设置"),a("code",[s._v("v-model")]),s._v("属性，它接收"),a("code",[s._v("Boolean")]),s._v("，当为"),a("code",[s._v("true")]),s._v("时显示 Dialog。Dialog 分为两个部分："),a("code",[s._v("body")]),s._v("和"),a("code",[s._v("footer")]),s._v("，"),a("code",[s._v("footer")]),s._v("需要具名为"),a("code",[s._v("footer")]),s._v("的"),a("code",[s._v("slot")]),s._v("。"),a("code",[s._v("title")]),s._v("属性用于定义标题，它是可选的，默认值为空。本例通过显式改变"),a("code",[s._v("v-model")]),s._v("的值来打开 Dialog，此外我们还为 Dialog 实例提供了"),a("code",[s._v("open")]),s._v("和"),a("code",[s._v("close")]),s._v("方法，可以通过调用它们来打开/关闭 Dialog。最后，本例还展示了"),a("code",[s._v("beforeClose")]),s._v("的用法。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("点击打开 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"提示"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("这是一段信息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(done) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'确认关闭？'")]),s._v(")\n          .then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n            done();\n          })\n          .catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {});\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="日期" width="150"></el-table-column>\n    <el-table-column property="name" label="姓名" width="200"></el-table-column>\n    <el-table-column property="address" label="地址"></el-table-column>\n  </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="活动名称" :label-width="formLabelWidth">\n      <el-input v-model="form.name" auto-complete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="活动区域" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="请选择活动区域">\n        <el-option label="区域一" value="shanghai"></el-option>\n        <el-option label="区域二" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n  </div>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("打开嵌套表格的 Dialog")]),a("el-dialog",{attrs:{title:"收货地址"},model:{value:s.dialogTableVisible,callback:function(t){s.dialogTableVisible=t},expression:"dialogTableVisible"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("打开嵌套表单的 Dialog")]),a("el-dialog",{attrs:{title:"收货地址"},model:{value:s.dialogFormVisible,callback:function(t){s.dialogFormVisible=t},expression:"dialogFormVisible"}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"活动名称","label-width":s.formLabelWidth}},[a("el-input",{attrs:{"auto-complete":"off"},model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"活动区域","label-width":s.formLabelWidth}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),a("div",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("确 定")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- Table -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("打开嵌套表格的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- Form -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("打开嵌套表单的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog 对话框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("Dialog 的大小")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("Dialog CSS 中的 top 值（仅在 size 不为 full 时有效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("是否需要遮罩层")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("是否在 Dialog 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("Dialog 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("是否可以通过点击 modal 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("是否可以通过按下 ESC 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("before-close")]),a("td",[s._v("关闭前的回调，会暂停 Dialog 的关闭")]),a("td",[s._v("function(done)，done 用于关闭 Dialog")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Dialog 的内容")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 标题区的内容")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("Dialog 按钮操作区的内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("每个 "),a("code",[s._v("el-dialog")]),s._v(" 实例都暴露了如下方法，用于在不显式改变 "),a("code",[s._v("v-model")]),s._v(" 值的情况下打开 / 关闭实例：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("打开当前实例")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前实例")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("Dialog 关闭的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("Dialog 打开的回调")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(342)},function(s,t,a){function l(s){a(343)}var n=a(13)(a(345),a(346),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("将动作或菜单折叠到下拉菜单中。")]),s._m(1),a("p",[s._v("移动到下拉菜单上，展开更多操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("通过组件"),a("code",[s._v("slot")]),s._v("来设置下拉触发的元素以及需要通过具名"),a("code",[s._v("slot")]),s._v("为"),a("code",[s._v("dropdown")]),s._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),a("code",[s._v("hover")]),s._v("即可，无需点击也会显示下拉菜单。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可使用按钮触发下拉菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <el-button type="primary">\n    更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n    更多菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n  更多菜单\n  "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("设置"),a("code",[s._v("split-button")]),s._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n    更多菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n  更多菜单\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("p",[s._v("可以配置 click 激活或者 hover 激活。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover 激活")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click 激活")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1)],1)],1),a("p",[s._v("在"),a("code",[s._v("trigger")]),s._v("属性设置为"),a("code",[s._v("click")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("下拉菜单默认在点击菜单项后会被隐藏，将"),a("code",[s._v("hide-on-click")]),s._v("属性默认为"),a("code",[s._v("false")]),s._v("可以关闭此功能。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),a("demo-block",{
+staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:"\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("黄金糕")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("狮子头")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown 下拉菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-dui-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发对象")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 菜单隐藏方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以"),a("code",[s._v("hide-on-click")]),s._v("属性来配置。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-ling-shi-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指令事件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("菜单按钮类型，同 Button 组件(只在"),a("code",[s._v("split-button")]),s._v("为 true 的情况下有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("菜单按钮尺寸，同 Button 组件(只在"),a("code",[s._v("split-button")]),s._v("为 true 的情况下有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("下拉触发元素呈现为按钮组")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("菜单水平对齐方向")]),a("td",[s._v("string")]),a("td",[s._v("start, end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发下拉的行为")]),a("td",[s._v("string")]),a("td",[s._v("hover, click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("是否在点击菜单项后隐藏菜单")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[a("code",[s._v("split-button")]),s._v(" 为 true 时，点击左侧按钮的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("点击菜单项触发的事件回调")]),a("td",[s._v("dropdown-item 的指令")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("指令")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("显示分割线")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(348)},function(s,t,a){function l(s){a(349)}var n=a(13)(a(351),a(352),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("必须年满18岁")):a():a(new Error("请输入数字值"))},1e3):a(new Error("年龄不能为空"))},a=function(t,a,l){""===a?l(new Error("请输入密码")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("请再次输入密码")):a!==s.ruleForm2.pass?l(new Error("两次输入密码不一致!")):l()};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",rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{value:"",key:Date.now()}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},submitForm:function(s){this.$refs[s].validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),s._m(1),a("p",[s._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="form" label-width="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" 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="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch on-text="" off-text v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\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">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\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() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"80px"}},[a("el-form-item",{attrs:{label:"活动名称"}},[a("el-input",{model:{value:s.form.name,callback:function(t){s.form.name=t},expression:"form.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.form.region,callback:function(t){s.form.region=t},expression:"form.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:s.form.date1,callback:function(t){s.form.date1=t},expression:"form.date1"}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:s.form.date2,callback:function(t){s.form.date2=t},expression:"form.date2"}})],1)],1),a("el-form-item",{attrs:{label:"即时配送"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.form.delivery,callback:function(t){s.form.delivery=t},expression:"form.delivery"}})],1),a("el-form-item",{attrs:{label:"活动性质"}},[a("el-checkbox-group",{model:{value:s.form.type,callback:function(t){s.form.type=t},expression:"form.type"}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源"}},[a("el-radio-group",{model:{value:s.form.resource,callback:function(t){s.form.resource=t},expression:"form.resource"}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.form.desc,callback:function(t){s.form.desc=t},expression:"form.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("立即创建")]),a("el-button",[s._v("取消")])],1)],1)],1),a("p",[s._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"80px"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"即时配送"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"特殊资源"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("立即创建"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("取消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="审批人">\n    <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="formInline.region" placeholder="活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item><el-form-item>\n    <el-button type="primary" @click="onSubmit">查询</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"审批人"}},[a("el-input",{attrs:{placeholder:"审批人"},model:{value:s.formInline.user,callback:function(t){s.formInline.user=t},expression:"formInline.user"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{attrs:{placeholder:"活动区域"},model:{value:s.formInline.region,callback:function(t){s.formInline.region=t},expression:"formInline.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("查询")])],1)],1)],1),a("p",[s._v("设置 "),a("code",[s._v("inline")]),s._v(" 属性可以让表单域变为行内的表单域")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"审批人"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"审批人"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("查询"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">左对齐</el-radio-button>\n  <el-radio-button label="right">右对齐</el-radio-button>\n  <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <el-form-item label="名称">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{attrs:{size:"small"},model:{value:s.labelPosition,callback:function(t){s.labelPosition=t},expression:"labelPosition"}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("左对齐")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("右对齐")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("顶部对齐")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"80px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"名称"}},[a("el-input",{model:{value:s.formLabelAlign.name,callback:function(t){s.formLabelAlign.name=t},expression:"formLabelAlign.name"}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-input",{model:{value:s.formLabelAlign.region,callback:function(t){s.formLabelAlign.region=t},expression:"formLabelAlign.region"}})],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{model:{value:s.formLabelAlign.type,callback:function(t){s.formLabelAlign.type=t},expression:"formLabelAlign.type"}})],1)],1)],1),a("p",[s._v("通过设置 "),a("code",[s._v("label-position")]),s._v(" 属性可以改变表单域标签的位置，可选值为 "),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("，当设为 "),a("code",[s._v("top")]),s._v(" 时标签会置于表单域的顶部")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("左对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("右对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("顶部对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"80px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"名称"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="活动名称" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="选择日期" 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="选择时间" 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="即时配送" prop="delivery">\n    <el-switch on-text="" off-text v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式" 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\')">立即创建</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\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: '请输入活动名称', trigger: 'blur' },\n            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: '请选择活动区域', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: '请选择活动资源', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: '请填写活动形式', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[a("el-input",{model:{value:s.ruleForm.name,callback:function(t){s.ruleForm.name=t},expression:"ruleForm.name"}})],1),a("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[a("el-select",{attrs:{placeholder:"请选择活动区域"},model:{value:s.ruleForm.region,callback:function(t){s.ruleForm.region=t},expression:"ruleForm.region"}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},model:{value:s.ruleForm.date1,callback:function(t){s.ruleForm.date1=t},expression:"ruleForm.date1"}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},model:{value:s.ruleForm.date2,callback:function(t){s.ruleForm.date2=t},expression:"ruleForm.date2"}})],1)],1)],1),a("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.ruleForm.delivery,callback:function(t){s.ruleForm.delivery=t},expression:"ruleForm.delivery"}})],1),a("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[a("el-checkbox-group",{model:{value:s.ruleForm.type,callback:function(t){s.ruleForm.type=t},expression:"ruleForm.type"}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[a("el-radio-group",{model:{value:s.ruleForm.resource,callback:function(t){s.ruleForm.resource=t},expression:"ruleForm.resource"}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[a("el-input",{attrs:{type:"textarea"},model:{value:s.ruleForm.desc,callback:function(t){s.ruleForm.desc=t},expression:"ruleForm.desc"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("立即创建")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("Form 组件提供了表单验证的功能，只需要通过 "),a("code",[s._v("rule")]),s._v(" 属性传入约定的验证规则，并 Form-Item 的 "),a("code",[s._v("prop")]),s._v(" 属性设置为需校验的字段名即可。校验规则参见 "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"即时配送"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"特殊资源"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("立即创建"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请输入活动名称'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'长度在 3 到 5 个字符'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择活动区域'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择日期'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择时间'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请至少选择一个活动性质'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择活动资源'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请填写活动形式'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="密码" 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="确认密码" 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="年龄" 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\')">提交</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('年龄不能为空'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('请输入数字值'));\n          } else {\n            if (value < 18) {\n              callback(new Error('必须年满18岁'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请输入密码'));\n        } else {\n          if (this.ruleForm2.checkPass !== '') {\n            this.$refs.ruleForm2.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请再次输入密码'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error('两次输入密码不一致!'));\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(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"密码",prop:"pass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.pass,callback:function(t){s.ruleForm2.pass=t},expression:"ruleForm2.pass"}})],1),a("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[a("el-input",{attrs:{type:"password","auto-complete":"off"},model:{value:s.ruleForm2.checkPass,callback:function(t){s.ruleForm2.checkPass=t},expression:"ruleForm2.checkPass"}})],1),a("el-form-item",{attrs:{label:"年龄",prop:"age"}},[a("el-input",{model:{value:s.ruleForm2.age,callback:function(t){s.ruleForm2.age=s._n(t)},expression:"ruleForm2.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"确认密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"年龄"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'年龄不能为空'")]),s._v("));\n        }\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请输入数字值'")]),s._v("));\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'必须年满18岁'")]),s._v("));\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请输入密码'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请再次输入密码'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'两次输入密码不一致!'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n  <el-form-item prop="email" label="邮箱" :rules="[\n      { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n      { type: \'email\', message: \'请输入正确的邮箱地址\', 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="\'域名\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n      required: true, message: \'域名不能为空\', trigger: \'blur\'\n    }">\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n    <el-button @click="addDomain">新增域名</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',
+script:"\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item)\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1)\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          value: '',\n          key: Date.now()\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:"blur,change"}]}},[a("el-input",{model:{value:s.dynamicValidateForm.email,callback:function(t){s.dynamicValidateForm.email=t},expression:"dynamicValidateForm.email"}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"域名"+l,prop:"domains."+l+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{model:{value:t.value,callback:function(s){t.value=s},expression:"domain.value"}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("删除")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("提交")]),a("el-button",{on:{click:s.addDomain}},[s._v("新增域名")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("重置")])],1)],2)],1),a("p",[s._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮箱"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: '请输入邮箱地址', trigger: 'blur' },\n      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'域名' + index\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      required: true, message: '域名不能为空', trigger: 'blur'\n    }\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("新增域名"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n          }],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item)\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(")\n        }\n      },\n      addDomain() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now()\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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="年龄" prop="age" :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\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\')">提交</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[a("el-input",{attrs:{type:"age","auto-complete":"off"},model:{value:s.numberValidateForm.age,callback:function(t){s.numberValidateForm.age=s._n(t)},expression:"numberValidateForm.age"}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("数字类型的验证需要在 "),a("code",[s._v("v-model")]),s._v(" 处加上 "),a("code",[s._v(".number")]),s._v(" 的修饰符，这是 "),a("code",[s._v("Vue")]),s._v(" 自身提供的用于将绑定值转化为 "),a("code",[s._v("number")]),s._v(" 类型的修饰符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"年龄"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: '年龄不能为空'},\n      { type: 'number', message: '年龄必须为数字值'}\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form 表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-xing-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 典型表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xing-nei-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 行内表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-dan-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表单验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义校验规则")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减表单项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数字类型验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("表单数据对象")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("行内表单模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("表单域标签的位置")]),a("td",[s._v("string")]),a("td",[s._v("right/left/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("表单域标签的后缀")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("对整个表单进行校验的方法")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("对部分表单字段进行校验的方法")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("表单域 model 字段")]),a("td",[s._v("string")]),a("td",[s._v("传入 Form 组件的 "),a("code",[s._v("model")]),s._v(" 中的字段")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("标签文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的的宽度，例如 '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("是否必填，如不设置，则会根据校验规则自动生成")]),a("td",[s._v("bolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),a("code",[s._v("error")]),s._v("，并显示该错误信息")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(354)},function(s,t,a){var l=a(13)(a(355),a(356),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(132);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("组件说明文档")])])}]}},function(s,t,a){s.exports=a(358)},function(s,t,a){function l(s){a(359)}var n=a(13)(null,a(361),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"guo-ji-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 国际化")]),a("p",[s._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-comment"},[s._v("// 完整引入 Element")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("或")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-comment"},[s._v("// 按需引入 Element")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 设置语言")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 引入组件")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),a("h2",{attrs:{id:"jian-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",[s._v("vue-i18n@5.x")])]),a("p",[s._v("Element 兼容 "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n@5.x")]),s._v("，搭配使用能更方便地实现多语言切换。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"jian-rong-qi-ta-i18n-cha-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容其他 i18n 插件")]),a("p",[s._v("如果不使用 "),a("code",[s._v("vue-i18n@5.x")]),s._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n  }\n})\n")])]),a("h2",{attrs:{id:"jian-rong-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",[s._v("vue-i18n@6.x")])]),a("p",[s._v("默认不支持 6.x 的 "),a("code",[s._v("vue-i18n")]),s._v("，你需要手动处理。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{
+staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" messages = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("en")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'hello'")]),s._v(",\n    ...enLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// 或者用 Object.assign({ message: 'hello' }, enLocale)")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("zh")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你好'")]),s._v(",\n    ...zhLocale "),a("span",{staticClass:"hljs-comment"},[s._v("// 或者用 Object.assign({ message: '你好' }, zhLocale)")]),s._v("\n  }\n}\n"),a("span",{staticClass:"hljs-comment"},[s._v("// Create VueI18n instance with options")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" i18n = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" VueI18n({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("locale")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale")]),s._v("\n  messages, "),a("span",{staticClass:"hljs-comment"},[s._v("// set locale messages")]),s._v("\n})\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("key")]),s._v(" =>")]),s._v(" i18n.vm._t(key)\n})\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({ i18n }).$mount("),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(")\n")])]),a("h2",{attrs:{id:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 通过 CDN 的方式加载语言文件")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("搭配 "),a("code",[s._v("vue-i18n")]),s._v(" 使用")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("目前 Element 内置了以下语言：")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("简体中文（zh-CN）")]),a("li",[s._v("英语（en）")]),a("li",[s._v("德语（de）")]),a("li",[s._v("葡萄牙语（pt）")]),a("li",[s._v("西班牙语（es）")]),a("li",[s._v("丹麦语（da）")]),a("li",[s._v("法语（fr）")]),a("li",[s._v("挪威语（nb-NO）")]),a("li",[s._v("繁体中文（zh-TW）")]),a("li",[s._v("意大利语（it）")]),a("li",[s._v("韩语（ko）")]),a("li",[s._v("日语（ja）")]),a("li",[s._v("荷兰语（nl）")]),a("li",[s._v("越南语（vi）")]),a("li",[s._v("俄语（ru-RU）")]),a("li",[s._v("土耳其语（tr-TR）")]),a("li",[s._v("巴西葡萄牙语（pt-br）")]),a("li",[s._v("波斯语（fa）")]),a("li",[s._v("泰语（th）")]),a("li",[s._v("印尼语（id）")]),a("li",[s._v("保加利亚语（bg）")]),a("li",[s._v("波兰语（pl）")]),a("li",[s._v("芬兰语（fi）")]),a("li",[s._v("瑞典语（sv-SE）")]),a("li",[s._v("希腊语（el）")]),a("li",[s._v("斯洛伐克语（sk）")]),a("li",[s._v("加泰罗尼亚语（ca）")]),a("li",[s._v("捷克语（cz）")]),a("li",[s._v("乌克兰语（ua）")]),a("li",[s._v("土库曼语（tk）")])]),a("p",[s._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("这里")]),s._v(" 添加一个语言配置文件即可。")])])}]}},function(s,t,a){s.exports=a(363)},function(s,t,a){function l(s){a(364)}var n=a(13)(a(366),a(367),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(140);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("提供了一套常用的图标集合。")]),s._m(1),s._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">搜索</el-button>\n\n',script:null,style:null}}},[a("div",{staticClass:"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"}},[s._v("搜索")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("搜索"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",{key:t},[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n      "+s._s("el-icon-"+t)+"\n    ")])])}))],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon-tu-biao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon 图标")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-yong-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("直接通过设置类名为 "),a("code",[s._v("el-icon-iconName")]),s._v(" 来使用即可。例如：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-ji-he"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标集合")])}]}},function(s,t,a){s.exports=a(369)},function(s,t,a){function l(s){a(370)}var n=a(13)(a(372),a(373),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("仅允许输入标准的数字值，可定义范围")]),s._m(1),a("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() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{min:1,max:10},on:{change:s.handleChange},model:{value:s.num1,callback:function(t){s.num1=t},expression:"num1"}})]],2),a("p",[s._v("要使用它，只需要在"),a("code",[s._v("el-input-number")]),s._v("元素中使用"),a("code",[s._v("v-model")]),s._v("绑定变量即可，变量的初始值即为默认值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        num2: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{disabled:!0},model:{value:s.num2,callback:function(t){s.num2=t},expression:"num2"}})]],2),a("p",[a("code",[s._v("disabled")]),s._v("属性接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),a("code",[s._v("min")]),s._v("属性和"),a("code",[s._v("max")]),s._v("属性，不设置"),a("code",[s._v("min")]),s._v("和"),a("code",[s._v("max")]),s._v("时，最小值为 0。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("允许定义递增递减的步数控制")]),a("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() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{step:2},model:{value:s.num3,callback:function(t){s.num3=t},expression:"num3"}})]],2),a("p",[s._v("设置"),a("code",[s._v("step")]),s._v("属性可以控制步长，接受一个"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{attrs:{size:"large"},model:{value:s.num4,callback:function(t){s.num4=t},expression:"num4"}}),a("el-input-number",{model:{value:s.num5,callback:function(t){s.num5=t},expression:"num5"}}),a("el-input-number",{attrs:{size:"small"},model:{value:s.num6,callback:function(t){s.num6=t},expression:"num6"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber 计数器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-shu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 步数")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("额外提供了 "),a("code",[s._v("large")]),s._v("、"),a("code",[s._v("small")]),s._v(" 两种尺寸的数字输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("设置计数器允许的最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("设置计数器允许的最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("Infinity")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("计数器步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("计数器尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用计数器")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("是否使用控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值被改变时触发")]),a("td",[s._v("最后变更的值")])])])])}]}},function(s,t,a){s.exports=a(375)},function(s,t,a){function l(s){a(376)}var n=a(13)(a(378),a(379),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(2),e=l(n);e.default.component("my-item-zh",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"name"}},[a.value]),s("span",{attrs:{class:"addr"}},[a.address])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{restaurants:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearch:function(s,t){var a=this.restaurants,l=s?a.filter(this.createStateFilter(s)):a;t(l)},querySearchAsync:function(s,t){var a=this.restaurants,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.restaurants=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过鼠标或键盘输入字符")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input v-model="input" placeholder="请输入内容"></el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input,callback:function(t){s.input=t},expression:"input"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请输入内容" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input1: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"请输入内容",disabled:!0},model:{value:s.input1,callback:function(t){s.input1=t},expression:"input1"}})],1),a("p",[s._v("通过 "),a("code",[s._v("disabled")]),s._v(" 属性指定是否禁用 input 组件")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("带有图标标记输入类型")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请选择日期" icon="search" v-model="input2" :on-icon-click="handleIconClick">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input2: ''\n    }\n  },\n  methods: {\n    handleIconClick(ev) {\n      console.log(ev);\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"请选择日期",icon:"search","on-icon-click":s.handleIconClick},model:{value:s.input2,callback:function(t){s.input2=t},expression:"input2"}})],1),a("p",[s._v("可以通过 "),a("code",[s._v("icon")]),s._v(" 属性在 input 组件尾部增加显示图标，可以通过 "),a("code",[s._v("on-icon-click")]),s._v(" 钩子函数来在点击图标后执行需要的逻辑。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择日期"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n    handleIconClick(ev) {\n      "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},model:{value:s.textarea,callback:function(t){s.textarea=t},expression:"textarea"}})],1),a("p",[s._v("文本域高度可通过 "),a("code",[s._v("rows")]),s._v(" 属性控制")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea3">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea2: '',\n      textarea3: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{type:"textarea",autosize:"",placeholder:"请输入内容"},model:{value:s.textarea2,callback:function(t){s.textarea2=t},expression:"textarea2"}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},model:{value:s.textarea3,callback:function(t){s.textarea3=t},expression:"textarea3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可前置或后置元素，一般为标签或按钮")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n  <el-input placeholder="请输入内容" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input5">\n    <el-select v-model="select" slot="prepend" placeholder="请选择">\n      <el-option label="餐厅名" value="1"></el-option>\n      <el-option label="订单号" value="2"></el-option>\n      <el-option label="用户电话" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="search"></el-button>\n  </el-input>\n</div>\n\n\n',script:"\nexport default {\n  data() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input3,callback:function(t){s.input3=t},expression:"input3"}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input4,callback:function(t){s.input4=t},expression:"input4"}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input5,callback:function(t){s.input5=t},expression:"input5"}},[a("el-select",{attrs:{placeholder:"请选择"},slot:"prepend",model:{value:s.select,callback:function(t){s.select=t},expression:"select"}},[a("el-option",{attrs:{label:"餐厅名",value:"1"}}),a("el-option",{attrs:{label:"订单号",value:"2"}}),a("el-option",{attrs:{label:"用户电话",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("可通过 slot 来指定在 input 中前置或者后置内容。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"餐厅名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"订单号"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户电话"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-size">\n  <el-input size="large" placeholder="请输入内容" v-model="input6">\n  </el-input>\n  <el-input placeholder="请输入内容" v-model="input7">\n  </el-input>\n  <el-input size="small" placeholder="请输入内容" v-model="input8">\n  </el-input>\n  <el-input size="mini" placeholder="请输入内容" v-model="input9">\n  </el-input>\n</div>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input6: '',\n      input7: '',\n      input8: '',\n      input9: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{attrs:{size:"large",placeholder:"请输入内容"},model:{value:s.input6,callback:function(t){s.input6=t},expression:"input6"}}),a("el-input",{attrs:{placeholder:"请输入内容"},model:{value:s.input7,callback:function(t){s.input7=t},expression:"input7"}}),a("el-input",{attrs:{size:"small",placeholder:"请输入内容"},model:{value:s.input8,callback:function(t){s.input8=t},expression:"input8"}}),a("el-input",{attrs:{size:"mini",placeholder:"请输入内容"},model:{value:s.input9,callback:function(t){s.input9=t},expression:"input9"}})],1)]),a("p",[s._v("可通过 "),a("code",[s._v("size")]),s._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("根据输入内容提供对应的输入建议")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">激活即列出输入建议</div>\n    <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">输入后匹配输入建议</div>\n    <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n  </el-col>\n</el-row>\n\n',script:'\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("激活即列出输入建议")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state1,callback:function(t){s.state1=t},expression:"state1"}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("输入后匹配输入建议")]),a("el-autocomplete",{staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},on:{select:s.handleSelect},model:{value:s.state2,callback:function(t){s.state2=t},expression:"state2"}})],1)],1)],1),a("p",[s._v("autocomplete 是一个可带输入建议的输入框组件，"),a("code",[s._v("fetch-suggestions")]),s._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("激活即列出输入建议"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("输入后匹配输入建议"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (restaurant.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("可自定义输入建议的显示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete popper-class="my-autocomplete" v-model="state3" :fetch-suggestions="querySearch" custom-item="my-item-zh" placeholder="请输入内容" @select="handleSelect" icon="edit" :on-icon-click="handleIconClick"></el-autocomplete>\n\n\n\n\n',script:'\n  Vue.component(\'my-item-zh\', {\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: \'name\' } }, [item.value]),\n        h(\'span\', { attrs: { class: \'addr\' } }, [item.address])\n      ]);\n    },\n    props: {\n      item: { type: Object, required: true }\n    }\n  });\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n',style:"\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-zh",placeholder:"请输入内容",icon:"edit","on-icon-click":s.handleIconClick},on:{select:s.handleSelect},model:{value:s.state3,callback:function(t){s.state3=t},expression:"state3"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-zh"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-zh'")]),s._v(", {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(" } }, [item.value]),\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'addr'")]),s._v(" } }, [item.address])\n      ]);\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n    }\n  });\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (restaurant.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{
+staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      },\n      handleIconClick(ev) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("从服务端搜索数据")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n\n',script:'\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"请输入内容"},on:{select:s.handleSelect},model:{value:s.state4,callback:function(t){s.state4=t},expression:"state4"}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"
+},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createStateFilter(queryString)) : restaurants;\n\n        clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n      },\n      createStateFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("state")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (state.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input 输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带 icon 的输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("用于输入多行文本信息，通过将 "),a("code",[s._v("type")]),s._v(" 属性的值指定为 textarea。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自适应文本高度的文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过设置 "),a("code",[s._v("autosize")]),s._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),a("code",[s._v("autosize")]),s._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 复合型输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带输入建议")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("text/textarea")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("最大输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("最小输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸，只在 "),a("code",[s._v('type!="textarea"')]),s._v(" 时有效")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("输入框行数，只对 "),a("code",[s._v('type="textarea"')]),s._v(" 有效")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("自适应内容高度，只对 "),a("code",[s._v('type="textarea"')]),s._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("原生属性，自动补全")]),a("td",[s._v("string")]),a("td",[s._v("on, off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("原生属性，是否只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("原生属性，设置最大值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("原生属性，设置最小值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("原生属性，设置输入字段的合法数字间隔")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("控制是否能被用户缩放")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("原生属性，自动获取焦点")]),a("td",[s._v("boolean")]),a("td",[s._v("true, false")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("点击 Input 内的图标的钩子函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("点击 Input 内的图标时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("在 Input 失去焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("在 Input 获得焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("在 Input 值改变时触发")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("必填值输入绑定值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("custom-item")]),a("td",[s._v("通过该参数指定自定义的输入建议列表项的组件名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Autocomplete 下拉列表的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("是否在输入框 focus 时显示建议列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("点击图标的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("点击选中建议项时触发")]),a("td",[s._v("选中建议项")])])])])}]}},function(s,t,a){s.exports=a(381)},function(s,t,a){var l=a(13)(null,a(382),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 安装")]),a("h3",{attrs:{id:"npm-an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm 安装")]),a("p",[s._v("推荐使用 npm 的方式安装，它能更好地和 "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(" 打包工具配合使用。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("目前可以通过 "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),a("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},[s._v("在线演示")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("<!DOCTYPE html>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("欢迎使用 Element"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 先引入 Vue -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n      el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n      data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" ")]),s._v("{\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n      }\n    })\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。")])])}]}},function(s,t,a){s.exports=a(384)},function(s,t,a){function l(s){a(385)}var n=a(13)(null,a(387),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过基础的 24 分栏，迅速简便地创建布局。")]),s._m(1),a("p",[s._v("使用单一分栏创建基础的栅格布局。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("通过 row 和 col 组件，并通过 col 组件的 "),a("code",[s._v("span")]),s._v(" 属性我们就可以自由地组合布局。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("分栏之间存在间隔。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row 组件 提供 "),a("code",[s._v("gutter")]),s._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持偏移指定的栏数。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("通过制定 col 组件的 "),a("code",[s._v("offset")]),s._v(" 属性可以指定分栏偏移的栏数。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),a("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"
+}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("将 "),a("code",[s._v("type")]),s._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),a("code",[s._v("justify")]),s._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout 布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-jian-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏间隔")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hun-he-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 混合布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",[s._v("flex")]),s._v(" 布局来对分栏进行灵活的对齐。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 响应式布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸："),a("code",[s._v("xs")]),s._v("、"),a("code",[s._v("sm")]),s._v("、"),a("code",[s._v("md")]),s._v("和"),a("code",[s._v("lg")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("栅格间隔")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("布局模式，可选 flex，现代浏览器下有效")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("flex 布局下的水平排列方式")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("flex 布局下的垂直排列方式")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("栅格占据的列数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("栅格左侧的间隔格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("栅格向右移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("栅格向左移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(389)},function(s,t,a){function l(s){a(390)}var n=a(13)(a(392),a(393),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("加载数据时显示动效。")]),s._m(1),a("p",[s._v("在表格等容器中加载数据时显示。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading: true\n      };\n    }\n  };\n",style:"\n  body {\n    margin: 0;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),a("code",[s._v("v-loading")]),s._v("，只需要绑定"),a("code",[s._v("Boolean")]),s._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),a("code",[s._v("body")]),s._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{
+staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义加载文案。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table v-loading="loading2" element-loading-text="拼命加载中" :data="tableData" style="width: 100%">\n    <el-table-column prop="date" label="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading2: true\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("在绑定了"),a("code",[s._v("v-loading")]),s._v("指令的元素上添加"),a("code",[s._v("element-loading-text")]),s._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"拼命加载中"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("页面数据加载时显示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n    显示整页加载，3 秒后消失\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 3000);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("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    显示整页加载，3 秒后消失\n  ")])]],2),a("p",[s._v("当需要全屏遮罩时，可使用"),a("code",[s._v("fullscreen")]),s._v("修饰符（此时遮罩会插入至 body 上）。此时若需要锁定屏幕的滚动，可以使用"),a("code",[s._v("lock")]),s._v("修饰符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n    显示整页加载，3 秒后消失\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      openFullScreen() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),s._m(5),a("p",[s._v("在需要调用时：")]),s._m(6),s._m(7),s._m(8),a("p",[s._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading 加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qu-yu-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 区域加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jia-zai-wen-an"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-wen-an","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载文案")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zheng-ye-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 整页加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-wu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 服务")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("其中 "),a("code",[s._v("options")]),s._v(" 参数为 Loading 的配置项，具体见下表。"),a("code",[s._v("LoadingService")]),s._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),a("code",[s._v("close")]),s._v(" 方法来关闭它：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用它们中任意一个的 "),a("code",[s._v("close")]),s._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),a("code",[s._v("$loading")]),s._v("，它的调用方式为："),a("code",[s._v("this.$loading(options)")]),s._v("，同样会返回一个 Loading 实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),a("code",[s._v("document.querySelector")]),s._v("以获取到对应 DOM 节点")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("body")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("fullscreen")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("lock")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("显示在加载图标下方的加载文案")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("Loading 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(395)},function(s,t,a){function l(s){a(396)}var n=a(13)(a(398),a(399),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1"}},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)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("为网站提供导航功能的菜单。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("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">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n  </el-submenu>\n  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</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">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n  </el-submenu>\n  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1)],1),a("p",[s._v("导航菜单默认为垂直模式，通过 "),a("code",[s._v("mode")]),s._v(" 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 "),a("code",[s._v("submenu")]),s._v(" 组件可以生成二级菜单。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelect(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("垂直菜单，可内嵌子菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="tac">\n  <el-col :span="8">\n    <h5>带 icon</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>导航一</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>\n      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="8">\n    <h5>不带 icon</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">导航一</template>\n        <el-menu-item-group title="分组一">\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">导航二</el-menu-item>\n      <el-menu-item index="3">导航三</el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="8">\n    <h5>分组</h5>\n    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">\n      <el-menu-item-group title="分组一">\n        <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>\n        <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>\n      </el-menu-item-group>\n      <el-menu-item-group title="分组二">\n        <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>\n        <el-menu-item index="4"><i class="el-icon-message"></i>导航四</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(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("带 icon")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("导航一")]),a("el-menu-item-group",[a("template",{slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("导航二")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("导航三")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("不带 icon")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("导航一")]),a("el-menu-item-group",{attrs:{title:"分组一"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],1),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("导航二")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("导航三")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("分组")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"分组一"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航一")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航二")])],1),a("el-menu-item-group",{attrs:{title:"分组二"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航三")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航四")])],1)],1)],1)],1)],1),a("p",[s._v("通过 "),a("code",[s._v("el-menu-item-group")]),s._v(" 组件可以实现菜单进行分组，分组名可以通过 "),a("code",[s._v("title")]),s._v(" 属性直接设定也可以通过具名 slot 来设定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("带 icon"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("不带 icon"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("分组"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组二"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航四"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu 导航菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ding-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 顶栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ce-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 侧栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("模式")]),a("td",[s._v("string")]),a("td",[s._v("horizontal,vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("主题色")]),a("td",[s._v("string")]),a("td",[s._v("light,dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("当前激活菜单的 index")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("当前打开的submenu的 key 数组")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("是否只保持一个子菜单的展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("菜单激活回调")]),a("td",[s._v("index: 选中菜单项的 indexPath: 选中菜单项的 index path")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("SubMenu 展开的回调")]),a("td",[s._v("index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("SubMenu 收起的回调")]),a("td",[s._v("index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router 路径对象")]),a("td",[s._v("Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("分组标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(401)},function(s,t,a){var l=a(13)(a(402),a(403),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"删除成功!",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({
+message:"已取消删除",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"你的邮箱是: "+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"取消输入"})},200)})},open4:function(){var s=this;this.$msgbox({title:"消息",message:"这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容",showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。")]),s._m(1),a("p",[s._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$alert")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("alert")]),s._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),a("code",[s._v("message")]),s._v("和"),a("code",[s._v("title")]),s._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),a("code",[s._v("Promise")]),s._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),a("code",[s._v("Promise")]),s._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'这是一段内容'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open2">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$confirm")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("confirm")]),s._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),a("code",[s._v("options")]),s._v("作为第三个参数，它是一个字面量对象。"),a("code",[s._v("type")]),s._v("字段表明消息类型，可以为"),a("code",[s._v("success")]),s._v("，"),a("code",[s._v("error")]),s._v("，"),a("code",[s._v("info")]),s._v("和"),a("code",[s._v("warning")]),s._v("，无效的设置将会被忽略。注意，第二个参数"),a("code",[s._v("title")]),s._v("必须定义为"),a("code",[s._v("String")]),s._v("类型，如果是"),a("code",[s._v("Object")]),s._v("，会被理解为"),a("code",[s._v("options")]),s._v("。在这里我们用了 Promise 来处理后续响应。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'此操作将永久删除该文件, 是否继续?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'删除成功!'")]),s._v("\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'已取消删除'")]),s._v("\n          });          \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open3">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$prompt")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("prompt")]),s._v("。可以用"),a("code",[s._v("inputPattern")]),s._v("字段自己规定匹配模式，或者用"),a("code",[s._v("inputValidator")]),s._v("规定校验函数，可以返回"),a("code",[s._v("Boolean")]),s._v("或"),a("code",[s._v("String")]),s._v("，"),a("code",[s._v("Boolean")]),s._v("为"),a("code",[s._v("false")]),s._v("或字符串时均表示校验未通过，"),a("code",[s._v("String")]),s._v("相当于定义了"),a("code",[s._v("inputErrorMessage")]),s._v("字段。此外，可以用"),a("code",[s._v("inputPlaceholder")]),s._v("字段来定义输入框的占位符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'请输入邮箱'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'邮箱格式不正确'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("{ value }")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你的邮箱是: '")]),s._v(" + value\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消输入'")]),s._v("\n          });       \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可自定义配置不同内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open4">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open4() {\n        this.$msgbox({\n          title: '消息',\n          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("以上三个方法都是对"),a("code",[s._v("$msgbox")]),s._v("方法的再包装。本例直接调用"),a("code",[s._v("$msgbox")]),s._v("方法，使用了"),a("code",[s._v("showCancelButton")]),s._v("字段，用于显示取消按钮。另外可使用"),a("code",[s._v("cancelButtonClass")]),s._v("为其添加自定义样式，使用"),a("code",[s._v("cancelButtonText")]),s._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),a("code",[s._v("beforeClose")]),s._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),a("code",[s._v("action")]),s._v("、实例本身和"),a("code",[s._v("done")]),s._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),a("code",[s._v("loading")]),s._v("状态等；此时若需要关闭实例，可以调用"),a("code",[s._v("done")]),s._v("方法（若在"),a("code",[s._v("beforeClose")]),s._v("中没有调用"),a("code",[s._v("done")]),s._v("，则实例不会关闭）。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n              instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n              instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'执行中...'")]),s._v(";\n              setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                done();\n                setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                  instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n                }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n              }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              done();\n            }\n          }\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n          });\n        });\n      },\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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),a("p",[s._v("对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。")]),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox-dan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox 弹框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"que-ren-xiao-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 确认消息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ti-jiao-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 提交内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 "),a("code",[s._v("MessageBox")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("单独引入 "),a("code",[s._v("MessageBox")]),s._v("：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("MessageBox 标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("MessageBox 消息正文内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("消息类型，用于显示图标")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("MessageBox 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),a("td",[s._v("function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),a("td",[s._v("function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("是否在 MessageBox 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("是否显示取消按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("是否显示确定按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("取消按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("取消")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("确定按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("确定")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("取消按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("确定按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("是否可通过点击遮罩关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("是否可通过按下 ESC 键关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("是否显示输入框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("输入框的占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("输入框的初始文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("输入框的校验表达式")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("校验未通过时的提示文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("输入的数据不合法!")])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){var l=a(13)(a(406),a(407),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")},open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),s._m(1),a("p",[s._v("从顶部出现，3 秒后自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">打开消息提示</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("打开消息提示")])]],2),a("p",[s._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),a("code",[s._v("$message")]),s._v("方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("打开消息提示"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n      open2() {\n        this.$message({\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('错了哦，这是一条错误消息');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("错误")])]],2),a("p",[s._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),a("code",[s._v("type")]),s._v("字段可以定义不同的状态，默认为"),a("code",[s._v("info")]),s._v("。此时正文内容以"),a("code",[s._v("message")]),s._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open4")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("成功"),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("警告"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("消息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("错误"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v(");\n      },\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'错了哦，这是一条错误消息'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以添加关闭按钮。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open5">消息</el-button>\n  <el-button :plain="true" @click="open6">成功</el-button>\n  <el-button :plain="true" @click="open7">警告</el-button>\n  <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: '这是一条消息提示'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: '错了哦，这是一条错误消息',\n          type: 'error'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("错误")])]],2),a("p",[s._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),a("code",[s._v("showClose")]),s._v("字段。此外，和 Notification 一样，Message 拥有可控的"),a("code",[s._v("duration")]),s._v("，设置"),a("code",[s._v("0")]),s._v("为不会被自动关闭，默认为 3000 毫秒。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("消息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("成功"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("警告"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("错误"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'错了哦，这是一条错误消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-guan-bi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可关闭")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),a("code",[s._v("Message")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("单独引入 "),a("code",[s._v("Message")]),s._v("：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用方法为 "),a("code",[s._v("Message(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",[s._v("Message.success(options)")]),s._v("。\n并且可以调用 "),a("code",[s._v("Message.closeAll()")]),s._v(" 手动关闭所有实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("消息文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名，会覆盖 "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",[s._v("Message")]),s._v(" 或 "),a("code",[s._v("this.$message")]),s._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Message")])])])])}]}},function(s,t,a){s.exports=a(409)},function(s,t,a){var l=a(13)(a(410),a(411),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"标题名称",message:s("p",{style:"color: red"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})},open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})},open7:function(){this.$notify.success({title:"成功",message:"这是一条成功的提示消息",offset:100})},onClose:function(){console.log("Notification 已关闭")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("悬浮出现在页面右上角，显示全局的通知提醒消息。")]),s._m(1),a("p",[s._v("适用性广泛的通知栏")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open">\n    可自动关闭\n  </el-button>\n  <el-button plain @click="open2">\n    不会自动关闭\n    </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: '标题名称',\n          message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n    可自动关闭\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n    不会自动关闭\n    ")])]],2),a("p",[s._v("Notification 组件提供通知功能，Element 注册了"),a("code",[s._v("$notify")]),s._v("方法，接收一个"),a("code",[s._v("options")]),s._v("字面量参数，在最简单的情况下，你可以设置"),a("code",[s._v("title")]),s._v("字段和"),a("code",[s._v("message")]),s._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),a("code",[s._v("duration")]),s._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),a("code",[s._v("0")]),s._v("，则不会自动关闭。注意："),a("code",[s._v("duration")]),s._v("接收一个"),a("code",[s._v("Number")]),s._v("，单位为毫秒，默认为"),a("code",[s._v("4500")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("\n    可自动关闭\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n    不会自动关闭\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: red'")]),s._v("}, "),a("span",{staticClass:"hljs-string"},[s._v("'这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'")]),s._v(")\n        });\n      },\n\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条不会自动关闭的消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open3">\n    成功\n  </el-button>\n  <el-button plain @click="open4">\n    警告\n  </el-button>\n  <el-button plain @click="open5">\n    消息\n  </el-button>\n  <el-button plain @click="open6">\n    错误\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n    成功\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n    警告\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n    消息\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n    错误\n  ")])]],2),a("p",[s._v("Element 为 Notification 组件准备了四种通知类型："),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(", "),a("code",[s._v("error")]),s._v("。通过"),a("code",[s._v("type")]),s._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open5")]),s._v("和"),a("code",[s._v("open6")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n    成功\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n    警告\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n    消息\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n    错误\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成功'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条警告的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息的提示消息'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'错误'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条错误的提示消息'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("让 Notification 偏移一些位置")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open7">\n    偏移的消息\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open7() {\n        this.$notify.success({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    偏移的消息\n  ")])]],2),a("p",[s._v("Notification 提供设置偏移量的功能，通过设置 "),a("code",[s._v("offset")]),s._v(" 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    偏移的消息\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成功'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),a("p",[s._v("单独引入 Notification：")]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification-tong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification 通知")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有倾向性")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 "),a("code",[s._v("Vue.prototype")]),s._v(" 添加了全局方法 "),a("code",[s._v("$notify")]),s._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用方法为 "),a("code",[s._v("Notification(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",[s._v("Notification.success(options)")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("说明文字")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题样式，如果不在可选值内将被忽略")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名。若设置了 "),a("code",[s._v("type")]),s._v("，则 "),a("code",[s._v("iconClass")]),s._v(" 会被覆盖")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("点击 Notification 时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",[s._v("Notification")]),s._v(" 或 "),a("code",[s._v("this.$notify")]),s._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Notification")])])])])}]}},function(s,t,a){s.exports=a(413)},function(s,t,a){function l(s){a(414)}var n=a(13)(a(416),a(417),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={methods:{handleSizeChange:function(s){this.currentPage=s,console.log("每页 "+s+" 条")},handleCurrentChange:function(s){console.log("当前页: "+s)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当数据量过多时，使用分页分解数据。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">页数较少时的效果</span>\n  <el-pagination layout="prev, pager, next" :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">大于 7 页时的效果</span>\n  <el-pagination layout="prev, pager, next" :total="1000">\n  </el-pagination>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("页数较少时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("大于 7 页时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("设置"),a("code",[s._v("layout")]),s._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),a("code",[s._v("prev")]),s._v("表示上一页，"),a("code",[s._v("next")]),s._v("为下一页，"),a("code",[s._v("pager")]),s._v("表示页码列表，除此以外还提供了"),a("code",[s._v("jumper")]),s._v("和"),a("code",[s._v("total")]),s._v("，"),a("code",[s._v("size")]),s._v("和特殊的布局符号"),a("code",[s._v("->")]),s._v("，"),a("code",[s._v("->")]),s._v("后的元素会靠右显示，"),a("code",[s._v("jumper")]),s._v("表示跳页元素，"),a("code",[s._v("total")]),s._v("表示显示页码总数，"),a("code",[s._v("size")]),s._v("用于设置每页显示的页码数量。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("页数较少时的效果"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("大于 7 页时的效果"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("在空间有限的情况下，可以使用简单的小型分页。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("只需要一个"),a("code",[s._v("small")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("根据场景需要，可以添加其他功能模块。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">显示总数</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">调整每页显示条数</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="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">直接前往</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">完整功能</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="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(val) {\n        console.log(`每页 ${val} 条`);\n      },\n      handleCurrentChange(val) {\n        this.currentPage = val;\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示总数")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("调整每页显示条数")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("直接前往")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("完整功能")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("此例是一个完整的用例，使用了"),a("code",[s._v("size-change")]),s._v("和"),a("code",[s._v("current-change")]),s._v("事件来处理页码大小和当前页变动时候触发的事件。"),a("code",[s._v("page-sizes")]),s._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),a("code",[s._v("[100, 200, 300, 400]")]),s._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("显示总数"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("调整每页显示条数"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("直接前往"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("完整功能"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSizeChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`每页 "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" 条`")]),s._v(");\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentPage = val;\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`当前页: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination 分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xing-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小型分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-jia-gong-neng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 附加功能")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("是否使用小型分页样式")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("每页显示条目个数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("总条目数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("当前页数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("组件布局，子组件名用逗号分隔")]),a("td",[s._v("String")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("每页显示个数选择器的选项设置")]),a("td",[s._v("Number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("pageSize 改变时会触发")]),a("td",[s._v("每页条数"),a("code",[s._v("size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("currentPage 改变时会触发")]),a("td",[s._v("当前页"),a("code",[s._v("currentPage")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("自定义内容，需要在 "),a("code",[s._v("layout")]),s._v(" 中列出 "),a("code",[s._v("slot")])])])])])}]}},function(s,t,a){s.exports=a(419)},function(s,t,a){function l(s){a(420)}var n=a(13)(a(422),a(423),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],gridData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],gridData3:[{tag:"家",date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],singleSelection:{},multipleSelection:[],model:""}},watch:{singleSelection:function(s){console.log("selection: ",s)},multipleSelection:function(s){console.log("selection: ",s)}},events:{handleClick:function(s){console.log("you clicked ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover1" placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-popover ref="popover2" placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-button v-popover:popover1>hover 激活</el-button>\n<el-button v-popover:popover2>click 激活</el-button>\n<el-popover placement="right" title="标题" width="200" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  <el-button slot="reference">focus 激活</el-button>\n</el-popover>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("hover 激活")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("click 激活")]),a("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[a("el-button",{slot:"reference"},[s._v("focus 激活")])],1)],1),a("p",[s._v("设置索引"),a("code",[s._v("ref")]),s._v("，在按钮中，我们注册了自定义指令"),a("code",[s._v("v-popover")]),s._v("，指向索引ID。"),a("code",[s._v("trigger")]),s._v("属性用于设置何时触发 Popover ，提供三种触发方式："),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" 和 "),a("code",[s._v("focus")]),s._v("。第二种用法通过 "),a("code",[s._v("slot")]),s._v(" 指定 reference。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("focus 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),a("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="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n</el-popover>\n\n<el-button v-popover:popover4>click 激活</el-button>\n\n\n',
+script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("click 激活")])],1),a("p",[s._v("利用分发取代"),a("code",[s._v("content")]),s._v("属性")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover5" placement="top" width="160" v-model="visible2">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n  </div>\n</el-popover>\n\n<el-button v-popover:popover5>删除</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover5",attrs:{placement:"top",width:"160"},model:{value:s.visible2,callback:function(t){s.visible2=t},expression:"visible2"}},[a("p",[s._v("这是一段内容这是一段内容确定删除吗？")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("取消")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("确定")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("删除")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("这是一段内容这是一段内容确定删除吗？"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("取消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("确定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover-dan-chu-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover 弹出框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),a("code",[s._v("Vue-popper")]),s._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-xin-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套信息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-cao-zuo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套操作")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发方式")]),a("td",[s._v("String")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",[s._v("slot")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("宽度")]),a("td",[s._v("String, Number")]),a("td",[s._v("—")]),a("td",[s._v("最小宽度 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Popover 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Popover 内嵌 HTML 文本")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("显示时触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("隐藏时触发")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(425)},function(s,t,a){function l(s){a(426)}var n=a(13)(null,a(428),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示操作进度，告知用户当前状态和预期。")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件设置"),a("code",[s._v("percentage")]),s._v("属性即可，表示进度条对应的百分比，"),a("strong",[s._v("必填")]),s._v("，必须在 0-100。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("百分比不占用额外控件，适用于文件上传等场景。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件可通过 "),a("code",[s._v("stroke-width")]),s._v(" 属性更改进度条的高度，并可通过 "),a("code",[s._v("text-inside")]),s._v(" 属性来将进度条描述置于进度条内部。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件可通过 "),a("code",[s._v("type")]),s._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),a("code",[s._v("width")]),s._v(" 属性来设置其大小。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress 进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比外显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比内显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 环形进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[a("strong",[s._v("百分比（必填）")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("进度条类型")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("进度条的宽度，单位 px")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("进度条当前状态")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("环形进度条画布宽度（只在 type=circle 时可用）")]),a("td",[s._v("number")]),a("td"),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示进度条文字内容")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(430)},function(s,t,a){var l=a(13)(null,a(431),null,null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"kuai-su-shang-shou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 快速上手")]),a("p",[s._v("本节将介绍如何在项目中使用 Element。")]),a("h3",{attrs:{id:"shi-yong-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 Starter Kit")]),a("p",[s._v("我们提供了通用的"),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("项目模板")]),s._v("，你可以直接使用。对于熟悉 "),a("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" 或 "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("Laravel")]),s._v(" 的用户，我们也准备了相应的模板，同样可以直接下载使用。")]),a("p",[s._v("如果不希望使用我们提供的模板，请继续阅读。")]),a("h3",{attrs:{id:"pei-zhi-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pei-zhi-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 配置文件")]),a("p",[s._v("新建项目，项目结构为")]),a("pre",[a("code",{staticClass:"hljs language-text"},[s._v("|- src/  --------------------- 项目源代码\n    |- App.vue\n    |- main.js  -------------- 入口文件\n|- .babelrc  ----------------- babel 配置文件\n|- index.html  --------------- HTML 模板\n|- package.json  ------------- npm 配置文件\n|- README.md  ---------------- 项目帮助文档\n|- webpack.config.js  -------- webpack 配置文件\n")])]),a("p",[s._v("几个配置文件的典型配置如下：")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-starter"')]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n    "),a("span",{
+staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^2.1.6"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-es2015"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.13.2"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n  }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n    "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n        }\n      }\n    ]\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n      "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n      }\n    }),\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    })\n  ])\n}\n")])]),a("h3",{attrs:{id:"yin-ru-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入 Element")]),a("p",[s._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),a("h4",{attrs:{id:"wan-zheng-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 完整引入")]),a("p",[s._v("在 main.js 中写入以下内容：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),a("h4",{attrs:{id:"an-xu-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按需引入")]),a("p",[s._v("借助 "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),a("p",[s._v("首先，安装 babel-plugin-component：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("然后，将 .babelrc 修改为：")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ],\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-default"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("完整组件列表和引入方式（完整组件列表以 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(" 为准）")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"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} "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-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")])]),a("h3",{attrs:{id:"kai-shi-shi-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 开始使用")]),a("p",[s._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# 执行如下命令后访问 localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("编译：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("各个组件的使用方法请参阅它们各自的文档。")])])}]}},function(s,t,a){s.exports=a(433)},function(s,t,a){var l=a(13)(a(434),a(435),null,null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"选中且禁用",radio2:3,radio3:"上海",radio4:"上海",radio5:"上海"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在一组备选项中进行单选")]),s._m(1),a("p",[s._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>\n  <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{staticClass:"radio",attrs:{label:"1"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("备选项")]),a("el-radio",{staticClass:"radio",attrs:{label:"2"},model:{value:s.radio,callback:function(t){s.radio=t},expression:"radio"}},[s._v("备选项")])]],2),a("p",[s._v("要使用 Radio 组件，只需要设置"),a("code",[s._v("v-model")]),s._v("绑定变量，选中意味着变量的值为相应 Radio "),a("code",[s._v("label")]),s._v("属性的值，"),a("code",[s._v("label")]),s._v("可以是"),a("code",[s._v("String")]),s._v("或者"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("单选框不可用的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio1: '选中且禁用'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{attrs:{disabled:"",label:"禁用"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("备选项")]),a("el-radio",{attrs:{disabled:"",label:"选中且禁用"},model:{value:s.radio1,callback:function(t){s.radio1=t},expression:"radio1"}},[s._v("备选项")])]],2),a("p",[s._v("注意：请牢记，选中的条件是绑定的变量值等于"),a("code",[s._v("label")]),s._v("中的值。只要在"),a("code",[s._v("el-radio")]),s._v("元素中设置"),a("code",[s._v("disabled")]),s._v("属性即可，它接受一个"),a("code",[s._v("Boolean")]),s._v("，"),a("code",[s._v("true")]),s._v("为禁用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选中且禁用'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于在多个互斥的选项中选择的场景")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio-group v-model="radio2">\n    <el-radio :label="3">备选项</el-radio>\n    <el-radio :label="6">备选项</el-radio>\n    <el-radio :label="9">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio-group",{model:{value:s.radio2,callback:function(t){s.radio2=t},expression:"radio2"}},[a("el-radio",{attrs:{label:3}},[s._v("备选项")]),a("el-radio",{attrs:{label:6}},[s._v("备选项")]),a("el-radio",{attrs:{label:9}},[s._v("备选项")])],1)]],2),a("p",[s._v("结合"),a("code",[s._v("el-radio-group")]),s._v("元素和子元素"),a("code",[s._v("el-radio")]),s._v("可以实现单选组，在"),a("code",[s._v("el-radio-group")]),s._v("中绑定"),a("code",[s._v("v-model")]),s._v("，在"),a("code",[s._v("el-radio")]),s._v("中设置好"),a("code",[s._v("label")]),s._v("即可，无需再给每一个"),a("code",[s._v("el-radio")]),s._v("绑定变量，另外，还提供了"),a("code",[s._v("change")]),s._v("事件来响应变化，它会传入一个参数"),a("code",[s._v("value")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("按钮样式的单选组合。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio-group v-model="radio3">\n    <el-radio-button label="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></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="上海"></el-radio-button>\n    <el-radio-button label="北京" :disabled="true"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></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="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></el-radio-button>\n  </el-radio-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio3: '上海',\n        radio4: '上海',\n        radio5: '上海'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio-group",{model:{value:s.radio3,callback:function(t){s.radio3=t},expression:"radio3"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{model:{value:s.radio4,callback:function(t){s.radio4=t},expression:"radio4"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京",disabled:!0}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{attrs:{disabled:!0},model:{value:s.radio5,callback:function(t){s.radio5=t},expression:"radio5"}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)]],2),a("p",[s._v("只需要把"),a("code",[s._v("el-radio")]),s._v("元素换成"),a("code",[s._v("el-radio-button")]),s._v("元素即可，此外，Element 还提供了"),a("code",[s._v("size")]),s._v("属性给按钮组，支持"),a("code",[s._v("large")]),s._v("和"),a("code",[s._v("small")]),s._v("两种（如果不设定为默认）。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{
+staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio 单选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string,number,boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("Radio 按钮组尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值变化时触发的事件")]),a("td",[s._v("选中的 Radio label 值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(437)},function(s,t,a){function l(s){a(438)}var n=a(13)(a(440),a(441),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("评分组件")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</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() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认不区分颜色")]),a("el-rate",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("区分颜色")]),a("el-rate",{attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)]),a("p",[s._v("评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过"),a("code",[s._v("colors")]),s._v("属性设置，而它们对应的两个阈值则通过 "),a("code",[s._v("low-threshold")]),s._v(" 和 "),a("code",[s._v("high-threshold")]),s._v(" 设定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认不区分颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("区分颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用辅助文字直接地表达对应分数")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value3" show-text>\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{"show-text":""},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("show-text")]),s._v(" 属性会在右侧显示辅助文字。通过设置 "),a("code",[s._v("texts")]),s._v(" 可以为每一个分值指定对应的辅助文字。"),a("code",[s._v("texts")]),s._v(" 为一个数组，长度应等于最大值 "),a("code",[s._v("max")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),a("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() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("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:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("设置"),a("code",[s._v("icon-classes")]),s._v("属性可以自定义对应 3 个不同分段的图标。本例还使用"),a("code",[s._v("void-icon-class")]),s._v("指定了未选中时的图标类名。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("只读的评分用来展示分数，允许出现半星")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value}">\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value}"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("disabled")]),s._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),a("code",[s._v("show-text")]),s._v("，则会在右侧显示目前的分值。可以提供 "),a("code",[s._v("text-template")]),s._v(" 作为显示模板，模板为一个包含了 "),a("code",[s._v("{value}")]),s._v(" 的字符串，"),a("code",[s._v("{value}")]),s._v(" 会被解析为分值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value}"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate-ping-fen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate 评分")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-wen-zi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助文字")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其它 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 只读")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大分值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否为只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("是否允许半选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("低分和中等分数的界限值，值本身被划分在低分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("高分和中等分数的界限值，值本身被划分在高分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("只读时未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("只读时未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示辅助文字")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("辅助文字的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("辅助文字数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("只读时的辅助文字模板")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("分值改变时触发")]),a("td",[s._v("改变后的分值")])])])])}]}},function(s,t,a){s.exports=a(443)},function(s,t,a){function l(s){a(444)}var n=a(13)(a(446),a(447),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],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(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当选项过多时，使用下拉菜单展示并选择内容。")]),s._m(1),a("p",[s._v("适用广泛的基础单选")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value" placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value,callback:function(t){s.value=t},expression:"value"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v("的值为当前被选中的"),a("code",[s._v("el-option")]),s._v("的 value 属性值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{
+staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value2" placeholder="请选择">\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() {\n      return {\n        options2: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value2: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}},s._l(s.options2,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("在"),a("code",[s._v("el-option")]),s._v("中，设定"),a("code",[s._v("disabled")]),s._v("值为 true，即可禁用该选项")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("选择器不可用状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value3" disabled placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value3: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{disabled:"",placeholder:"请选择"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，则整个选择器不可用")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  \n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含清空按钮，可将选择器清空为初始状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value4" clearable placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value4: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{clearable:"",placeholder:"请选择"},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("clearable")]),s._v("属性，则可将选择器清空。需要注意的是，"),a("code",[s._v("clearable")]),s._v("属性仅适用于单选。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("适用性较广的基础多选，用 Tag 展示已选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value5" multiple placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value5: []\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{multiple:"",placeholder:"请选择"},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("multiple")]),s._v("属性即可启用多选，此时"),a("code",[s._v("v-model")]),s._v("的值为当前选中值所组成的数组")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("可以自定义备选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value6" placeholder="请选择">\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() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value6: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}},s._l(s.cities,function(t){return a("el-option",{key:t.value,attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("将自定义的 HTML 模板插入"),a("code",[s._v("el-option")]),s._v("的 slot 中即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("备选项进行分组展示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value7" placeholder="请选择">\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() {\n      return {\n        options3: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{placeholder:"请选择"},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}},s._l(s.options3,function(t){return a("el-option-group",{key:t.label,attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("使用"),a("code",[s._v("el-option-group")]),s._v("对备选项进行分组，它的"),a("code",[s._v("label")]),s._v("属性为分组名")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{
+staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'热门城市'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'城市名'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'大连'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以利用搜索功能快速查找选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value8" filterable placeholder="请选择">\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() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value8: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{attrs:{filterable:"",placeholder:"请选择"},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}},s._l(s.options,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("添加"),a("code",[s._v("filterable")]),s._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),a("code",[s._v("label")]),s._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),a("code",[s._v("filter-method")]),s._v("来实现。"),a("code",[s._v("filter-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("从服务器搜索数据，输入关键字进行查找")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value9" multiple filterable="" remote placeholder="请输入关键词" :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() {\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() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"",remote:"",placeholder:"请输入关键词","remote-method":s.remoteMethod,loading:s.loading},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为了启用远程搜索，需要将"),a("code",[s._v("filterable")]),s._v("和"),a("code",[s._v("remote")]),s._v("设置为"),a("code",[s._v("true")]),s._v("，同时传入一个"),a("code",[s._v("remote-method")]),s._v("。"),a("code",[s._v("remote-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),a("code",[s._v("el-option")]),s._v("是通过"),a("code",[s._v("v-for")]),s._v("指令渲染出来的，此时需要为"),a("code",[s._v("el-option")]),s._v("添加"),a("code",[s._v("key")]),s._v("属性，且其值需具有唯一性，比如此例中的"),a("code",[s._v("item.value")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入关键词"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n      });\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      remoteMethod(query) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n          setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n            });\n          }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("可以创建并选中选项中不存在的条目")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value10" multiple filterable="" allow-create placeholder="请选择文章标签">\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() {\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",slot:"source"},[[a("el-select",{attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"请选择文章标签"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}},s._l(s.options5,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("使用"),a("code",[s._v("allow-create")]),s._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),a("code",[s._v("filterable")]),s._v("必须为真。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择文章标签"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select 选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可清空单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 创建条目")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("是否多选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("单选时是否可以清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("select input 的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("是否允许用户创建新条目，需配合 "),a("code",[s._v("filterable")]),s._v(" 使用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("自定义过滤方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("是否为远程搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("远程搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否正在从远程获取数据")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("远程加载时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("加载中")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("搜索条件无匹配时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无匹配数据")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("选项为空时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无数据")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Select 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("选中值发生变化时触发")]),a("td",[s._v("目前的选中值")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("多选模式下移除tag时触发")]),a("td",[s._v("移除的tag值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("分组的组名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否将该分组下所有选项置为禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("选项的值")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项的标签，若不设置则默认与 "),a("code",[s._v("value")]),s._v(" 相同")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用该选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])]);
+}]}},function(s,t,a){s.exports=a(449)},function(s,t,a){function l(s){a(450)}var n=a(13)(a(452),a(453),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过拖动滑块在一个固定区间内进行选择")]),s._m(1),a("p",[s._v("在拖动滑块时，显示当前值")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-slider",{model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("自定义初始值")]),a("el-slider",{model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("隐藏 Tooltip")]),a("el-slider",{attrs:{"show-tooltip":!1},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("格式化 Tooltip")]),a("el-slider",{attrs:{"format-tooltip":s.formatTooltip},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("禁用")]),a("el-slider",{attrs:{disabled:""},model:{value:s.value5,callback:function(t){s.value5=t},expression:"value5"}})],1)]],2),a("p",[s._v("通过设置绑定值自定义滑块的初始值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("自定义初始值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("隐藏 Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("格式化 Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("禁用"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatTooltip(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项可以是离散的")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">不显示间断点</span>\n    <el-slider v-model="value6" :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("不显示间断点")]),a("el-slider",{attrs:{step:10},model:{value:s.value6,callback:function(t){s.value6=t},expression:"value6"}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示间断点")]),a("el-slider",{attrs:{step:10,"show-stops":""},model:{value:s.value7,callback:function(t){s.value7=t},expression:"value7"}})],1)]],2),a("p",[s._v("改变"),a("code",[s._v("step")]),s._v("的值可以改变步长，通过设置"),a("code",[s._v("show-step")]),s._v("属性可以显示间断点")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("不显示间断点"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("显示间断点"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过输入框设置精确数值")]),a("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() {\n      return {\n        value8: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{"show-input":""},model:{value:s.value8,callback:function(t){s.value8=t},expression:"value8"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("show-input")]),s._v("属性会在右侧显示一个输入框")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持选择某一数值范围")]),a("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() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{range:"","show-stops":"",max:10},model:{value:s.value9,callback:function(t){s.value9=t},expression:"value9"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("range")]),s._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\n      return {\n        value10: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{attrs:{vertical:"",height:"200px"},model:{value:s.value10,callback:function(t){s.value10=t},expression:"value10"}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("vertical")]),s._v("可使 Slider 变成竖向模式，此时必须设置高度"),a("code",[s._v("height")]),s._v("属性")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("vertical")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider-hua-kuai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider 滑块")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-san-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 离散值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fan-wei-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 范围选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-xiang-mo-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-xiang-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 竖向模式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("是否显示输入框，仅在非范围选择时有效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("是否显示间断点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("是否显示 tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("格式化 tooltip message")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("是否为范围选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("vertical")]),a("td",[s._v("是否竖向模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Slider 高度，竖向模式时必填")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),a("td",[s._v("改变后的值")])])])])}]}},function(s,t,a){s.exports=a(455)},function(s,t,a){var l=a(13)(a(456),a(457),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),s._m(1),a("p",[s._v("简单的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("下一步")])],1),a("p",[s._v("设置"),a("code",[s._v("active")]),s._v("属性，接受一个"),a("code",[s._v("Number")]),s._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),a("code",[s._v("space")]),s._v("属性即可，它接受"),a("code",[s._v("Boolean")]),s._v("，单位为"),a("code",[s._v("px")]),s._v("，如果不设置，则为自适应。设置"),a("code",[s._v("finish-status")]),s._v("属性可以改变已经完成的步骤的状态。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("下一步"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      };\n    },\n\n    "),a("span",{
+staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      next() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每一步骤显示出该步骤的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1" finish-status="success">\n  <el-step title="已完成"></el-step>\n  <el-step title="进行中"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"已完成"}}),a("el-step",{attrs:{title:"进行中"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("p",[s._v("也可以使用"),a("code",[s._v("title")]),s._v("具名分发，可以用"),a("code",[s._v("slot")]),s._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"已完成"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"进行中"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("每个步骤有其对应的步骤状态描述。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="200" :active="1">\n  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1}},[a("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("步骤条内可以启用各种自定义的图标。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1">\n  <el-step title="步骤 1" icon="edit"></el-step>\n  <el-step title="步骤 2" icon="upload"></el-step>\n  <el-step title="步骤 3" icon="picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"步骤 1",icon:"edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"picture"}})],1)],1),a("p",[s._v("通过"),a("code",[s._v("icon")]),s._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),a("code",[s._v("slot")]),s._v("来使用自定义的图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("竖直方向的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" direction="vertical" :active="1">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("p",[s._v("只需要在"),a("code",[s._v("el-steps")]),s._v("元素中设置"),a("code",[s._v("direction")]),s._v("属性为"),a("code",[s._v("vertical")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps 步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 含状态步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有描述的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图标的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 竖式步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("显示方向")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("设置当前激活步骤")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("设置当前步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("设置结束步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("标题描述居中对齐")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("组件居中显示")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")]),a("td",[s._v("Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")])])])])}]}},function(s,t,a){s.exports=a(459)},function(s,t,a){function l(s){a(460)}var n=a(13)(a(462),a(463),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:"100",value4:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),s._m(1),a("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() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":""},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}}),a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1),a("p",[s._v("绑定"),a("code",[s._v("v-model")]),s._v("到一个"),a("code",[s._v("Boolean")]),s._v("类型的变量。可以使用"),a("code",[s._v("on-text")]),s._v("属性与"),a("code",[s._v("off-text")]),s._v("属性来设置开关的文字描述，使用"),a("code",[s._v("on-color")]),s._v("属性与"),a("code",[s._v("off-color")]),s._v("属性来设置开关的背景色。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        value3: '100'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Switch value: "+s.value3,placement:"top"}},[a("el-switch",{attrs:{"on-color":"#13ce66","off-color":"#ff4949","on-value":"100","off-value":"0"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})],1)],1),a("p",[s._v("设置"),a("code",[s._v("on-value")]),s._v("和"),a("code",[s._v("off-value")]),s._v("属性，接受"),a("code",[s._v("Boolean")]),s._v(", "),a("code",[s._v("String")]),s._v("或"),a("code",[s._v("Number")]),s._v("类型的值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v(" "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Switch value: ' + value3\"")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("on-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("off-value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'100'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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',script:"\n  export default {\n    data() {\n      return {\n        value4: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{attrs:{"on-text":"","off-text":"",disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}}),a("el-switch",{attrs:{disabled:""},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})],1),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，接受一个"),a("code",[s._v("Boolean")]),s._v("，设置"),a("code",[s._v("true")]),s._v("即可禁用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),s._m(7)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch-kai-guan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch 开关")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"kuo-zhan-de-value-lei-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kuo-zhan-de-value-lei-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 扩展的 value 类型")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("switch 的宽度（像素）")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58（有文字）/ 46（无文字）")])]),a("tr",[a("td",[s._v("on-icon-class")]),a("td",[s._v("switch 打开时所显示图标的类名，设置此项会忽略 "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-icon-class")]),a("td",[s._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("switch 打开时的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("switch 关闭时的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-value")]),a("td",[s._v("switch 打开时的值")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("off-value")]),a("td",[s._v("switch 关闭时的值")]),a("td",[s._v("boolean / string / number")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("switch 打开时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("switch 关闭时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("switch 对应的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("switch 状态发生变化时的回调函数")]),a("td",[s._v("新状态的值")])])])])}]}},function(s,t,a){s.exports=a(465)},function(s,t,a){function l(s){a(466)}var n=a(13)(a(468),a(469),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"}],tableData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],tableData3:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333}],tableData4:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}],tableData5:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",
+name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}],tableData6:[{id:"12987122",name:"王小虎",amount1:"234",amount2:"3.2",amount3:10},{id:"12987123",name:"王小虎",amount1:"165",amount2:"4.43",amount3:12},{id:"12987124",name:"王小虎",amount1:"324",amount2:"1.9",amount3:9},{id:"12987125",name:"王小虎",amount1:"621",amount2:"2.2",amount3:17},{id:"12987126",name:"王小虎",amount1:"539",amount2:"4.1",amount3:15}],currentRow:null,multipleSelection:[]}},methods:{getSummaries:function(s){var t=s.columns,a=s.data,l=[];return t.forEach(function(s,t){if(0===t)return void(l[t]="总价");var n=a.map(function(t){return Number(t[s.property])});n.every(function(s){return isNaN(s)})?l[t]="N/A":(l[t]=n.reduce(function(s,t){var a=Number(t);return isNaN(a)?s:s+t},0),l[t]+=" 元")}),l},setCurrent:function(s){this.$refs.singleTable.setCurrentRow(s)},toggleSelection:function(s){var t=this;s?s.forEach(function(s){t.$refs.multipleTable.toggleRowSelection(s)}):this.$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)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),s._m(1),a("p",[s._v("基础的表格展示用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'  <template>\n    <el-table :data="tableData" style="width: 100%">\n      <el-table-column prop="date" label="日期" width="180">\n      </el-table-column>\n      <el-table-column prop="name" label="姓名" width="180">\n      </el-table-column>\n      <el-table-column prop="address" label="地址">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  \n',script:"\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  ",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("当"),a("code",[s._v("el-table")]),s._v("元素中注入"),a("code",[s._v("data")]),s._v("对象数组后，在"),a("code",[s._v("el-table-column")]),s._v("中用"),a("code",[s._v("prop")]),s._v("属性来对应对象中的键名即可填入数据，用"),a("code",[s._v("label")]),s._v("属性来定义表格的列名。可以使用"),a("code",[s._v("width")]),s._v("属性来定义列宽。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v("  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n      data() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[a("code",[s._v("stripe")]),s._v("属性可以创建带斑马纹的表格。它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即为启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),a("code",[s._v("border")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    methods: {\n      tableRowClassName(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() {\n      return {\n        tableData2: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("可以通过指定 Table 组件的 "),a("code",[s._v("row-class-name")]),s._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      tableRowClassName(row, index) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("纵向内容过多时，可选择固定表头。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("只要在"),a("code",[s._v("el-table")]),s._v("元素中定义了"),a("code",[s._v("height")]),s._v("属性，即可实现固定表头的表格，而不需要额外的代码。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("横向内容过多时，可选择固定列。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="操作" width="100">\n      <template scope="scope">\n        <el-button @click="handleClick" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      handleClick() {\n        console.log(1);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("查看")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("编辑")])]}]])})],1)]],2),a("p",[s._v("固定列需要使用"),a("code",[s._v("fixed")]),s._v("属性，它接受 Boolean 值或者"),a("code",[s._v("left")]),a("code",[s._v("right")]),s._v("，表示左边固定还是右边固定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("查看"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("编辑"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("横纵内容过多时，可选择固定列和表头。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2),a("p",[s._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="操作" width="120">\n      <template scope="scope">\n        <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">\n          移除\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(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData4: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n          移除\n        ")])]}]])})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("max-height")]),s._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n          移除\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      deleteRow(index, rows) {\n        rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column label="配送信息">\n      <el-table-column prop="name" label="姓名" width="120">\n      </el-table-column>\n      <el-table-column label="地址">\n        <el-table-column prop="province" label="省份" width="120">\n        </el-table-column>\n        <el-table-column prop="city" label="市区" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="地址" width="300">\n        </el-table-column>\n        <el-table-column prop="zip" label="邮编" 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() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{label:"配送信息"}},[a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{label:"地址"}},[a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配送信息"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("选择单行数据时使用色块表示。")]),a("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="日期" width="120">\n    </el-table-column>\n    <el-table-column property="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column property="address" label="地址">\n    </el-table-column>\n  </el-table>\n  <div style="margin-top: 20px">\n    <el-button @click="setCurrent(tableData[1])">选中第二行</el-button>\n    <el-button @click="setCurrent()">取消选择</el-button>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      setCurrent(row) {\n        this.$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"singleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.setCurrent(s.tableData[1])}}},[s._v("选中第二行")]),a("el-button",{on:{click:function(t){s.setCurrent()}}},[s._v("取消选择")])],1)]],2),a("p",[s._v("Table 组件提供了单选的支持，只需要配置"),a("code",[s._v("highlight-current-row")]),s._v("属性即可实现单选。之后由"),a("code",[s._v("current-change")]),s._v("事件来管理选中时触发的事件，它会传入"),a("code",[s._v("currentRow")]),s._v("，"),a("code",[s._v("oldCurrentRow")]),s._v("。如果需要显示索引，可以增加一列"),a("code",[s._v("el-table-column")]),s._v("，设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("index")]),s._v("即可显示从 1 开始的索引号。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"singleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current-row")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"index"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent(tableData[1])"')]),s._v(">")]),s._v("选中第二行"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCurrent()"')]),s._v(">")]),s._v("取消选择"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      setCurrent(row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.singleTable.setCurrentRow(row);\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("选择多行数据时使用 Checkbox。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table ref="multipleTable" :data="tableData3" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">\n    <el-table-column type="selection" width="55">\n    </el-table-column>\n    <el-table-column label="日期" width="120">\n      <template scope="scope">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" 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]])">切换第二、第三行的选中状态</el-button>\n    <el-button @click="toggleSelection()">取消选择</el-button>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      toggleSelection(rows) {\n        if (rows) {\n          rows.forEach(row => {\n            this.$refs.multipleTable.toggleRowSelection(row);\n          });\n        } else {\n          this.$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{ref:"multipleTable",staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"","tooltip-effect":"dark"},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:s._u([["default",function(t){return[s._v(s._s(t.row.date))]}]])}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1),a("div",{staticStyle:{"margin-top":"20px"}},[a("el-button",{on:{click:function(t){s.toggleSelection([s.tableData3[1],s.tableData3[2]])}}},[s._v("切换第二、第三行的选中状态")]),a("el-button",{on:{click:function(t){s.toggleSelection()}}},[s._v("取消选择")])],1)]],2),a("p",[s._v("实现多选非常简单: 手动添加一个"),a("code",[s._v("el-table-column")]),s._v("，设"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("selection")]),s._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),a("code",[s._v("show-overflow-tooltip")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，为"),a("code",[s._v("true")]),s._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"multipleTable"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("tooltip-effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selection"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"55"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection([tableData3[1], tableData3[2]])"')]),s._v(">")]),s._v("切换第二、第三行的选中状态"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"toggleSelection()"')]),s._v(">")]),s._v("取消选择"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      toggleSelection(rows) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (rows) {\n          rows.forEach("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("row")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.toggleRowSelection(row);\n          });\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.multipleTable.clearSelection();\n        }\n      },\n      handleSelectionChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("对表格进行排序，可快速查找或对比数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%" :default-sort="{prop: \'date\', order: \'descending\'}">\n    <el-table-column prop="date" label="日期" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" :formatter="formatter">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}})],1)]],2),a("p",[s._v("可以通过表的"),a("code",[s._v("default-sort")]),s._v("属性设置默认的排序列和排序顺序。在列中设置"),a("code",[s._v("sortable")]),s._v("属性即可实现以该列为基准的排序，接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("。在本例中，我们还使用了"),a("code",[s._v("formatter")]),s._v("属性，它用于格式化指定列的值，接受一个"),a("code",[s._v("Function")]),s._v("，会传入两个参数："),a("code",[s._v("row")]),s._v("和"),a("code",[s._v("column")]),s._v("，可以根据自己的需求进行处理。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"
+},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("对表格进行筛选，可快速查找到自己想看的数据。")]),a("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="日期" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" :formatter="formatter">\n    </el-table-column>\n    <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: \'家\', value: \'家\' }, { text: \'公司\', value: \'公司\' }]" :filter-method="filterTag">\n      <template scope="scope">\n        <el-tag :type="scope.row.tag === \'家\' ? \'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() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":s.filterTag},scopedSlots:s._u([["default",function(t){return[a("el-tag",{attrs:{type:"家"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}]])})],1)]],2),a("p",[s._v("在列中设置"),a("code",[s._v("filters")]),a("code",[s._v("filter-method")]),s._v("属性即可开启该列的筛选，filters 是一个数组，"),a("code",[s._v("filter-method")]),s._v("是一个方法，它用于决定某些数据是否显示，会传入两个参数："),a("code",[s._v("value")]),s._v("和"),a("code",[s._v("row")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标签"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === '家' ? 'primary' : 'success'\"")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'家'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'公司'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'家'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'公司'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("自定义列的显示内容，可组合其他组件使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column label="日期" width="180">\n      <template 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="姓名" width="180">\n      <template scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ 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="操作">\n      <template scope="scope">\n        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}]])}),a("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:s._u([["default",function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("姓名: "+s._s(t.row.name))]),a("p",[s._v("住址: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}]])}),a("el-table-column",{attrs:{label:"操作"},scopedSlots:s._u([["default",function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("编辑")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("删除")])]}]])})],1)]],2),a("p",[s._v("通过 "),a("code",[s._v("Scoped slot")]),s._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。("),a("code",[s._v("1.1")]),s._v(" 后支持通过 "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(" 自定义模板。之前的 "),a("code",[s._v("inline-template")]),s._v(" 同样适用，但不推荐。)")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("姓名: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("住址: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("编辑"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData5" style="width: 100%">\n    <el-table-column type="expand">\n      <template scope="props">\n        <el-form label-position="left" inline class="demo-table-expand">\n          <el-form-item label="商品名称">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label="所属店铺">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label="商品 ID">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label="店铺 ID">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label="商品分类">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label="店铺地址">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label="商品描述">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column label="商品 ID" prop="id">\n    </el-table-column>\n    <el-table-column label="商品名称" prop="name">\n    </el-table-column>\n    <el-table-column label="描述" prop="desc">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData5: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n",style:"\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n"
+}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData5}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:s._u([["default",function(t){return[a("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[a("el-form-item",{attrs:{label:"商品名称"}},[a("span",[s._v(s._s(t.row.name))])]),a("el-form-item",{attrs:{label:"所属店铺"}},[a("span",[s._v(s._s(t.row.shop))])]),a("el-form-item",{attrs:{label:"商品 ID"}},[a("span",[s._v(s._s(t.row.id))])]),a("el-form-item",{attrs:{label:"店铺 ID"}},[a("span",[s._v(s._s(t.row.shopId))])]),a("el-form-item",{attrs:{label:"商品分类"}},[a("span",[s._v(s._s(t.row.category))])]),a("el-form-item",{attrs:{label:"店铺地址"}},[a("span",[s._v(s._s(t.row.address))])]),a("el-form-item",{attrs:{label:"商品描述"}},[a("span",[s._v(s._s(t.row.desc))])])],1)]}]])}),a("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),a("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),a("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2),a("p",[s._v('通过设置 type="expand" 和 '),a("code",[s._v("Scoped slot")]),s._v(" 可以开启展开行功能，"),a("code",[s._v("el-table-column")]),s._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),a("code",[s._v("Scoped slot")]),s._v(" 相同。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("inline")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-table-expand"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品名称"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"所属店铺"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.shop "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品 ID"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.id "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"店铺 ID"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.shopId "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品分类"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.category "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"店铺地址"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品描述"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.desc "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品 ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品名称"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"描述"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("label")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("90px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-form-item")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50%")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),a("p",[s._v("若表格展示的是各类数字，可以在表尾显示各列的合计。")]),a("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="姓名">\n    </el-table-column>\n    <el-table-column prop="amount1" sortable label="数值 1">\n    </el-table-column>\n    <el-table-column prop="amount2" sortable label="数值 2">\n    </el-table-column>\n    <el-table-column prop="amount3" sortable label="数值 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="姓名">\n    </el-table-column>\n    <el-table-column prop="amount1" label="数值 1（元）">\n    </el-table-column>\n    <el-table-column prop="amount2" label="数值 2（元）">\n    </el-table-column>\n    <el-table-column prop="amount3" label="数值 3（元）">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData6: [{\n          id: '12987122',\n          name: '王小虎',\n          amount1: '234',\n          amount2: '3.2',\n          amount3: 10\n        }, {\n          id: '12987123',\n          name: '王小虎',\n          amount1: '165',\n          amount2: '4.43',\n          amount3: 12\n        }, {\n          id: '12987124',\n          name: '王小虎',\n          amount1: '324',\n          amount2: '1.9',\n          amount3: 9\n        }, {\n          id: '12987125',\n          name: '王小虎',\n          amount1: '621',\n          amount2: '2.2',\n          amount3: 17\n        }, {\n          id: '12987126',\n          name: '王小虎',\n          amount1: '539',\n          amount2: '4.1',\n          amount3: 15\n        }]\n      };\n    },\n    methods: {\n      getSummaries(param) {\n        const { columns, data } = param;\n        const sums = [];\n        columns.forEach((column, index) => {\n          if (index === 0) {\n            sums[index] = '总价';\n            return;\n          }\n          const values = data.map(item => Number(item[column.property]));\n          if (!values.every(value => isNaN(value))) {\n            sums[index] = values.reduce((prev, curr) => {\n              const value = Number(curr);\n              if (!isNaN(value)) {\n                return prev + curr;\n              } else {\n                return prev;\n              }\n            }, 0);\n            sums[index] += ' 元';\n          } else {\n            sums[index] = 'N/A';\n          }\n        });\n\n        return sums;\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData6,border:"","show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",sortable:"",label:"数值 1"}}),a("el-table-column",{attrs:{prop:"amount2",sortable:"",label:"数值 2"}}),a("el-table-column",{attrs:{prop:"amount3",sortable:"",label:"数值 3"}})],1),a("el-table",{staticStyle:{width:"100%","margin-top":"20px"},attrs:{data:s.tableData6,border:"",height:"200","summary-method":s.getSummaries,"show-summary":""}},[a("el-table-column",{attrs:{prop:"id",label:"ID",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名"}}),a("el-table-column",{attrs:{prop:"amount1",label:"数值 1（元）"}}),a("el-table-column",{attrs:{prop:"amount2",label:"数值 2（元）"}}),a("el-table-column",{attrs:{prop:"amount3",label:"数值 3（元）"}})],1)]],2),a("p",[s._v("将"),a("code",[s._v("show-summary")]),s._v("设置为"),a("code",[s._v("true")]),s._v("就会在表格尾部展示合计行。默认情况下，对于合计行，第一列不进行数据求合操作，而是显示「合计」二字（可通过"),a("code",[s._v("sum-text")]),s._v("配置），其余列会将本列所有数值进行求合操作，并显示出来。当然，你也可以定义自己的合计逻辑。使用"),a("code",[s._v("summary-method")]),s._v("并传入一个方法，返回一个数组，这个数组中的各项就会显示在合计行的各列中，具体可以参考本例中的第二个表格。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  \n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData6"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":summary-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getSummaries"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-summary")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%; margin-top: 20px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 1（元）"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 2（元）"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"amount3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"数值 3（元）"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData6")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'234'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'3.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'165'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.43'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("12")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987124'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'324'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1.9'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'621'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2.2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("17")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount1")]),s._v(": "),a("span",{
+staticClass:"hljs-string"},[s._v("'539'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'4.1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("amount3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getSummaries(param) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" { columns, data } = param;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" sums = [];\n        columns.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("column, index")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'总价'")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(";\n          }\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" values = data.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(item[column.property]));\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!values.every("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value))) {\n            sums[index] = values.reduce("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("prev, curr")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" value = "),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v("(curr);\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("isNaN")]),s._v("(value)) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev + curr;\n              } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" prev;\n              }\n            }, "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n            sums[index] += "),a("span",{staticClass:"hljs-string"},[s._v("' 元'")]),s._v(";\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            sums[index] = "),a("span",{staticClass:"hljs-string"},[s._v("'N/A'")]),s._v(";\n          }\n        });\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" sums;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23),s._m(24),s._m(25),s._m(26)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table 表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带斑马纹表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带边框表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带状态表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列和表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"liu-ti-gao-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 流体高度")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-ji-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多级表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"pai-xu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 排序")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shai-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 筛选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义列模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhan-kai-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 展开行")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-wei-he-ji-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-wei-he-ji-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表尾合计行")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("显示的数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table 的最大高度")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("是否为斑马纹 table")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("是否带有纵向边框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("列的宽度是否自撑开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("是否显示表头")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("是否要高亮当前行")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("当前行的 key，只写属性")]),a("td",[s._v("String,Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("空数据时显示的文本内容，也可以通过 "),a("code",[s._v('slot="empty"')]),s._v(" 设置")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("暂无数据")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("默认的排序列的prop和顺序。它的"),a("code",[s._v("prop")]),s._v("属性指定默认的排序的列，"),a("code",[s._v("order")]),s._v("指定默认排序的顺序")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("如果只指定了"),a("code",[s._v("prop")]),s._v(", 没有指定"),a("code",[s._v("order")]),s._v(", 则默认顺序是ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" 属性")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")]),a("tr",[a("td",[s._v("show-summary")]),a("td",[s._v("是否在表尾显示合计行")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sum-text")]),a("td",[s._v("合计行第一列的文本")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("合计")])]),a("tr",[a("td",[s._v("summary-method")]),a("td",[s._v("自定义的合计计算方法")]),a("td",[s._v("Function({ columns, data })")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("当用户手动勾选全选 Checkbox 时触发的事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("当选择项发生变化时会触发该事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("当单元格 hover 进入时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("当单元格 hover 退出时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("当某个单元格被点击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("当某个单元格被双击击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("当某一行被点击时会触发该事件")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("当某一行被鼠标右键点击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("当某一行被双击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("当某一列的表头被点击时会触发该事件")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("当表格的排序条件发生变化的时候会触发该事件")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("当拖动表头改变了列的宽度的时候会触发该事件")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("当用户对某一行展开或者关闭的上会触发该事件")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("用于多选表格，清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("用于多选表格，切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),a("td",[s._v("row, selected")])]),a("tr",[a("td",[s._v("setCurrentRow")]),a("td",[s._v("用于单选表格，设定某一行为选中行，如果调用时不加参数，则会取消目前高亮行的选中状态。")]),a("td",[s._v("row")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("append")]),a("td",[s._v("插入至表格最后一行之后的内容，仍然位于 "),a("code",[s._v("<tbody>")]),s._v(" 标签内。如果需要对表格的内容进行无限滚动操作，可能需要用到这个 slot。若表格有合计行，该 slot 会位于合计行之上。")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("对应列的类型。如果设置了 "),a("code",[s._v("selection")]),s._v(" 则显示多选框；如果设置了 "),a("code",[s._v("index")]),s._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("显示的标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("对应列内容的字段名，也可以使用 property 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("对应列的宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),a("td",[s._v("string, boolean")]),a("td",[s._v("true, left, right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("列标题 Label 区域渲染使用的 Function")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, 'custom'")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("用来格式化内容")]),a("td",[s._v("Function(row, column)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("当内容过长被隐藏时显示 tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("列的 className")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("当前列标题的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("数据过滤的选项是否多选")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(471)},function(s,t,a){var l=a(13)(a(472),a(473),null,null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("分隔内容上有关联但属于不同类别的数据集合。")]),s._m(1),a("p",[s._v("基础的、简洁的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: 'second'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{on:{"tab-click":s.handleClick},model:{value:s.activeName,callback:function(t){s.activeName=t},expression:"activeName"}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),a("code",[s._v("value")]),s._v(" 属性来指定当前选中的标签页。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'second'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项卡样式的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName2: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick},model:{value:s.activeName2,callback:function(t){s.activeName2=t},expression:"activeName2"}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("只需要设置 "),a("code",[s._v("type")]),s._v(" 属性为 "),a("code",[s._v("card")]),s._v(" 就可以使选项卡改变为标签风格。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("卡片化的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n  <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n  <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"用户管理"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("p",[s._v("将"),a("code",[s._v("type")]),s._v("设置为"),a("code",[s._v("border-card")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
+},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" 我的行程")]),s._v("\n    我的行程\n  ")]),a("el-tab-pane",{attrs:{label:"消息中心"}},[s._v("消息中心")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" 我的行程"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    我的行程\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息中心"')]),s._v(">")]),s._v("消息中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs v-model="editableTabsValue" type="card" editable @edit="handleTabsEdit">\n  <el-tab-pane :key="item.name" v-for="(item, index) in editableTabs" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\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(targetName, action) {\n        if (action === 'add') {\n          let 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          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let 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(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"card",editable:""},on:{edit:s.handleTabsEdit},model:{value:s.editableTabsValue,callback:function(t){s.editableTabsValue=t},expression:"editableTabsValue"}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleTabsEdit(targetName, action) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n          });\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n            tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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() {\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(targetName) {\n        let 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(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let 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(tab => tab.name !== targetName);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n    add tab\n  ")])],1),a("el-tabs",{attrs:{type:"card",closable:""},on:{"tab-remove":s.removeTab},model:{value:s.editableTabsValue2,callback:function(t){s.editableTabsValue2=t},expression:"editableTabsValue2"}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{key:t.name,attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n  >")]),s._v("\n    add tab\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs 标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选项卡样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以通过具名 "),a("code",[s._v("slot")]),s._v(" 来实现自定义标签页的内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义增加标签页触发器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("风格类型")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("标签是否可增加")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("标签是否同时可增加和关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("选中选项卡的 name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("第一个选项卡的 name")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值，选中选项卡的 name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("第一个选项卡的 name")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("tab 被选中时触发")]),a("td",[s._v("被选中的标签 tab 实例")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("点击 tab 移除按钮后触发")]),a("td",[s._v("被删除的标签的 name")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("点击 tabs 的新增按钮后触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项卡标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("与选项卡 activeName 对应的标识符，表示选项卡别名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(475)},function(s,t,a){function l(s){a(476)}var n=a(13)(a(478),a(479),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"gray"},{name:"标签三",type:"primary"},{name:"标签四",type:"success"},{name:"标签五",type:"warning"},{name:"标签六",type:"danger"}],dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于标记和选择。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>标签一</el-tag>\n<el-tag type="gray">标签二</el-tag>\n<el-tag type="primary">标签三</el-tag>\n<el-tag type="success">标签四</el-tag>\n<el-tag type="warning">标签五</el-tag>\n<el-tag type="danger">标签六</el-tag>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("标签一")]),a("el-tag",{attrs:{type:"gray"}},[s._v("标签二")]),a("el-tag",{attrs:{type:"primary"}},[s._v("标签三")]),a("el-tag",{attrs:{type:"success"}},[s._v("标签四")]),a("el-tag",{attrs:{type:"warning"}},[s._v("标签五")]),a("el-tag",{attrs:{type:"danger"}},[s._v("标签六")])],1),a("p",[s._v("由"),a("code",[s._v("type")]),s._v("属性来选择tag的类型，也可以通过"),a("code",[s._v("color")]),s._v("属性来自定义背景色。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("标签一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("标签二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("标签三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("标签四"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("标签五"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("标签六"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :key="item.name" :closable="true" :type="tag.type">\n{{tag.name}}\n</el-tag>\n\n\n',
+script:"\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签二', type: 'gray' },\n          { name: '标签三', type: 'primary' },\n          { name: '标签四', type: 'success' },\n          { name: '标签五', type: 'warning' },\n          { name: '标签六', type: 'danger' }\n        ]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{key:s.item.name,attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[s._v("设置"),a("code",[s._v("closable")]),s._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),a("code",[s._v("close-transition")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，true 为关闭。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签一'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签二'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签三'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签四'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签五'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签六'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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() {\n      return {\n        dynamicTags: ['标签一', '标签二', '标签三'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let 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}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},on:{blur:s.handleInputConfirm},nativeOn:{keyup:function(t){return"button"in t||!s._k(t.keyCode,"enter",13)?void s.handleInputConfirm(t):null}},model:{value:s.inputValue,callback:function(t){s.inputValue=t},expression:"inputValue"}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'标签一'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标签二'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标签三'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(tag) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      },\n\n      showInput() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag 标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可移除标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态编辑标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),a("code",[s._v("close")]),s._v(" 事件来实现")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("是否禁用关闭时的渐变动画")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("是否有边框描边")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭tag时触发的事件")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(481)},function(s,t,a){function l(s){a(482)}var n=a(13)(a(484),a(485),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于选择或输入日期")]),s._m(1),a("p",[s._v("提供几个固定的时间点供用户选择")]),a("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=\"选择时间\">\n</el-time-select>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})],1),a("p",[s._v("使用 el-time-select 标签，分别通过"),a("code",[s._v("star")]),s._v("、"),a("code",[s._v("end")]),s._v("和"),a("code",[s._v("step")]),s._v("指定可选的起始时间、结束时间和步长")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以选择任意时间")]),a("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="任意时间点">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("使用 el-time-picker 标签，通过"),a("code",[s._v("selectableRange")]),s._v("限制可选时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"任意时间点"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n  <el-time-select placeholder=\"起始时间\" 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=\"结束时间\" 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() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},model:{value:s.startTime,callback:function(t){s.startTime=t},expression:"startTime"}}),a("el-time-select",{attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},model:{value:s.endTime,callback:function(t){s.endTime=t},expression:"endTime"}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"起始时间"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"结束时间"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可选择任意的时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-time-picker is-range v-model="value3" placeholder="选择时间范围">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{attrs:{"is-range":"",placeholder:"选择时间范围"},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}})]],2),a("p",[s._v("添加"),a("code",[s._v("is-range")]),s._v("属性即可选择时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker 时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("TimePicker: DateTimeSelect: String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("TimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("开始时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("结束时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("间隔时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("最小时间，小于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("最大时间，大于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("可选时间段，例如"),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("或者传入数组"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间格式化(TimePicker)")]),a("td",[s._v("string")]),a("td",[s._v("小时："),a("code",[s._v("HH")]),s._v("，分："),a("code",[s._v("mm")]),s._v("，秒："),a("code",[s._v("ss")])]),a("td",[s._v("'HH:mm:ss'")])])])]);
+},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(487)},function(s,t,a){function l(s){a(488)}var n=a(13)(a(490),a(491),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用于展示鼠标 hover 时的提示信息。")]),s._m(1),a("p",[s._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),a("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 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <el-button>下右</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: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[a("el-button",[s._v("上左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[a("el-button",[s._v("上边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[a("el-button",[s._v("上右")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[a("el-button",[s._v("左上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[a("el-button",[s._v("左边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[a("el-button",[s._v("左下")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[a("el-button",[s._v("右上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[a("el-button",[s._v("右边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[a("el-button",[s._v("右下")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[a("el-button",[s._v("下左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[a("el-button",[s._v("下边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[a("el-button",[s._v("下右")])],1)],1)])]),a("p",[s._v("使用"),a("code",[s._v("content")]),s._v("属性来决定"),a("code",[s._v("hover")]),s._v("时的提示信息。由"),a("code",[s._v("placement")]),s._v("属性决定展示效果："),a("code",[s._v("placement")]),s._v("属性值为："),a("code",[s._v("方向-对齐位置")]),s._v("；四个方向："),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("、"),a("code",[s._v("right")]),s._v("、"),a("code",[s._v("bottom")]),s._v("；三种对齐位置："),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v("，默认为空。如"),a("code",[s._v('placement="left-end"')]),s._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上左"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上右"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左上"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左下"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右上"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右下"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下左"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下右"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("通过设置"),a("code",[s._v("effect")]),s._v("属性来改变主题，默认为"),a("code",[s._v("dark")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("展示多行文本或者是设置文本内容的格式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip placement="top">\n  <div slot="content">多行信息<br>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("多行信息"),a("br"),s._v("第二行信息")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("用具名 slot 分发"),a("code",[s._v("content")]),s._v("，替代"),a("code",[s._v("tooltip")]),s._v("中的"),a("code",[s._v("content")]),s._v("属性。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("多行信息"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("第二行信息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("点击"+s._s(s.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"点击关闭 tooltip 功能"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("点击"),a("span",[s._v("{{")]),s._v("disabled ? '开启' : '关闭'"),a("span",[s._v("}}")]),s._v(" tooltip 功能"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip 文字提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip 组件提供了两个不同的主题："),a("code",[s._v("dark")]),s._v("和"),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"geng-duo-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更多 Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 高级扩展")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._v(" 属性可以定制显隐的动画效果，默认为"),a("code",[s._v("fade-in-linear")]),s._v("。\n如果需要关闭 "),a("code",[s._v("tooltip")]),s._v(" 功能，"),a("code",[s._v("disabled")]),s._v(" 属性可以满足这个需求，它接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("事实上，这是基于 "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("tooltip 内不支持 "),a("code",[s._v("router-link")]),s._v(" 组件，请使用 "),a("code",[s._v("vm.$router.push")]),s._v(" 代替。")]),a("p",[s._v("tooltip 内不支持 disabled form 元素，参考"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("默认提供的主题")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",[s._v("slot#content")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("Tooltip 的出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Tooltip 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("el-fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"
+}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("延迟出现，单位毫秒")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 Tooltip 的 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("鼠标是否可进入到 tooltip 中")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(493)},function(s,t,a){function l(s){a(494)}var n=a(13)(a(496),a(497),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=function(s){for(var t=[],a=1;a<=15;a++)t.push({key:a,label:"备选项 "+a,disabled:a%4===0});return t},t=function(s){var t=[],a=["上海","北京","广州","深圳","南京","西安","成都"],l=["shanghai","beijing","guangzhou","shenzhen","nanjing","xian","chengdu"];return a.forEach(function(s,a){t.push({label:s,key:a,pinyin:l[a]})}),t},a=function(s){for(var t=[],a=1;a<=15;a++)t.push({value:a,desc:"备选项 "+a,disabled:a%4===0});return t};return{data:s(),data2:t(),data3:a(),value1:[1,4],value2:[],value3:[1],value4:[],filterMethod:function(s,t){return t.pinyin.indexOf(s)>-1},renderFunc:function(s,t){return s("span",null,[t.key," - ",t.label])}}},methods:{handleChange:function(s,t,a){console.log(s,t,a)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-transfer v-model="value1" :data="data"></el-transfer>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{data:s.data},model:{value:s.value1,callback:function(t){s.value1=t},expression:"value1"}})]],2),a("p",[s._v("Transfer 的数据通过 "),a("code",[s._v("data")]),s._v(" 属性传入。数据需要是一个对象数组，每个对象有以下属性："),a("code",[s._v("key")]),s._v(" 为数据的唯一性标识，"),a("code",[s._v("label")]),s._v(" 为显示文本，"),a("code",[s._v("disabled")]),s._v(" 表示该项数据是否禁止转移。目标列表中的数据项会同步到绑定至 "),a("code",[s._v("v-model")]),s._v(" 的变量，值为数据项的 "),a("code",[s._v("key")]),s._v(" 所组成的数组。当然，如果希望在初始状态时目标列表不为空，可以像本例一样为 "),a("code",[s._v("v-model")]),s._v(" 绑定的变量赋予一个初始值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`备选项 "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("在数据很多的情况下，可以对数据进行搜索和过滤。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-transfer filterable :filter-method="filterMethod" filter-placeholder="请输入城市拼音" v-model="value2" :data="data2">\n  </el-transfer>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      const generateData2 = _ => {\n        const data = [];\n        const cities = ['上海', '北京', '广州', '深圳', '南京', '西安', '成都'];\n        const pinyin = ['shanghai', 'beijing', 'guangzhou', 'shenzhen', 'nanjing', 'xian', 'chengdu'];\n        cities.forEach((city, index) => {\n          data.push({\n            label: city,\n            key: index,\n            pinyin: pinyin[index]\n          });\n        });\n        return data;\n      };\n      return {\n        data2: generateData2(),\n        value2: [],\n        filterMethod(query, item) {\n          return item.pinyin.indexOf(query) > -1;\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","filter-method":s.filterMethod,"filter-placeholder":"请输入城市拼音",data:s.data2},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})]],2),a("p",[s._v("设置 "),a("code",[s._v("filterable")]),s._v(" 为 "),a("code",[s._v("true")]),s._v(" 即可开启搜索模式。默认情况下，若数据项的 "),a("code",[s._v("label")]),s._v(" 属性包含搜索关键字，则会在搜索结果中显示。你也可以使用 "),a("code",[s._v("filter-method")]),s._v(" 定义自己的搜索逻辑。"),a("code",[s._v("filter-method")]),s._v(" 接收一个方法，当搜索关键字变化时，会将当前的关键字和每个数据项传给该方法。若方法返回 "),a("code",[s._v("true")]),s._v("，则会在搜索结果中显示对应的数据项。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filter-placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入城市拼音"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData2 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cities = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'西安'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" pinyin = ["),a("span",{staticClass:"hljs-string"},[s._v("'shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'shenzhen'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'nanjing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'xian'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'chengdu'")]),s._v("];\n        cities.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("city, index")]),s._v(") =>")]),s._v(" {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": city,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": index,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("pinyin")]),s._v(": pinyin[index]\n          });\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": generateData2(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": [],\n        filterMethod(query, item) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.pinyin.indexOf(query) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以对列表标题文案、按钮文案、数据项的渲染函数、列表底部的勾选状态文案、列表底部的内容区等进行自定义。")]),a("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="[\'到左边\', \'到右边\']" :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">操作</el-button>\n    <el-button class="transfer-footer" slot="right-footer" size="small">操作</el-button>\n  </el-transfer>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      const generateData = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            key: i,\n            label: `备选项 ${ 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(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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{filterable:"","left-default-checked":[2,3],"right-default-checked":[1],"render-content":s.renderFunc,titles:["Source","Target"],"button-texts":["到左边","到右边"],"footer-format":{noChecked:"${total}",hasChecked:"${checked}/${total}"},data:s.data},on:{change:s.handleChange},model:{value:s.value3,callback:function(t){s.value3=t},expression:"value3"}},[a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"left-footer"},[s._v("操作")]),a("el-button",{staticClass:"transfer-footer",attrs:{size:"small"},slot:"right-footer"},[s._v("操作")])],1)]],2),a("p",[s._v("可以使用 "),a("code",[s._v("titles")]),s._v("、"),a("code",[s._v("button-texts")]),s._v("、"),a("code",[s._v("render-content")]),s._v(" 和 "),a("code",[s._v("footer-format")]),s._v(" 属性分别对列表标题文案、按钮文案、数据项的渲染函数和列表底部的勾选状态文案进行自定义。对于列表底部的内容区，提供了两个具名 slot："),a("code",[s._v("left-footer")]),s._v(" 和 "),a("code",[s._v("right-footer")]),s._v("。此外，如果希望某些数据项在初始化时就被勾选，可以使用 "),a("code",[s._v("left-default-checked")]),s._v(" 和 "),a("code",[s._v("right-default-checked")]),s._v(" 属性。最后，本例还展示了 "),a("code",[s._v("change")]),s._v(" 事件的用法。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":left-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":right-default-checked")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[1]"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderFunc"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":titles")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['Source', 'Target']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":button-texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['到左边', '到右边']\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":footer-format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      noChecked: '${total}',\n      hasChecked: '${checked}/${total}'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transfer-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("操作"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transfer-footer")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("5px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`备选项 "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": generateData(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("],\n        renderFunc(h, option) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"xml"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("{ option.key } - { option.label }"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")])]),s._v(";\n        }\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value, direction, movedKeys) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value, direction, movedKeys);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      const generateData3 = _ => {\n        const data = [];\n        for (let i = 1; i <= 15; i++) {\n          data.push({\n            value: i,\n            desc: `备选项 ${ 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-transfer",{attrs:{props:{key:"value",label:"desc"},data:s.data3},model:{value:s.value4,callback:function(t){s.value4=t},expression:"value4"}})]],2),a("p",[s._v("本例中的数据源没有 "),a("code",[s._v("key")]),s._v(" 和 "),a("code",[s._v("label")]),s._v(" 字段，在功能上与它们相同的字段名为 "),a("code",[s._v("value")]),s._v(" 和 "),a("code",[s._v("desc")]),s._v("。因此可以使用"),a("code",[s._v("props")]),s._v(" 属性为 "),a("code",[s._v("key")]),s._v(" 和 "),a("code",[s._v("label")]),s._v(" 设置别名。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      key: 'value',\n      label: 'desc'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-transfer")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" generateData3 = "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" data = [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("for")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" i = "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("; i <= "),a("span",{staticClass:"hljs-number"},[s._v("15")]),s._v("; i++) {\n          data.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": i,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`备选项 "),a("span",{staticClass:"hljs-subst"},[s._v("${ i }")]),s._v("`")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": i % "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(" === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n          });\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data;\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data3")]),s._v(": generateData3(),\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": []\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"transfer-chuan-suo-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#transfer-chuan-suo-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Transfer 穿梭框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-ju-xiang-shu-xing-bie-ming"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-ju-xiang-shu-xing-bie-ming","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数据项属性别名")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("默认情况下，Transfer 仅能识别数据项中的 "),a("code",[s._v("key")]),s._v("、"),a("code",[s._v("label")]),s._v(" 和 "),a("code",[s._v("disabled")]),s._v(" 字段。如果你的数据的字段名不同，可以使用 "),a("code",[s._v("props")]),s._v(" 属性为它们设置别名。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("Transfer 的数据源")]),a("td",[s._v("array[{ key, label, disabled }]")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-placeholder")]),a("td",[s._v("搜索框占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请输入搜索内容")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("自定义搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("titles")]),a("td",[s._v("自定义列表标题")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['列表 1', '列表 2']")])]),a("tr",[a("td",[s._v("button-texts")]),a("td",[s._v("自定义按钮文案")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("自定义数据项渲染函数")]),a("td",[s._v("function(h, option)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("footer-format")]),a("td",[s._v("列表底部勾选状态文案")]),a("td",[s._v("object{noChecked, hasChecked}")]),a("td",[s._v("—")]),a("td",[s._v("{ noChecked: '共 ${total} 项', hasChecked: '已选 ${checked}/${total} 项' }")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("数据源的字段别名")]),a("td",[s._v("object{key, label, disabled}")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("left-default-checked")]),a("td",[s._v("初始状态下左侧列表的已勾选项的 key 数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])]),a("tr",[a("td",[s._v("right-default-checked")]),a("td",[s._v("初始状态下右侧列表的已勾选项的 key 数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[ ]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("left-footer")]),a("td",[s._v("左侧列表底部的内容")])]),a("tr",[a("td",[s._v("right-footer")]),a("td",[s._v("右侧列表底部的内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("右侧列表元素变化时触发")]),a("td",[s._v("当前值、数据移动的方向（'left' / 'right'）、发生移动的数据 key 数组")])])])])}]}},function(s,t,a){s.exports=a(499)},function(s,t,a){function l(s){a(500)}var n=a(13)(a(502),a(503),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{show:!0,show2:!0,show3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("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: () => ({\n      show: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show=!s.show}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-fade-in-linear"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in-linear")])]),a("transition",{attrs:{name:"el-fade-in"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show,expression:"show"}],staticClass:"transition-box"},[s._v(".el-fade-in")])])],1)],1)]],2),a("p",[s._v("提供 "),a("code",[s._v("el-fade-in-linear")]),s._v(" 和 "),a("code",[s._v("el-fade-in")]),s._v(" 两种效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{
+staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show = !show"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in-linear"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in-linear"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-fade-in"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-fade-in"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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: () => ({\n      show2: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show2=!s.show2}}},[s._v("Click Me")]),a("div",{staticStyle:{display:"flex","margin-top":"20px",height:"100px"}},[a("transition",{attrs:{name:"el-zoom-in-center"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-center")])]),a("transition",{attrs:{name:"el-zoom-in-top"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-top")])]),a("transition",{attrs:{name:"el-zoom-in-bottom"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show2,expression:"show2"}],staticClass:"transition-box"},[s._v(".el-zoom-in-bottom")])])],1)],1)]],2),a("p",[s._v("提供 "),a("code",[s._v("el-zoom-in-center")]),s._v("，"),a("code",[s._v("el-zoom-in-top")]),s._v(" 和 "),a("code",[s._v("el-zoom-in-bottom")]),s._v(" 三种效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2 = !show2"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"display: flex; margin-top: 20px; height: 100px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-center"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-top"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-zoom-in-bottom"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v(".el-zoom-in-bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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: () => ({\n      show3: true\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",[a("el-button",{on:{click:function(t){s.show3=!s.show3}}},[s._v("Click Me")]),a("div",{staticStyle:{"margin-top":"20px",height:"200px"}},[a("el-collapse-transition",[a("div",{directives:[{name:"show",rawName:"v-show",value:s.show3,expression:"show3"}]},[a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")]),a("div",{staticClass:"transition-box"},[s._v("el-collapse-transition")])])])],1)],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3 = !show3"')]),s._v(">")]),s._v("Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 20px; height: 200px;"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-show")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"show3"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"transition-box"')]),s._v(">")]),s._v("el-collapse-transition"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-transition")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" ({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n    })\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".transition-box")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20A0FF")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(" "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("box-sizing")]),s._v(": border-box;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"nei-zhi-guo-du-dong-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nei-zhi-guo-du-dong-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 内置过渡动画")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 内应用在部分组件的过渡动画，你也可以直接使用。在使用之前请阅读 "),a("a",{attrs:{href:"https://cn.vuejs.org/v2/api/#transition"}},[s._v("transition 组件文档")]),s._v(" 。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fade-dan-ru-dan-chu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fade-dan-ru-dan-chu","aria-hidden":"true"}},[s._v("¶")]),s._v(" fade 淡入淡出")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zoom-suo-fang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zoom-suo-fang","aria-hidden":"true"}},[s._v("¶")]),s._v(" zoom 缩放")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-zhan-kai-zhe-die"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhan-kai-zhe-die","aria-hidden":"true"}},[s._v("¶")]),s._v(" collapse 展开折叠")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("el-collapse-transition")]),s._v(" 组件实现折叠展开效果。")])}]}},function(s,t,a){s.exports=a(505)},function(s,t,a){function l(s){a(506)}var n=a(13)(a(508),a(509),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0;var a=[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],l=[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],n=1e3,e=[{name:"region1"},{name:"region2"}],i=1,v={label:"name",children:"zones"},_={children:"children",label:"label"};t.default={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){if(0===s.level)return t([{name:"region1"},{name:"region2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s;s=a?[{name:"zone"+i++},{name:"zone"+i++}]:[],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:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;return s("span",null,[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(e,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,regions:e,defaultProps:_,props:v,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用清晰的层级结构展示信息，可展开或折叠。")]),s._m(1),a("p",[s._v("基础的树形结构展示。")]),a("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: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。")]),a("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: 'region1' }, { name: 'region2' }]);\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(() => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckChange(data, checked, indeterminate) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      },\n      loadNode(node, resolve) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(" }]);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),a("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() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("分别通过"),a("code",[s._v("default-expanded-keys")]),s._v("和"),a("code",[s._v("default-checked-keys")]),s._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),a("code",[s._v("node-key")]),s._v("，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("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">通过 node 获取</el-button>\n  <el-button @click="getCheckedKeys">通过 key 获取</el-button>\n  <el-button @click="setCheckedNodes">通过 node 设置</el-button>\n  <el-button @click="setCheckedKeys">通过 key 设置</el-button>\n  <el-button @click="resetChecked">清空</el-button>\n</div>\n\n\n',script:"\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("通过 node 获取")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("通过 key 获取")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("通过 node 设置")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("通过 key 设置")]),a("el-button",{on:{click:s.resetChecked}},[s._v("清空")])],1)],1),a("p",[s._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),a("code",[s._v("node-key")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("通过 node 获取"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("通过 key 获取"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("通过 node 设置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("通过 key 设置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("清空"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n        }]);\n      },\n      setCheckedKeys() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n      },\n      resetChecked() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),a("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  let id = 1000;\n\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: 'testtest', children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\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={ () => this.append(store, data) }>Append</el-button>\n              <el-button size=\"mini\" on-click={ () => this.remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("使用"),a("code",[s._v("render-content")]),s._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n  export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        data2: [{\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            children: [{\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        defaultProps: {\n          children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n          <span>\n            <span>\n              <span>{node.label}</span>\n            </span>\n            <span style="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; margin-right: 20px"')]),s._v(">\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append</el-button>\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"
+},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("通过关键字过滤树节点")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="输入关键字进行过滤" 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(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{attrs:{placeholder:"输入关键字进行过滤"},model:{value:s.filterText,callback:function(t){s.filterText=t},expression:"filterText"}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("在需要对节点进行过滤时，调用 Tree 实例的"),a("code",[s._v("filter")]),s._v("方法，参数为关键字。需要注意的是，此时需要设置"),a("code",[s._v("filter-node-method")]),s._v("，值为过滤函数。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"输入关键字进行过滤"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("对于同一级的节点，每次只能展开一个")]),a("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() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree 树形控件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认展开和默认选中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 树节点的选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义节点内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jie-dian-guo-lu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 节点过滤")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴模式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("展示数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("内容为空的时候展示的文本")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("每个树节点用来作为唯一标识的属性，整颗树应该是唯一的")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体看下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("加载子树数据的方法")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("树节点的内容区的渲染 Function")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("是否高亮当前选中节点，默认值是 false。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("当前选中节点的 key，只写属性")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("是否默认展开所有节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("展开子节点的时候是否自动展开父节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("默认展开的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("节点是否可被选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("默认勾选的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否每次只打开一个同级树节点展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("相邻级节点间的水平缩进，单位为像素")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定节点标签为节点对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定子树为节点对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" 拥有如下方法，返回目前被选中的节点数组：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("对树节点进行筛选操作")]),a("td",[s._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("若节点可被选择（即 "),a("code",[s._v("show-checkbox")]),s._v(" 为 "),a("code",[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅返回被选中的叶子节点，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(nodes) 接收勾选节点数据的数组")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("若节点可被选择（即 "),a("code",[s._v("show-checkbox")]),s._v(" 为 "),a("code",[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅设置叶子节点的选中状态，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("节点被点击时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("节点选中状态发生变化时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当前选中节点变化时触发的事件")]),a("td",[s._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("节点被展开时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("节点被关闭时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])])])])}]}},function(s,t,a){s.exports=a(511)},function(s,t,a){function l(s){a(512)}var n=a(13)(null,a(514),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography 字体")]),a("p",[s._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),a("h3",{attrs:{id:"zhong-wen-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-wen-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中文字体")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"ying-wen-shu-zi-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ying-wen-shu-zi-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 英文／数字字体")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family-dai-ma"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family 代码")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"zi-ti-shi-yong-gui-fan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti-shi-yong-gui-fan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 字体使用规范")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("主标题")]),a("td",{staticClass:"h1"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("标题")]),a("td",{staticClass:"h2"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("小标题")]),a("td",{staticClass:"h3"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("正文")]),a("td",{staticClass:"text-regular"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("正文（小）")]),a("td",{staticClass:"text-small"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("辅助文字")]),a("td",{staticClass:"text-smaller"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(516)},function(s,t,a){function l(s){a(517)}var n=a(13)(a(519),a(520),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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!(s.size>4e7)||(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,a=s.size/1024/1024<2;return t||this.$message.error("上传头像图片只能是 JPG 格式!"),a||this.$message.error("上传头像图片大小不能超过 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过点击或者拖拽上传文件")]),s._m(1),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("p",[s._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{
+staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('上传头像图片只能是 JPG 格式!');\n        }\n        if (!isLt2M) {\n          this.$message.error('上传头像图片大小不能超过 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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'上传头像图片只能是 JPG 格式!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'上传头像图片大小不能超过 2MB!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{attrs:{size:"tiny"},model:{value:s.dialogVisible,callback:function(t){s.dialogVisible=t},expression:"dialogVisible"}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\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(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\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(file, fileList) {\n        this.fileList3 = fileList.slice(-3);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("将文件拖到此处，或"),a("em",[s._v("点击上传")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("将文件拖到此处，或"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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      submitUpload() {\n        this.$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",
+style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,"auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("选取文件")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("上传到服务器")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("选取文件"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("上传到服务器"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload 上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-ji-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 点击上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 用户头像上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("before-upload")]),s._v(" 限制用户上传的图片格式和大小。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhao-pian-qiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 照片墙")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("list-type")]),s._v(" 属性来设置文件列表的样式。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图片列表缩略图")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 上传文件列表控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",[s._v("on-change")]),s._v(" 钩子函数来对列表进行控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 拖拽上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-dong-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手动上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("必选参数, 上传的地址")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("可选参数, 设置上传的请求头部")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("可选参数, 是否支持多选文件")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("可选参数, 上传时附带的额外参数")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("可选参数, 上传的文件字段名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("支持发送 cookie 凭证信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("是否显示已上传文件列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("是否启用拖拽上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("可选参数, 接受上传的"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("文件类型")]),s._v("（thumbnail-mode 模式下此参数无效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("可选参数, 文件列表移除文件时的钩子")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("可选参数, 文件上传成功时的钩子")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("可选参数, 文件上传失败时的钩子")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("可选参数, 文件上传时的钩子")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("可选参数, 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("文件列表的类型")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("是否在选取文件后立即进行上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("覆盖默认的上传行为，可以自定义上传的实现")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("清空已上传的文件列表")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/guide.vue":522,"./zh-CN/guide.vue":527};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=521},function(s,t,a){function l(s){a(523)}var n=a(13)(a(525),a(526),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(528)}var n=a(13)(a(530),a(531),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/design.vue":533,"./zh-CN/design.vue":541};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=532},function(s,t,a){function l(s){a(534)}var n=a(13)(null,a(536),l,"data-v-f413aa2a",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Design Disciplines")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(537),alt:"Consistency"}}),l("h4",[s._v("Consistency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(538),alt:"Feedback"}}),l("h4",[s._v("Feedback")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(539),alt:"Efficiency"}}),l("h4",[s._v("Efficiency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(540),alt:"Controllability"}}),l("h4",[s._v("Controllability")]),l("span")])])],1),l("h3",[s._v("Consistency")]),s._m(0),l("h3",[s._v("Feedback")]),s._m(1),l("h3",[s._v("Efficiency")]),s._m(2),l("h3",[s._v("Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("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.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}]}},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl09S47zlHH5x8w8GiR8nGFK82dN6dgnkWWRt/QiE65DQqj9FsmhpzoEqZ/qWgNKSBnBAPh21WPphirQQQFhpXnUS7vggQCUyJNF5zmQfbxdQkkdv3TtSNesNgUI4yeSt/T8cse1FkaElaDpBwYQCZcdhx4JmnBc4X637VumEzRy7vcIE3TJW3pBdek1nDAirASN33qyjQ6xvym5f8Wtmbs6BNFTeVWA6PULi86PwhQ/NIDlMl9eYf4UEBbDZKRhM64AUWmM6OpCgT4PU9LATbCfqGSAKvZX/r6uVQFRQJgIC58Xrxf50MsZmi3zP7De0kt8jZMtBQDfexMF+h7WoR9YhG6CfekWmDedL/HHeNi80T+m6/wpgLF+J0eKdO04EWbxC7+EboL9LLwMh2g7qHf9Y7rOlwKe78FAr/CJWj0DKJEnx+gddEael21dcqgAfO8x0EfRe26C/TzlenCmjC9rMd/sH9N1DhQgOjxZoK29XPc1qtM3gJLYwgJfet5414MbGhPX7WwqgOu+UyMG133j9GW/JeyrCfYzF0PwT7gDffGSf0zXGVUAPhZfRwGfKBQJgJLQRJGO4jHM3TBuSfZ1yZ4C4lvxsfg6qtJFBqAYhBEQb8PIB/HDV1h1yZIC4lPxrfg4ynJFCqAYhhuSr7Chn0dppKY1eAXEp+LbqC2JHEAx8MIi4ZVOo+MHo/bWgNITX4pP48g+kl5wK8Nwe4ZmS+4f0RbvaHVej6VDAQCyd6LoPBzXZVUsNaBIKwZXDdeaMB2orbZSar444fM4WZ1t9Ee+KfFOMvwbqRWjT11TjFoBqTzkmi+uZrfR3sSAwOiZ7QDwz/gFehGq0UjdTk4BwLeE34NxdDhalSIxACXz2Qrf5rp8QAeztnKFBcdwk9m7zxfxrZZOJUsUQDFktsTXoxZ8E8O49LFdJ88kfE4er6HmuyPKm8xBihBbJ6Rd5lJAeY6IXsrhdmH0eMIKwBfik6Thk1ImDqBkKs8RvZEUxjyLf52OJxRRBrCI9mgCnxVfRPVsN2wxEm+Cmw2cqfCtZpnx9ERHVjdrE+e+jGQ2GEza73i+fm0cOIBSAG94f5lfxbXhln4LpPG7K4Ca772RAt3Xz0jm7rkECzGQJrjZNBHCe6nFcZ7QIV3N6kS4L0OpoLFobQN8UjIrasBGiWvvHe/BrZo7G4/rdp8KEL2B93Yf6eXVyT5z7hjdOgB9a89WeBvuGe5Bs3yFf0zX4RVAc3tcPpexboysnPvFWgBFasBXmCm5T0LEx7B9QXj58xsDmi1Cs121j0oF/lZL0opZDaAvBp6gXMWu+zSuGO6BqEP+cV2vVgDg4eVw3i/fdAz6ibTVqSR3JBUA+nIAxCt52X0cHZUHAGL377T5EXOwBnh4L4z3yWdxAR6+apuOJVUA+pKWSnzZonEfw72sHQBxzD+exzXAq8hUCPI1+m4fBLdRn1QC6As5z3zJUtndaZgeghMu8o/nYY0/32mZzUomgek0D4ftWqQaQF9caY5nSuZ2DGO7H8e2YT+THRbUdjJFwEGZ+M+bz0+a3ZQvmQCw0QezzOu5ZO5F7SDXiZsbz6V1G+AdQS2/T+bbbTXlaVrLJXZnDsBGZ3i9ZzZ34+L8FrybciPWhcbz1m7jE7dwzAfobL2LYfEH0tCb7VXLTAPYKApqw9H5itm85Lpb4ditKLiMS7SiJy09WPxBjuIPcmjYcQ6tGTNHcGyx0f6sbucGwGYHAr7x2UVzk2FzHbnuFN66nsL2FDoz65vDRrmPzsMZtDvTeOtimh1nGtsfTYya9wHcQpT5pCWt3ALYzkFnmS82ZTO1TGaK2MXPbAScawHnWsCyFm/roNOJ7dq+lw6bOZybw7k5nJvHOW8fkM3hNayTTM70EJtpUzDT64i+bpd3Ho//Dw7/YlbG4ZiJAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MTtgl/EN2FoFIGfpWyD1il2WqzWtFCjOX6Y3XpmiudyM52zdyAAdvGNrKy+x3xOmhK36iMtrxVVdHWe+OJt3j+HSH1Vd1kPLFJCGRmH+Es3NXsT+6shaPGPR1/7w1+wr/YiOCVv1Mq4CUBwYr6g0qQRwDq8fFoo9umwlGhilpSVaWrpCi1eKyKf67CT6wt3b6e4b7Wt8lJlabW9DANdn6bu5PF9AL+lrVnux90ruwlmaOfeGvQZGaNnwINNX915HH3jHhghjCRY0ej9fGAdTjXyvegYUR6ivF4nN1xt5sPVaP8N3x44x+sG+m6yEz+MFLHlMNYAHTwyNtzljti4VzCtYXHiksYt4rv7Otxv+R2oi70f4pKFx9w3r6MO/vYEmr7d3oQOAVxzM8FvHmN+sybTlk4ZVsNwTDzP50mEc/smyWyt38sZ/ZvpqtfuxW66hm6/NWGlrt0YNOUxbxgbp2rVraGLzCA21/292G2XX/vEYd3iMnYbwSeBNS0C5mc+b666Q+aUssS7nSWytSsB6+P7s9q302F3bkjBT42yggFS7a4ivz2b5tQa3vUst/0OeR2OONPOc5PV6+P78dxW+JPOjYdxgpxV84qclgOKAB5zHQXJJjm3ZGsH3V5Na8tmSP2KHMCPstLOpLYD4dvcLvBl8ul1Acd3PnX+j5pnvAN74K3xxqd9JPObpMjut/bQFULyz4zwGolf6cLUOMrq7ZfjOrkTwScD3md/Tkm9FEEsOhBVhxo85vgCUHgxoiBzyE2BUbnJo6c5M18L3aYUvKrm7CldYqe/10izAlq3gak8INJMrmJ9hv6P6etTH0gquL/k+dedW+stdWvJFrX2Q8FH6nR7P8Nux9zW8w1cJKIZIgI7DDwQxqhs/Cl836sXvVxjxC59Y5xtAcbxuhI+BxO/IcVxbdbV78M5tWvLFJXyQeMCGx0gHfjsCUMIdYX4QEMbe3eSh92yjR3fZ1cetA5173ymY8NjoMKUdA5jJ8KsoYj/XYTxdORf4HnmPwteViBF7FiaEjU6j8d0IqQ4YDZEBNEh+gP2u6utRHD/+b2/SwwpfFNKGFibgO4GGx+9j3/EHi0AAiuXzxly7mDc/wcfmLaGlRANKnQLo63duKMs3jzJf7RHSQSo6roIrYXsRDvB9oN6tXNN9fyng5T0YCAqfqBUYQPG8foS/j37hX5Jj3fpQAeS9x0AXSQ9cBVfilOfB2QJm1jLmzso13feBAswvrM/wZJDnvmp1ugZQApufN9sXyXse3FwduB73pgJ47pseIjz3jfKZblPYVRVciVwMwT9hbxLvBys26D4mBfC+T/I6DPjE4lAAlIDGs3wKn2HuhXF2zgsrRurWlQKSt5LHktddBVTlOTQAJUz0gHgORn4cvwYjVqti1cPUKSB5KnkreRym8aECKIbhheRThvhTYRqpYSWvgOSp5G3YloQOoBi4IctPYIqIRPsPhi1UP4cneSl5GoUGobSCGxmG1zOcy7t/j7p4f6P7ei0dCgCQw+NZ5xNRPVZFUgKKtGJw2XAtCdOB2morpeSLEj6Pk9XRhn9lJm8OMJm/kVIx/NA1xLAVkMJDnvmiqnar7Y0NCPSeuQ8A/gN+TWdjqDZMj5NRAPAt4ffxKBocjVIUG4ASea5odruueQaf7bKNjNFrCSuAl8zee76QX7W0SlWsAIohuby5FaXgs+jGpZ/tWuVMzPfk8xpKvr1hvmT2k4TIGiHNIpcEyndEtFJeaOZGr8esAPJC8iRu+CSVsQMokcp3RK8nBSb0xL9O+xOKKAlsoj2qwC9IXoT1bbfTZMReBdcbOFs076WSwdcT7Vldr02U59KTmdCZtNv+fN3amDiAkgCve3/BfBPPhru6TZD6b68ASr4TQxn+SDc9mdvH4s9FIlVwvWkihDeoxXEe0S5d9eqEeC5dqaCxaG0DfJIyK0rAaokLBfOWojFP4lXNPdXX9bhLBZiPYtzuA0GGTnYZc0vv1gFYsfZS0ezBO8MnUS3vqFzTfecKoLo9LdNldDpjQecxBfNhLYCSHMCXwaI5j0LEh3C8JlgS+9MXNFuAZofWZ50v4tjXREFJKGU1gBVB8AXlRqyF9lk8MXwQolq2AFrFSjv2gA2Dw83TMj+f3ynSkrQ8FQBWBAKIN5iS+zAaKvcDxMQmTq/YY9Me4GFcmDki0+ICPMxqm44tVQBWJJXZ+xfIfQjvsvYDxETXManYlNQe4BVlKYRhcr7cbkLwpGxsFW8qAawkqLyYjnuADO9DJqRqWbFKGoLu8ee7IKtZDWacJ5otAhM07Dj9pRrAilBSHc/m6f3oxvZRXNuD855ssKC0k2V0j8nCf7Ken1ftVkRI6b4nAKzWPmfMRpOnD6F0kOfEndX30noM0E6ilD8i6+02WvI0rekSu3sOwOrM8FrPhu7Fw/ldGJtyG/bpWMMLr02QMS+hsfU8usU/k4bWbLXunRz3NIDVQqA0HJ4r0s4l151Exk4i4dIv0YqWtFSl+IOcwh/k+KDjHB8boZO4lviyGNX6RXXcNwDWCwj4RnMLdDsZeie77gRGXU/geAKNmY31bsM8R+PhIuqdKYy6mDKOM4Xjl8eH6UUANx9mPGkJq28BbJZBl4zZRAWaKDFNsHHxoy2Acy3gXAtY1mK0DhqdOF4+98IxdBn3LuPeZdybwz3vHJBdxjCsc4adqQFDU5ShqXXM55vF3Y/X/x+UKbnM5rRzPQAAAABJRU5ErkJggg=="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk6pW7upY+s8APY8kSDmiD1DlFaR6IlKQIkGBwZFDm5QDHTqPHnyjDh95iy+Um9dtTAGcwMS3TEZrzJRh9QldUrdMlDX1HnkAdgzKjJ6ALKnd+MNvwenySttnQsXx8Xxt07AkdNdY7kd1iJN1s8GCWWibG4CdUcdUpd2oI6pa129azsfJ1diz5Aq2h6wzWgnPEM+ftPNogvjX3aYn18QH3xwwf7p6JpLQcejkaBuZaPuqEM7ULfUMXUdh0DsAYAiNscssGq46WMfF0M7h9f1k3c5N5rr0D+hv85cyDduZavWHXVK3dpNnZBZr5sdsWegO7zaA6gbJfyHHIC97roPicOHj1jVRAGeyk4Dp6/C8q1zylOQ8Sibmyk66o5VLXVJneoYkPcjH7GXRXc4VgC0Bbpm127Rjd6xYTh3zecCorQHyuh0gVMBg9gf++hNoqenN55qAfZw8mY8AUiNdXf3uJrJaMeee2kPbmTkTAp1GNsA7BnopV9p9ceNU5fDMNlsPDycdarRtYwudaiT91raxB6bFbGsgskslnrX8tzwt2HgcEAIk/ZAGSmr0+BGh05pBhWP2DPi2ga0hHTx9WYbbN4TlLLiRMeVrC50GLqMcW8DLmPfZqcB+xE7jZr4eG5kdaPD0BVjWcDQc3WeIfdYcRqwU4vTqImP50ZWNzqMQjGsgoP1Jw9QCje7I8RhailA0ZuSciOrGx02zVTHS2AvC8MxBxDGYGZ6s4Tc3Mdprw/eFZsJaHxSwBjl4PDe9U0gD/ybt8yGMSv22CeFuO0a5+ndyEodxjYAexyGia0FrKw4r4K9es54LZzBoSvg80qD6cYwVfvNl9xRcCOrGx2648J/bGKPA9GxBSB2PHYsJQ7TcRw3iIiZADs9bluvbmR1o8Mg9OKKBi0gJoRjC8AMhlacuuljsbMr2f1G/rMb0EMPYLMfVsGP3+qOG6eyrmCTTOowroHYs9uAseQxC/+3YnEWc5lbj5XT2ZJVk5sGuh+hv3pzQXz1Zj8UvKWljLZj6VYUinDBz+VjPRVHC6jmtxIkqvdZzO1y/YLTEOsGt1MhtojnRkbqjjqMbVAKnRApLsWVQVrAUqnsmD2nXiKOCcYwohsZqTvqMLZBinEA0BiNK4PZrCGuueaKc+pWfHI/5rQHNzJSd9RhXAOxZ2SUiCUAK5VFsbQ4b20S7lSBLBw3QxRO6cYlHmVzA0DLdxA6pC7jGIg9Q+TjB8Dl5SIOmnHe9rOVy4EY7kif1kDZvAw2UZfUaewCsGf0SDmBucXLcWCOi6UXF+d8HTRT0rDFRxx0Qx78yMbDe6jbyBekrymTmCP2VhsIMnoriCPeVxXkc986VlFueopxAddWfFAmN9VvPXo8ZckCYchjpvV4wQSI1fSzAIihmMjbgTyaAZ9nXV7dPuQRCGkLgcnEdiR1HXGwMWcBUBnR9oR5nm+QVQOrqjRZQcrip/qtxRp1TZ1HGWzM2VXwq5Eyo8FjY24hho1uj0rWIYvSoHNX4klhYc4CYG+H+A2msKL7JNzOxjuQdHHtjDYHUWMdhT1fyhJ40KBzpzwSa8Qc46+2AaVcQOvrFacEgo4npZ7R+llsSxF3j+BmuuT5IZRBR9Clcye8EmsAoSXYahXMVEodc5JYR5yp6WkxPRP84YQ8FHBqjkMPwXRudMjeiCZ55uE1Og42pK6p88hCFdbWAZg1jMgAuDA/52s7tmaKZAN+BlYkSSAkr+RZR0eKtE+fOSeo86hCNdbWAdiVEy/DlymS8QspDVHGCZJjFy5q0QnbUQsunBq0MOGCKHnVNaNDHZdxZCx1HkkAxiysrWW+zgXq5EW0S38bBVODg9usbLmd2OKShgY3qM9jbJBn9cY9kEfyqiNQt/Z2d7bOdeTTjCYxRqzZcdYBaD2Q8gX7RZhX7lc3gB07eajz+++f05b1LIZmZhfiWR2zaiRv5FFXoG6pY+o6sj0CazC2AYDYKuFZXcJvRffwodXt2CYvT4mZ2eA7JHb+PCyaHROnXsV2Op1X8kKeyJuuQJ1St7A+4vChw7qy2ZJuLcY2AJAnWYNBl2u0tszTUYQ89rLbs2efFZeNZJ2dBjp1TqInqKOR70jYqkjkgby4cTStSu7o1u54MDJ1nM8Hf/aIE0aIrerT0plmAwAtIkp+3wkxHXH27dsvuA0tPXnHLuh11GZVNDE9I+axbkIn2BvpiXkyb/JAXnQG6pI6pW6p48hCHWxtAqAsiB8DqZE41fFstIMHV6uHc+cvwCroZ4MNfoKgjPnjMIDIPJiXBX5NnY1qgFGH1CUDdav1/LnqjGvuiSliq+bxZgvYKy3fwOdqI4b1e/v2HaK/fwDHt1bEmTMfuMp2Ho14L2eM0AJNz89boGA7TMfgL2mSNoHHvLxYPcq2ABndBDZnqEvqlLqNMDy3hq0NLNSdA1OWqVR/uiFmiD/YIfnv/3nFajR3XegUw0ONFcehhUkUzPjE5fUFTNPTs+LggX2u90QmKNgTncN/BzY75+EwdGv3uu8gQUcfPms+lxbWow7ZSTl56gzknLIocPPxbdsGxLbBQdHR3taQKqvey5en1zoeRxrGC+PFKqY251R3ShrVRNtMUY1hD5LBzUnCefLeeyfF+2fPWJnt2L4Ni5OGoOzVHfA5R3oZU0nj45fF7Gz9Ef1O7I985PDBpgXkVBKe0dGG3Ve55W2G/2gqcIcqVCsWCVar/COAyRs7Fss4k20ZC8P9Bn5gJ945CctXf3iGa6a3bx8QA319Fm/Mb3W877y4ND5pZb8XHY9rrz3olxXP6aGpyd6CHIa+Ng3y1gUgc5ouVr4DvT7iOVefCVmQv/vdy1DmlaGJNlojbIlhHze1VRZt2DV///49YrC/f6uosXw/OTUlTp8+i/UczoBMq21ii5LlKu+ZjvYOcfPNt6yDMwpB8Z1+t6+Q+Xq9vBsCcF6pnSsldRpf9+oZWvVSa352afyiePPN445z6cGG3IVCJ04GGtuQpr+/TxzYvxvVaTLOEGHH4dTpc2JqaqPDAM/6KBYxWD3nfJz0+g/fEGnbD1avnM3L/V1S1p1nrdsGZOkxwVSx8jRu/3xDaYb4Y8f2nWJ296w4d+5sw1w5tLADBTO0cwjgWx3fGhgYEG+PvrU+2MyCZFW9d/cusWPHtvWqsyHRiF6wKr90aUK8f+68VZXbbFhnp4x8CLzvtB4Vi0Vx8eIF/I+hR32lhrDj29fdu/dECj7ygabJ013SqAs+vm9oAfmyWFR70HQ+yTYhf0cVxsbOo0d8GspenctlW2zbth1iaGhI9PXVr17nMbPwxvHXNhUQq6lrhodQMIOxASKBN4722gdjmAtHZ6U68AO74fqPiK7u+vvjTE9PiQsXLoiJiUvrA+ur430HxPDwrmpSod+zzdcu5MFCQTa0IE0BSI6nFypPo/d2f+jc18lwCV4t7BE6PW5q2WrA4/hXFE5tYO9x164h9CQHImsfsZ07MXlZfHD+IhYKbQQe+d2Oj+zI4RHR1qSnWy0XvVxoLdvXOmvV76K4B7i+19eZeaBZ3lsCcKasDmE/urfxlWaaEYrzu4nJcfHOiRMbOjQ2vyyw/r5eC4h9fT3arSKtHYeJCLwpjAnWm5Nmx+HwkSPgabvNZuKusH4VbKZ+Habe3m3G/JYAZGL0iH8Ivd3djFDc33GfwVOnTorzYx80nPHgdsBHDh3EdnB6zu5hO/TEu+813PMQhSZ2DV8jDhw46Hhr4rjqHaL8CD3fe7bizxEAYQUPwwq+jq+3YyuCcX/PauoMxhcvoF1Ja1Qbdu8eFrt3Ddc+DuT3ufNj6FBt7KGTMIE3hPbaPozXOW1eBMKQJiKQZxHW78Zax4N62TXsBVdHJqGphcoTePbX1c+TeM8CHkG7at/e/eLs+2esnmS1V4yb7eDcyl9Lm52pnejB7927DzMvif+219WBD/uJvpzxzvqDJjeOLCDTg2h+pqSO43qgCb3EvWIbjG3ESxcvYupvEq5KOfGRGz6kRY7XXn9LlGCBB+EQumPnTquNF7cjVP0KDut3qjcvr8fVkVu3IwtIpkhwtqweqlTUz/0yGaf0BADHG/m/ghmH42+9ro29DutA7t8XWczQpDVgpuohp+CjDja5YzVTTE9OPgck/rRZnCS/IzB6e/qsRTtBy8G2J2mnGXzEhoURF8pzBUDSzUn5FWRUf2bcRcZxjcrZlCKcN4MOpGnP1ARNOxb0gAkLGy6ZcQ3AfF6egYn9G5f5JCZ6AQukZmeD3z2KNEk7rYGYIDbcyucagMygNyeeQIYvus0sCfEL+U743V0OdEsPbg9CmqSdxkAsEBNeZPMEQGRYacvLe+DntXmOywsXMUpDd68svGZOvPOe5drklzWONZIWabo5aNpvvmGlJwYsLAATXvL0BEBm1CnlmMjIewFGvStqvEjlMw3XzHIZ42tvvGl5ZXtZm8I0XAb5f6+/adGKbB2uT100S26VPTBgYaFZxCbvfI0H9OXk83BWeBz0/6pJHol71Qfv4omJcWu7kHfePRUI/6SZuqDU4xhwft6PXJ4toJ1pb8F4FL3iX9u/03DduWMo0LlYzjGTZqoCytwqe59C+QYg24PtSt6NtsC4T15ik5yu/9d/+MZA2mzQj0WLNNMSWNZWmXts91XrwfFUXHWievdYxPQJHBd4DHN2q27J9SIl7FkJ63ZPnXpPzMxM13XlaiYOXap6e7EU4MC1mN7LN4uarHcY78OSrKNYZPRKEIwHBkAyA6+Zz8Fr5mfo+flqWwYhWItG8BqANV+Bl8sdcE75ZVDUfVfB1YyQMTD5Zfxv9nOqjti6T5wGWKYs2yDBRyUECkAShCfED3Bq71d53wrp0QDLlGUbtESBA5AM9hfkk2h7exoZD1rAFj3/GmBZskz9U9pMIdA2YDV5tAPlTNH8Z9TFD1Q/b90nSwMAyNMYbnlQV7NKiwWkisnwKuMtS5gsyF3hlpZPJ/gsnFzJTt/dVFE9LIX6e1pFfbm0KAelARoPtvl0VbvVfIYGCLjz3wsA/iv+W0M01SUQs3uAbwX/X9bR4agnamgAZOYcJ8TmOc+mabC6nlIT+4yDzIa8M+ihlmb6CBWAZIQzJrCCP8eeIclddd1Mowl9x+k1WL4vBDXD4VQN2johjRiggG1CfjRtDgyN5E3EczgWsEzCBh91EzoAmWlnpzzfl5dHYX7/Dl9d6vwJKWMSAnXPMmBZsEyi4Dn0KrhWyOmy+qyoKMyeqMb78NYmav32rQFUuZfoUEyfTt/EfBCIHIDkfUGp4eWSwv4z6jYfsrSSOtQALN+LdKP348nsMKsto0VSBddyRUWg2/8ZaRh/meYln7Vyh/4bvVzqmLqOA/gofywsYHVBlEpqX1mppzBUc0f189a9Tw1I+TOs233Iy9JJnzk3TR47ANrcYhuQ2zFm+BSq5QP2s9bVvQZQ3Z7idhludyxwn5O3FLEFIMUB+PLTRfObUOIjuE/GDuPeyiHwVNDZInT2RF/BeAz3jjYKCpwJBwRjDUCb/9X9Cc1vocXwRSg1sTu12vLovAJsWJ+rfoK23qOY0XC0RZpOfrainQgA2kIAiIdUxfwGOir3AYjpWeVjC+jjCuAto8p4RmaMbwN4TbfF9ZFN4EkTBUBbeu7ejxPdHsFY1gMAYmTnmNj8RHkF8Mo8CqFDGN9ttht9lDw2yzuRALQFWj1Mx3xYKHk/CiGyY8VsfsK84uObFFJ9L5s3nmx0CEyY/HjNK9EAtIVmdTxdFJ+HG9uX8Ox2/E5lhwXWjmc5PMeD//oK4hdWtWsrIaHXVACwWvczSg2oorgL1oHtxFuq3yX1HkB7GVb+GZ63W+/I06TKRb5TB8DqwrB6z0rcicb5p7E25VZck7FCHMMmKJjforP1Atzin01Cb7Za727uUw3AakXAGnbMl8UtK6Z5FAVLTxz6JcaiJ82qFB/IK/hAjmUN41hXTryMZ40PgasWLOH3Vw0Aa8sJ4OucWRSfwml6N0nTHMGq6xHcj6AzM1AbN8jf6DxcRr0zilUXo8owRnH/am+H+A0A5+4o9CCZipDWVQvARjqfVWqbKImRihQjUpn4FzsAzm6Asxtg6cZqHXQ6cb/226KjxBzezeHdHN7N4531GyCbwzKsS0oaoxklRkVejPZIOdEo76vx+f8DYi06xjCLKmEAAAAASUVORK5CYII=";
+},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAF4VJREFUeAHtXXuMJMV9/lXP7s7O3mPvbg/IHSA46/BCsCwbyealOKfDJH4cWIkQKA4gWRArkSIskYAxsWNZtokDDlL4J0qCZQkjLBBShH0ODjanCxGYyx/4BcSrO+4hjjv29vZ25+52Zmdnpivf17MzOzM7j+6Zrp6e2Spp1N3VVV/96qtv6tXV1Uqsq2HgrNZbJSuTRSWTSruTouUCUWoDjhu0Eu+olo/CI52Wczg/p5ePavkoWtN/RitnKqFlSlIytVGp0zUJrvELtVbzr7Vel87JjRDPNcp1J7VSFNukFr3FJCdK1BmIckppPaUdZwrnb4wn5VWl1ILJdOOKvWYECMElzy/KdQXX3Y0abTcyfi38huNQMBBfXoscQI25b8hx9q0fldfhl4uDbaZtGGgBphf1FWgWb0PB3oQCvgHHlGlCQ8FXKouCeQ1/lJfR3D8/PqoOhoIbQ5CBE2Ba6y06I3eI0nehhrs+hpwHNgm14S9Eqx+oMXl2XKEJHyA3EAJkUzqfkc8qiA5lswfXIwNURpWsQIhLuNirIcZNY/ITNt2Vm3160tcCPK/1RYWsez9qh3sweJjo0zLoyGwMZmZRy39vKOU8vl6p6Y5AYhCpLwWYyehLc+I+iEK4F7XdaAx47JkJqAUX8ed7MinOo2Nj6t2eGdJhwn0lQAwqduqi+xA653ez2e0wzwMZzWuOtX5KJZzvYNByqF8y2RcC9EazrvsNEXU7hJfoF3J7YSeEWMTM+HPKcb7eD6PnWAsQYkvNZ9yHQeoDOE/2okD7NU1wlgNnj20acx7BeTau+YitAM8u6j2uq58AiTviSl4/2AXxHXEcdd/GUbU3jvbGToDZrL5sUet/xqTx5+JIWN/apNQLo0p9KZVSx+KUBycuxqCmS8xn9UMQ39tWfAZKBX9ockuOybWBFDqCjEUNuKD1tnxWPwNidnWUCxspEANolvcPp9Tn1yl1MlBEA4F7LsD5RX2zFPXTmMu60ED+LGQTBjCHekoS6s5No+pnTYJE4t2zJthrcheK3xJX/9SKL5KyrknE4xzcz6MMetkk96QGXFjQ25eU/iH6ep+oYcVe9IYBpV4Z0erP1q1TJ6I2IHIBpjOa6/B+jH/gBVFn1qbXnAE0yTPoG94yPqYONA8V/p1Im2A80fi0K3qfFV/4BdktIsuEZcMy6hYrSPzIBJjO6ju1q3+EZncsiIE2bIQMoGxYRiyrqFKNRIBzGX0/mt2n8BuKKmM2nc4YYBmxrFhmnSEEi2W0D4iMqHTW/Ucsi38gmFk2dBwYwOsAj42nnC+jb4g3Gsw4YwL0xJdx/x2W32PGdIsaBQMQyJPjY84XTYnQWBPs1XxWfFFoxGgaqEDuZVmaSsRIDej1H7T7T6aMtrg9YEA5f7N5TD0edsqhC9Ab7ZYGHKFjh515i+efATbB+N09nlJP+4/VPmSoIuEcEofxHEm1T9qG6DcGIMCCctStWGn9Yli2hyZAPuHgRKad5wuraGKKo1TGEbU7rCcmoQiQz3bzon9ln3DEVDQhm8XHdsOiPhLGs+OuR8FobhNcWGDFF3IpxxiOZe2VeQgLW7sWYDqDt9XsqpYYy8WQaShzr+y7hO+qCfYWk3I9n9ZdC7nLfNjoPWAAgxJXHPWpbha1dixAbxl9xuv32ZXMPSj8uCTJldXDY+gPdri8vyMBst+H+b6f47grKiLOnCvI1InSlnmT25OyZUNvZ3riZk9U5dAoHdSE+zE/+Ekc8VJ8MNdR05leFL4ovitYUt2FpvhyBe39ykLsDrG72HGzp7vcdBebWqAmOkEJXI0sv7f7tU4S6yYOxVd21edlv6iP1TZUn0dpBwpeiu6SuMWCaBeVj3ZLySvM1DkJcRJDknBGsJVORw1doKzAlq9BGz8M+t5x4BoQ75Y+YSebA5VN6IExDSL5fFZyi2kpLGUhQMzCQnz8i3o/nNOP9xiGYRnHqMNiVk8bARMJJEBul4Gc3howDRs8RAaKbl6WsmkpFvxvIc2wXhzENeqgDU8jARLxLUBUsSnu1RIA2wYNmYEChJTPLXRUl7H+Y1ximHTL+/mk/KbhW4DcpQoi3OEX2IYLlwHWfAU0pd06YhDLlKNGqBW/+L4EyP350JF90C+oDRcuA+y/FVB7heWIZbJPCK08QM34sdeXADU2h4SyB3Ljbz8k9TpMIb/YUbPbzG42x8Q05aCVJDXjB7+tAKHkndyZ1A+YDRM+AyjMQAMOvxZwYEJsc07dXtJO6xTaCpB7MsPQ2Gzn1To7g3eX83ymnElsasbbz7uN8S0FyN3ouSF4Gwx72yADnGQ25UxiezZDO56GWmSgpQD5KQQo2e5G34JA07e8JxyGEjGJTZOpHWqolflNBciPwGClw72tItt75hngEw5TziR22WZqiFoqX9cfmwqQXyCCgtf0R2DqyerFNcrAWLImsctGU0Pe16zKHnXHhgJEpGF+/qourL3sAQP5vLk+oEnsGqr4KbUmXbmGAuSH/zBRuaa+vVZDWIwuFnPmRsEmsasppJaoqWq/8nlDAS5/dbIcxh57yMDc/Lyx1E1i1xvdTFOrBMjv7SLynnoAe90bBubnzhpL2CR2A6P3LGur5tYqAfJjz2iv7WO3Gpp6eIHFpKdmZkM3wMOMYKFq2XBqyvuQeNlj+bhKgPgGrZ14riOpl5epVEqOv3dCisXAr1s0NZtYxCR2pK70QfGaJGsEyBUMUOp1NSHsRU8ZmJiYkKWlvBw6fDQ0O4hFTGJH6aCt6+tXydQIEFNOt0VpkE2rPQNbJ0ofE5ibS8vRY8fbR2gTghjEoitjt4kS6u16jdUIEM9Obgo1NQvWNQPJZFK2bdvu4bw/fUqmDr7TUXPMZpdxiUFHTGJH7uo0VhEgqsck5txviNwgm2BbBi6//AMylCgtSGLt9evfvh1oYMIBB+OUaz5iEbMXjhqj1sppV17LPL8o16EGjLhXWjbDHlsxkBwZkSuvulrefPM3XjD23w4fOYaBxEnZvHlcNm8al9HkiIwMl9aNLOXzwknmufm0J7qlpdrJbGIRsycOGju/qDjO+G+mXxFgwXV398Qgm6gvBrZObJWdO6+QQ4cOVsJTWNPTM96v4tnmhBjE6qVb1ponwEoTjHV/VoC9LBUfaV9y8aXyoQ99uNIc+4hSCcJml3GJ0XNXpTVPgGiT1ymRa3tumDWgLQOsvT728esrA5O2ERCAAw7G6XXNV7aVWqPmeO01wemc3AgPu/C0zFDMj+y/TX7wSrn8sh1yenZGZmdn5Uwab82VX7d0hmXL+Dpvno9TLT0Z7bbgkFpL59SNCPJSqQ+o5ZoW4e2tmDJAYV28/RLvt/+t8zVWfvjq9TXXsbsoae4lrwlWrjsZOwOtQQPNQFlzXg2ID0BMYgpmoDMcRuamsTHBfnzS+X9OKjl0Zr3M59Gbgds0rOX5OSV/sE3LLswZX2Qns9rS7WkOocpNsK0BW1A2g3e4/+UtJS8cQTdLl0SHd6UrMaZzSqZPirwKYT76Sy2f2yHyV1drucC+0FDhaNWJFk9zzlmtt2LFKtcAWteAAdZ4f/Kikv84rKrE1yDgshcFyrCMw7jWNWaAmqP2HMmWlNg42Nr2feaQyP2vKlkorNR2fhlhHMYlhnVNGID2nKKyAmxED2uv7/5SYU+W4OIr4zEuMWxNWGak9kjtOUrbEXAtLSLs8331QHfiK2NShMQipnW1DFB7EKDYzyzU8uINODppdutgKpfE4iDGuloGqD0Hw+ENtd5r+4pTLRzthu2ISWzrVhig9hx0cqwAVzjx+msrUy1VN7o8JabtC9aRCO1hP38rwGpaOMlsypnENmWzUVxoz8EDkJg/NDRKwSrw47WPVFfd78bDJHY3dvUqLrXn4NVQ2wRXlcB0puoi5FOT2CGbGgkctWf7gHVUFw0+EzeJXZeN/ri0fcDV5aRcc7tRmcRenZM+8PFqwD6wM0oT80vmPuRiEjtKjsJMi03wuTAB+x3r3NnSS9sm8mES24S9xjGhPU7DWAFWMZ1b4G5UJtZG4lOzHnZVYmv9FNrjNIwVYJUQLsRi0vPz4e9GRUxiW7fCALVna8AVPryzHZuTMj9zsvT93bp7nV5yN3piEtu6KgZYA+KBsK0Bqzj5oys24IuSBZl57yi/M1B1p8NTYBCLmMS2boUBas/WgCt8eGefuXJcHDyNy5w/K2dOvdedCCE+YhCLmMS2roqBUg2oDT58qkqsT04v3jAsf/7RCc/as2dm5NTxwx01x2x2GZcYdMQktnVVDGiNQQh2gK3ysqdg4Cu7fk/Wj3hvrHq113vvvI2ByWnc8dMkay8s47DmoyMWMa2rYwDrdIe0cqbwF6+7s7Yvt60fkn/908vkzmePeN1A9t9On3wXA4n3ZWzjuKTWb5Th4aQkhko1WrGQl3w+J1kILoN5xAKuy47bMBOLmNbVMkDtDSW0TIW3+3BtAv189ZkPbpRH/ni7PPxfJypjEQrr7JnT3s9P3ig+YhDLutUMUHuOpGRq9S3rQwb+8uMXyNN37Kg0x0FYYbPLuMSwrgkD0J6zUanT+KDcmSZB1rw3a6///eur5K5rJryRbDtCONplWMaxNV9ztqg5aq/UMVGoBbVc3zz42r7D/tsTey6RL//hRfKfv0vLSwfPydt4weNMttR52ZJKyO9jPw7O83GqxY52feiFmoPzBKi0nsL4zgqwDW8U1l98bKv3q9+Nalfcd6Nqk7eob1NzTNOba9AORsLWWQYiZKCsudJkl5I3IkzbJmUZ4N5OnuY8AY4n5VWl1MrklSXIMmCQAWqNmmMSngDhsYA+4AGDaVpoy0CFAWqNmqNHqQnmmdb7eLDOMmCcgSqtVZ4PDTnOPny/4e+NJx4gAWxmLUV3SdxiQT56aVGGMXVOl8e2SktLC+IkhiThjOALE5h8s65vGKDWysZWBLh+VF6fz6osasKer9vF5oVSyC9KsZAr2ynJqoUkSUdDlHnvV8AGh4mhpAwNj6Jfa4VYISyuJ0plqbWyeZUmGLUINpqV18o3enUs4lMDS9l0jfja2UKhenHKnyloF8He7xkD1Bi1VjagIkDPQ6mXyzd6cSxASPncgq9FT/X2sXFmXGJYF2MG6jRWI0B0pZ7vlems+Qr57vcvIwaxrIsnA/UaqxHg+Kg6iOrxF1Gb7vX5UHuF5QpeLVoasISFaXG6Z4DaosaqkWoE6N3Q6gfVAaI454AjTLkQi5jWxYyBBtpaJUA1Js9CqbUfmDWYD2+qxUC/jQMTYlsXDwaoKWqr3ppVAhxX3trAvfUBTV1zns+UM4ltyuYBxt27rK2aLK4SIO/qBlVlTawQLzjJbMqZxDZl86DiNtNUQwFuGpOfYFI3/P0pGrDL1xdNOZPYpmweRFxqiZpqlLeGAkR7nRelv9coQth+2uAbeSaxw+ZhoPGgJU9TDTLZUIAMN5RyHkck40NJkwMFk9gNuLReDRighqilBrc8r6YCXK/UNObnnmwWMSz/fN5cH9Akdlj5H3QcaohaapbPpgJkhKQ4jzarOpsBBvVfzJkbBZvEDprPtRie2qGGWuW9pQDHxtS7GBI/1Qqg23tz8/PdQjSNbxK7aaL2xgoD0I6noRWfVWctBcjQKuF8B0o2NlSdnyvtn7LKshA8TGKHYN5AQ1Az1E67TLYVIJ7dHcLM4HPtgDq+j6fTp2bCn/HxMO1C1Y6LpfuI+rmSdlojtRUgoyvH+ToUbWSdUyqVkuPvnZBiMbxKlljEJLZ10TNArVAzflL2JUCuYMCUxmN+AIOGmZiYwPL6vBw6fDRo1KbhiUVMYlsXPQPUSv2ql2ZW+BIgI28acx6Bso80A+rUf+tEafOeubm0HD12vFOYSjxiEIuujF25aU+MM0CNUCt+E/ItQABnHUfd5xfYb7hkMinbtm33gr8/fUqmDr7TUXPMZpdxiUFHTGJbFy0D1Ai14jdV3wIk4MZRtRevoL3gF9xvuMsv/4AMJRJecNZev/7t24EGJhxwME655iMWMa2LmAFow9NIgGQrb8X5jTOq1JfwfO5mzA+O+Y3TLlxyZESuvOpqefPN33hB2X87fOQYBhInZfPmcdm8aVxGkyMyMlx6NW4pnxdOMs/Npz3RLS3VTmYTi5jWRciAUhlqI2iKgQWYSqlj81n9TXQ0/yFoYq3Cb53YKjt3XiGHDq2s2KawpqdnvF+ruNX3iEEs0y45pCRXKC145XmvXa/tQbP7TWojKA8dMQfxJdJZ/XMcdwVNsF3407On5Xf/95YUAk7LsNllzReF+JiHM+cKMnWiNDM1uT0pWzYE/i+3oyLQ/V7aA/HtH0+pT+IYeC6tIwGSmQWtt+Uz+ld42HxhIKZ8BM6h5jt69LCcPHnCR+jSgIN9Ptvs+qIr1EBY63dqeEx9ZJ1SJzsB7liATGx+Ud8srv4pasJAgxm/huZyOTk9OyOzs7OSzWYxt1eqcUZGkt4kM+f5ONViR7t+GQ03HGo8F/sWf2rTqPpZp8hdCZCJzi8Uv4We0N91aoCN178MQDzf3rQu8dVuctC1ANkfxKBkH0bFn+jGEBu3zxhQ6pVNKbW7k35fdU67FiDBFhb09rx4/cHSY43qFOz5wDGAft/MsKDft07566S3YCCUvhsNwT/hFkxSZ1qkZW8NAgMoY5Z1GOIjHaEIkEDjY+oAHsPcBuPMrbFnQtb1jAGWLcuYZR2WEaEJkAZhBcSLMPIL+JVmaMOy0uL0nAGWKcuWZRymMaEKkIZhQvJpLepvwzTSYvWeAZYpyzZsS0IXIA3cPKbwSqcYWT8YNgEWrz0DLEuWafuQwUOEMgpulCymZ1Q64/4b2uJ7G923fv3BAATy5PiY80VT3SojNSCppcElw21N2B9SW20laz6T4vN0sjrZ8H3mMvp+Jfq7rBXDR7eIYTPAyoN9PlPNbrW9kQkCq2fuhAC/j19vl41U596er2IA4ivg9wUTA45VicEjMgEy8fSi/rTr6ufDXMzaKFPWr0MGMMnszfOFPNXSyppIBUhD0hl9LWrBH2MZl31s16pkIr7Hx2uo+W4Jc5LZTxaMDUKaJc4M8jkiRimvNAtj/SNmAGXBMolafMxl5AJkonyO6K2kwHIe/Otc+lkXPQPkHk3gt1kWYT3bDZqLyJvgegO9Ra1Fjacn4a+srk/LXq8wwJXMklB3drOYdAWt87OeC5Cme8v7s/oZ9A13dZ4VG9MvA6j59g+n1Oc7XUbvNx0/4XrSBNcbRiK8l1oc5yt2SVc9OyFecykVOCbXcRAfcxaLGrCa4mxWX7ao9ROYqrm12t+ed8mAUj/Ce7v3dfLqZJcpt4weOwGWrT27qPdgzvAJNMs7yn72GJwBNLdHuF1G0B0LgqfUWYzYCpDZgfhS8xn3YZD4IM7tVgcByhic5cDZY8ubSvneqyVAEqEEjbUAyznEE5QrtOt+Az2G20FqaROZ8k17rGEAwsPL4fo57s/nd4u0GoCIL/pCgGVOIMSduug+hIHK3RBi1TfUyyHW7hHCw3th+iluiwvhYVfb/nB9JcAypZmMvjQn7oOYy7oXQhwt+6/FI4S3yE8hcDf6dhuCx5GfvhRgmcjzWl9UyLr3i1b3oBDW1Hao+PPN8mtW/AhMq+9wlLmK67GvBVgmlc3xfEY+i2Vsd8FvD64HcsCC2o770O3lh/+87/mx2e1zNxACrC6DtNZbdEbuQO3AfuJ11ff69RzCex21/FP83m6jT572a75o98AJsLowvNGzltvQOb8J76bcgGN/bJuPLW5RMK9hsPUylsU/3w+j2Wreg5wPtACriUBtmDy/KNcVXHc3CnY3Ms51ibEYSXMEiz/IAfxB9g05zr71o/I6/EpbgVVnYgDP14wA68sO4luXzsmNouUa5bqTeOt6EueTGMxsqQ8b5jUGD2fQ7kzhrYsp7ThTOH9jPCmvQnALYabTL1hrVoDNCuis1lslK5NFJZNKu/jJhRDnBohzA8SyAW/rYNCJ8+VrD0fLOdw7h3vncO887nnXENk5vIZ1SitnKqFlSlIytVGp083SXov+/w8nKDA07uUpHQAAAABJRU5ErkJggg=="},function(s,t,a){function l(s){a(542)}var n=a(13)(null,a(544),l,"data-v-001a30c3",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("设计原则")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(537),alt:"Consistency"}}),l("h4",[s._v("一致")]),l("span",[s._v("Consistency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(538),alt:"Feedback"}}),l("h4",[s._v("反馈")]),l("span",[s._v("Feedback")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(539),alt:"Efficiency"}}),l("h4",[s._v("效率")]),l("span",[s._v("Efficiency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(540),alt:"Controllability"}}),l("h4",[s._v("可控")]),l("span",[s._v("Controllability")])])])],1),l("h3",[s._v("一致性 Consistency")]),s._m(0),l("h3",[s._v("反馈 Feedback")]),s._m(1),l("h3",[s._v("效率 Efficiency")]),s._m(2),l("h3",[s._v("可控 Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("与现实生活一致：")]),s._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("li",[a("strong",[s._v("在界面中一致：")]),s._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("控制反馈：")]),s._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("li",[a("strong",[s._v("页面反馈：")]),s._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("简化流程：")]),s._v("设计简洁直观的操作流程；")]),a("li",[a("strong",[s._v("清晰明确：")]),s._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("li",[a("strong",[s._v("帮助用户识别：")]),s._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("用户决策：")]),s._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("li",[a("strong",[s._v("结果可控：")]),s._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/nav.vue":546,"./zh-CN/nav.vue":555};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=545},function(s,t,a){function l(s){a(547)}var n=a(13)(a(549),a(550),l,"data-v-d0518674",null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,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}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Navigation")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Side Navigation")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(551),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 1 categories")]),l("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),l("img",{attrs:{src:a(552),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._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.")]),l("img",{attrs:{src:a(553),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 3 categories")]),l("p",[s._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),l("div",{staticClass:"block"},[l("h3",[s._v("Top Navigation")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(554),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._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,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._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")])])}]}},function(s,t,a){s.exports=a.p+"static/navbar_1.499e088.png"},function(s,t,a){s.exports=a.p+"static/navbar_2.59ecae2.png"},function(s,t,a){s.exports=a.p+"static/navbar_3.8dcec92.png"},function(s,t,a){s.exports=a.p+"static/navbar_0.b608f86.png"},function(s,t,a){function l(s){a(556)}var n=a(13)(a(558),a(559),l,"data-v-30267424",null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,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}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("导航")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("侧栏导航")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(551),alt:"一级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("一级类目")]),l("p",[s._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),l("img",{attrs:{src:a(552),alt:"二级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("二级类目")]),l("p",[s._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),l("img",{attrs:{src:a(553),alt:"三级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("三级类目")]),l("p",[s._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),l("div",{staticClass:"block"},[l("h3",[s._v("顶部导航")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(554),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("选择合适的导航")]),a("p",[s._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/resource.vue":561,"./zh-CN/resource.vue":568};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=560},function(s,t,a){function l(s){a(562)}var n=a(13)(null,a(564),l,"data-v-bc99180a",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("Resource")]),l("p",[s._v("Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(565),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(566),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(567),alt:""}}),l("h3",[s._v("Interaction Design Documentation")]),l("p",[s._v("Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("Download")])])])])])])}]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExMHB4IiBoZWlnaHQ9Ijg3cHgiIHZpZXdCb3g9IjAgMCAxMTAgODciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9ImJhY2tncm91bmQ6ICNGRkZGRkY7Ij4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkF4dXJlIENvbXBvbmVudHNfaWNvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBeHVyZS1Db21wb25lbnRzX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0ic2l0ZW1hcCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04Ny4yNDEzODY3LDQ5LjUxNzgzMiBMNTYuODk2NjQwNiw0OS41MTc4MzIgTDU2Ljg5NjY0MDYsNDEuOTMxNjk5MiBMNTMuMTAzNTc0Miw0MS45MzE2OTkyIEw1My4xMDM1NzQyLDQ5LjUxNzgzMiBMMjIuNzU4NjEzMyw0OS41MTc4MzIgQzIxLjcxMTI1LDQ5LjUxNzgzMiAyMC44NjE5NzI3LDUwLjM2NzEwOTQgMjAuODYxOTcyNyw1MS40MTQ0NzI3IEwyMC44NjE5NzI3LDYwLjg5NzI0NjEgTDI0LjY1NTAzOTEsNjAuODk3MjQ2MSBMMjQuNjU1MDM5MSw1My4zMTExMTMzIEw1My4xMDMzNTk0LDUzLjMxMTExMzMgTDUzLjEwMzM1OTQsNjAuODk3MjQ2MSBMNTYuODk2NDI1OCw2MC44OTcyNDYxIEw1Ni44OTY0MjU4LDUzLjMxMTExMzMgTDg1LjM0NDc0NjEsNTMuMzExMTEzMyBMODUuMzQ0NzQ2MSw2MC44OTcyNDYxIEw4OS4xMzc4MTI1LDYwLjg5NzI0NjEgTDg5LjEzNzgxMjUsNTEuNDE0MjU3OCBDODkuMTM4MDI3Myw1MC4zNjY4OTQ1IDg4LjI4ODc1LDQ5LjUxNzgzMiA4Ny4yNDEzODY3LDQ5LjUxNzgzMiBMODcuMjQxMzg2Nyw0OS41MTc4MzIgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjREVFQkZEIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwNC4zMTAyOTMsMCBMNS42ODk3MDcwMywwIEMyLjU0NzQwMjM0LDAgMCwyLjU0MDE0NTk5IDAsNS42NzM3NjQgTDAsODEuMzI2MDIxOCBDMCw4NC40NTk2Mzk4IDIuNTQ3NDAyMzQsODcgNS42ODk3MDcwMyw4NyBMMTA0LjMxMDI5Myw4NyBDMTA3LjQ1MjU5OCw4NyAxMTAsODQuNDU5NjM5OCAxMTAsODEuMzI2MDIxOCBMMTEwLDUuNjczNzY0IEMxMTAsMi41NDAxNDU5OSAxMDcuNDUyNTk4LDAgMTA0LjMxMDI5MywwIEwxMDQuMzEwMjkzLDAgWiBNMTA2LjIwNjkzNCw4MS41NTE2Nzk3IEMxMDYuMjA2OTM0LDgyLjU5OTA0MyAxMDUuMzU3NjU2LDgzLjQ0ODMyMDMgMTA0LjMxMDI5Myw4My40NDgzMjAzIEw1LjY4OTcwNzAzLDgzLjQ0ODMyMDMgQzQuNjQyMzQzNzUsODMuNDQ4MzIwMyAzLjc5MzA2NjQxLDgyLjU5OTA0MyAzLjc5MzA2NjQxLDgxLjU1MTY3OTcgTDMuNzkzMDY2NDEsMTMuMjc1ODM5OCBDMy43OTMwNjY0MSwxMi4yMjg0NzY2IDQuNjQyMzQzNzUsMTEuMzc5MTk5MiA1LjY4OTcwNzAzLDExLjM3OTE5OTIgTDEwNC4zMTAyOTMsMTEuMzc5MTk5MiBDMTA1LjM1NzY1NiwxMS4zNzkxOTkyIDEwNi4yMDY5MzQsMTIuMjI4NDc2NiAxMDYuMjA2OTM0LDEzLjI3NTgzOTggTDEwNi4yMDY5MzQsODEuNTUxNjc5NyBMMTA2LjIwNjkzNCw4MS41NTE2Nzk3IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0RERUFGQyIgY3g9IjUuNjg5NzA3MDMiIGN5PSI1Ljg5NzAzMTI1IiByPSIxLjg5NjY0MDYyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNEREVBRkMiIGN4PSIxMS4zNzk0MTQxIiBjeT0iNS44OTcwMzEyNSIgcj0iMS44OTY2NDA2MiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjRERFQUZDIiBjeD0iMTcuMDY4OTA2MiIgY3k9IjUuODk3MDMxMjUiIHI9IjEuODk2NjQwNjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjI4OTkyMTksNDMuODI4MTI1IEMzMy4xNTg1NTQ3LDQzLjgyODEyNSAzMi4yNDEzODY3LDQyLjkxMDk1NyAzMi4yNDEzODY3LDQxLjc3OTU4OTggTDMyLjI0MTM4NjcsMTkuMzI0OTgwNSBDMzIuMjQxMzg2NywxOC4xOTM2MTMzIDMzLjE1ODU1NDcsMTcuMjc2NDQ1MyAzNC4yODk5MjE5LDE3LjI3NjQ0NTMgTDc1LjcxMDA3ODEsMTcuMjc2NDQ1MyBDNzYuODQxNDQ1MywxNy4yNzY0NDUzIDc3Ljc1ODYxMzMsMTguMTkzNjEzMyA3Ny43NTg2MTMzLDE5LjMyNDk4MDUgTDc3Ljc1ODYxMzMsNDEuNzc5NTg5OCBDNzcuNzU4NjEzMyw0Mi45MTA5NTcgNzYuODQxNDQ1Myw0My44MjgxMjUgNzUuNzEwMDc4MSw0My44MjgxMjUgTDM0LjI4OTkyMTksNDMuODI4MTI1IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzIwQTBGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTY2Ljk1MzQ3NjYsNzcuOTY2MTUyMyBMNDMuMDQ2NTIzNCw3Ny45NjYxNTIzIEM0Mi4zMTYyNjk1LDc3Ljk2NjE1MjMgNDEuNzI0MTYwMiw3Ny4zNzQyNTc4IDQxLjcyNDE2MDIsNzYuNjQzNzg5MSBMNDEuNzI0MTYwMiw2MC4zMjI3NTM5IEM0MS43MjQxNjAyLDU5LjU5MjI4NTIgNDIuMzE2MDU0Nyw1OS4wMDAzOTA2IDQzLjA0NjUyMzQsNTkuMDAwMzkwNiBMNjYuOTUzNjkxNCw1OS4wMDAzOTA2IEM2Ny42ODQxNjAyLDU5LjAwMDM5MDYgNjguMjc2MDU0Nyw1OS41OTIyODUyIDY4LjI3NjA1NDcsNjAuMzIyNzUzOSBMNjguMjc2MDU0Nyw3Ni42NDM3ODkxIEM2OC4yNzU4Mzk4LDc3LjM3NDA0MyA2Ny42ODM5NDUzLDc3Ljk2NjE1MjMgNjYuOTUzNDc2Niw3Ny45NjYxNTIzIEw2Ni45NTM0NzY2LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1Ljg3ODkwNiwgMjEuMDU0Njg4KSIgZmlsbD0iIzIxOThGMCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM2LjE5LDExLjM5NDAyMzQgTDIuMDUyMTg3NSwxMS4zOTQwMjM0IEMxLjAwNDgyNDIyLDExLjM5NDAyMzQgMC4xNTU1NDY4NzUsMTAuNTQ0NzQ2MSAwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEwwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEMwLjE1NTU0Njg3NSw4LjQ1MDAxOTUzIDEuMDA0ODI0MjIsNy42MDA3NDIxOSAyLjA1MjE4NzUsNy42MDA3NDIxOSBMMzYuMTkwMjE0OCw3LjYwMDc0MjE5IEMzNy4yMzc1NzgxLDcuNjAwNzQyMTkgMzguMDg2ODU1NSw4LjQ1MDAxOTUzIDM4LjA4Njg1NTUsOS40OTczODI4MSBMMzguMDg2ODU1NSw5LjQ5NzM4MjgxIEMzOC4wODY2NDA2LDEwLjU0NDk2MDkgMzcuMjM3MzYzMywxMS4zOTQwMjM0IDM2LjE5LDExLjM5NDAyMzQgTDM2LjE5LDExLjM5NDAyMzQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjM5NjkzMzYsMy44MDc4OTA2MyBMNS44NDUyNTM5MSwzLjgwNzg5MDYzIEM0Ljc5Nzg5MDYyLDMuODA3ODkwNjMgMy45NDg2MTMyOCwyLjk1ODYxMzI4IDMuOTQ4NjEzMjgsMS45MTEyNSBMMy45NDg2MTMyOCwxLjkxMTI1IEMzLjk0ODYxMzI4LDAuODYzODg2NzE5IDQuNzk3ODkwNjIsMC4wMTQ2MDkzNzUgNS44NDUyNTM5MSwwLjAxNDYwOTM3NSBMMzIuMzk2OTMzNiwwLjAxNDYwOTM3NSBDMzMuNDQ0Mjk2OSwwLjAxNDYwOTM3NSAzNC4yOTM1NzQyLDAuODYzODg2NzE5IDM0LjI5MzU3NDIsMS45MTEyNSBMMzQuMjkzNTc0MiwxLjkxMTI1IEMzNC4yOTM1NzQyLDIuOTU4ODI4MTMgMzMuNDQ0Mjk2OSwzLjgwNzg5MDYzIDMyLjM5NjkzMzYsMy44MDc4OTA2MyBMMzIuMzk2OTMzNiwzLjgwNzg5MDYzIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDEzLjQzMTM4NjcsMTguOTgwMzcxMSBDMTIuMzg0MDIzNCwxOC45ODAzNzExIDExLjUzNDc0NjEsMTguMTMxMDkzOCAxMS41MzQ3NDYxLDE3LjA4MzczMDUgTDExLjUzNDc0NjEsMTcuMDgzNzMwNSBDMTEuNTM0NzQ2MSwxNi4wMzYzNjcyIDEyLjM4NDAyMzQsMTUuMTg3MDg5OCAxMy40MzEzODY3LDE1LjE4NzA4OTggTDI0LjgxMDgwMDgsMTUuMTg3MDg5OCBDMjUuODU4MTY0MSwxNS4xODcwODk4IDI2LjcwNzQ0MTQsMTYuMDM2MzY3MiAyNi43MDc0NDE0LDE3LjA4MzczMDUgTDI2LjcwNzQ0MTQsMTcuMDgzNzMwNSBDMjYuNzA3MjI2NiwxOC4xMzEwOTM4IDI1Ljg1ODE2NDEsMTguOTgwMzcxMSAyNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDI0LjgxMDgwMDgsMTguOTgwMzcxMSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUuMzMyMDMxLCA2Mi43MzQzNzUpIiBmaWxsPSIjRkZBQ0FEIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEw1Ljg3NDkwMjM0LDExLjQzODQ5NjEgQzQuODI3NTM5MDYsMTEuNDM4NDk2MSAzLjk3ODI2MTcyLDEwLjU4OTIxODggMy45NzgyNjE3Miw5LjU0MTg1NTQ3IEwzLjk3ODI2MTcyLDkuNTQxODU1NDcgQzMuOTc4MjYxNzIsOC40OTQ0OTIxOSA0LjgyNzUzOTA2LDcuNjQ1MjE0ODQgNS44NzQ5MDIzNCw3LjY0NTIxNDg0IEwxMy40NjEwMzUyLDcuNjQ1MjE0ODQgQzE0LjUwODM5ODQsNy42NDUyMTQ4NCAxNS4zNTc2NzU4LDguNDk0NDkyMTkgMTUuMzU3Njc1OCw5LjU0MTg1NTQ3IEwxNS4zNTc2NzU4LDkuNTQxODU1NDcgQzE1LjM1NzY3NTgsMTAuNTg5NDMzNiAxNC41MDgzOTg0LDExLjQzODQ5NjEgMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEwxMy40NjEwMzUyLDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjI1NDEwMTYsMy44NTIzNjMyOCBMMi4wODE4MzU5NCwzLjg1MjM2MzI4IEMxLjAzNDQ3MjY2LDMuODUyMzYzMjggMC4xODUxOTUzMTMsMy4wMDMwODU5NCAwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEwwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEMwLjE4NTE5NTMxMywwLjkwODM1OTM3NSAxLjAzNDQ3MjY2LDAuMDU5MDgyMDMxMiAyLjA4MTgzNTk0LDAuMDU5MDgyMDMxMiBMMTcuMjU0MzE2NCwwLjA1OTA4MjAzMTIgQzE4LjMwMTY3OTcsMC4wNTkwODIwMzEyIDE5LjE1MDk1NywwLjkwODM1OTM3NSAxOS4xNTA5NTcsMS45NTU3MjI2NiBMMTkuMTUwOTU3LDEuOTU1NzIyNjYgQzE5LjE1MDc0MjIsMy4wMDMwODU5NCAxOC4zMDE0NjQ4LDMuODUyMzYzMjggMTcuMjU0MTAxNiwzLjg1MjM2MzI4IEwxNy4yNTQxMDE2LDMuODUyMzYzMjggWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOTkuMTk0ODYzMyw3Ny45NjYxNTIzIEw3NS4yODc5MTAyLDc3Ljk2NjE1MjMgQzc0LjU1NzQ0MTQsNzcuOTY2MTUyMyA3My45NjU1NDY5LDc3LjM3NDI1NzggNzMuOTY1NTQ2OSw3Ni42NDM3ODkxIEw3My45NjU1NDY5LDYwLjMyMjc1MzkgQzczLjk2NTU0NjksNTkuNTkyMjg1MiA3NC41NTc0NDE0LDU5LjAwMDM5MDYgNzUuMjg3OTEwMiw1OS4wMDAzOTA2IEw5OS4xOTUwNzgxLDU5LjAwMDM5MDYgQzk5LjkyNTU0NjksNTkuMDAwMzkwNiAxMDAuNTE3NDQxLDU5LjU5MjI4NTIgMTAwLjUxNzQ0MSw2MC4zMjI3NTM5IEwxMDAuNTE3NDQxLDc2LjY0Mzc4OTEgQzEwMC41MTcyMjcsNzcuMzc0MDQzIDk5LjkyNTMzMiw3Ny45NjYxNTIzIDk5LjE5NDg2MzMsNzcuOTY2MTUyMyBMOTkuMTk0ODYzMyw3Ny45NjYxNTIzIFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3Ny41NTg1OTQsIDYyLjczNDM3NSkiIGZpbGw9IiNERUVCRjgiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMy40NzU4NTk0LDExLjQzODQ5NjEgTDUuODg5NzI2NTYsMTEuNDM4NDk2MSBDNC44NDIzNjMyOCwxMS40Mzg0OTYxIDMuOTkzMDg1OTQsMTAuNTg5MjE4OCAzLjk5MzA4NTk0LDkuNTQxODU1NDcgTDMuOTkzMDg1OTQsOS41NDE4NTU0NyBDMy45OTMwODU5NCw4LjQ5NDQ5MjE5IDQuODQyMzYzMjgsNy42NDUyMTQ4NCA1Ljg4OTcyNjU2LDcuNjQ1MjE0ODQgTDEzLjQ3NTg1OTQsNy42NDUyMTQ4NCBDMTQuNTIzMjIyNyw3LjY0NTIxNDg0IDE1LjM3MjUsOC40OTQ0OTIxOSAxNS4zNzI1LDkuNTQxODU1NDcgTDE1LjM3MjUsOS41NDE4NTU0NyBDMTUuMzcyNSwxMC41ODk0MzM2IDE0LjUyMzIyMjcsMTEuNDM4NDk2MSAxMy40NzU4NTk0LDExLjQzODQ5NjEgTDEzLjQ3NTg1OTQsMTEuNDM4NDk2MSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMjY4OTI1OCwzLjg1MjM2MzI4IEwyLjA5NjQ0NTMxLDMuODUyMzYzMjggQzEuMDQ5MDgyMDMsMy44NTIzNjMyOCAwLjE5OTgwNDY4OCwzLjAwMzA4NTk0IDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgTDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgQzAuMTk5ODA0Njg4LDAuOTA4MzU5Mzc1IDEuMDQ5MDgyMDMsMC4wNTkwODIwMzEyIDIuMDk2NDQ1MzEsMC4wNTkwODIwMzEyIEwxNy4yNjg5MjU4LDAuMDU5MDgyMDMxMiBDMTguMzE2Mjg5MSwwLjA1OTA4MjAzMTIgMTkuMTY1NTY2NCwwLjkwODM1OTM3NSAxOS4xNjU1NjY0LDEuOTU1NzIyNjYgTDE5LjE2NTU2NjQsMS45NTU3MjI2NiBDMTkuMTY1NTY2NCwzLjAwMzA4NTk0IDE4LjMxNjI4OTEsMy44NTIzNjMyOCAxNy4yNjg5MjU4LDMuODUyMzYzMjggTDE3LjI2ODkyNTgsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC43MTIwODk4LDc3Ljk2NjE1MjMgTDEwLjgwNTEzNjcsNzcuOTY2MTUyMyBDMTAuMDc0ODgyOCw3Ny45NjYxNTIzIDkuNDgyNzczNDQsNzcuMzc0MjU3OCA5LjQ4Mjc3MzQ0LDc2LjY0Mzc4OTEgTDkuNDgyNzczNDQsNjAuMzIyNzUzOSBDOS40ODI3NzM0NCw1OS41OTIyODUyIDEwLjA3NDY2OCw1OS4wMDAzOTA2IDEwLjgwNTEzNjcsNTkuMDAwMzkwNiBMMzQuNzEyMzA0Nyw1OS4wMDAzOTA2IEMzNS40NDI1NTg2LDU5LjAwMDM5MDYgMzYuMDM0NjY4LDU5LjU5MjI4NTIgMzYuMDM0NjY4LDYwLjMyMjc1MzkgTDM2LjAzNDY2OCw3Ni42NDM3ODkxIEMzNi4wMzQ0NTMxLDc3LjM3NDA0MyAzNS40NDI1NTg2LDc3Ljk2NjE1MjMgMzQuNzEyMDg5OCw3Ny45NjYxNTIzIEwzNC43MTIwODk4LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjEwNTQ2OSwgNjIuNzM0Mzc1KSIgZmlsbD0iIzY0OTZEQyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjQ0NjIxMDksMTEuNDM4NDk2MSBMNS44NjAwNzgxMywxMS40Mzg0OTYxIEM0LjgxMjcxNDg0LDExLjQzODQ5NjEgMy45NjM0Mzc1LDEwLjU4OTIxODggMy45NjM0Mzc1LDkuNTQxODU1NDcgTDMuOTYzNDM3NSw5LjU0MTg1NTQ3IEMzLjk2MzQzNzUsOC40OTQ0OTIxOSA0LjgxMjcxNDg0LDcuNjQ1MjE0ODQgNS44NjAwNzgxMyw3LjY0NTIxNDg0IEwxMy40NDYyMTA5LDcuNjQ1MjE0ODQgQzE0LjQ5MzU3NDIsNy42NDUyMTQ4NCAxNS4zNDI4NTE2LDguNDk0NDkyMTkgMTUuMzQyODUxNiw5LjU0MTg1NTQ3IEwxNS4zNDI4NTE2LDkuNTQxODU1NDcgQzE1LjM0Mjg1MTYsMTAuNTg5NDMzNiAxNC40OTM1NzQyLDExLjQzODQ5NjEgMTMuNDQ2MjEwOSwxMS40Mzg0OTYxIEwxMy40NDYyMTA5LDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjIzOTI3NzMsMy44NTIzNjMyOCBMMi4wNjcwMTE3MiwzLjg1MjM2MzI4IEMxLjAxOTY0ODQ0LDMuODUyMzYzMjggMC4xNzAzNzEwOTQsMy4wMDMwODU5NCAwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEwwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEMwLjE3MDM3MTA5NCwwLjkwODM1OTM3NSAxLjAxOTY0ODQ0LDAuMDU5MDgyMDMxMiAyLjA2NzAxMTcyLDAuMDU5MDgyMDMxMiBMMTcuMjM5NDkyMiwwLjA1OTA4MjAzMTIgQzE4LjI4Njg1NTUsMC4wNTkwODIwMzEyIDE5LjEzNjEzMjgsMC45MDgzNTkzNzUgMTkuMTM2MTMyOCwxLjk1NTcyMjY2IEwxOS4xMzYxMzI4LDEuOTU1NzIyNjYgQzE5LjEzNTkxOCwzLjAwMzA4NTk0IDE4LjI4NjY0MDYsMy44NTIzNjMyOCAxNy4yMzkyNzczLDMuODUyMzYzMjggTDE3LjIzOTI3NzMsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==";
+},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgxcHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDgxIDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TW9kdWxlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwLjQ2NjY2NjY2NyAgIDAgMCAwIDAgMC44MDc4NDMxMzcgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMyIgeD0iNiIgeT0iNTciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgcng9IjUuNSI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4zOTIxNTY4NjMgICAwIDAgMCAwIDAuNTg4MjM1Mjk0ICAgMCAwIDAgMCAwLjg2Mjc0NTA5OCAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC01IiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItNiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxICAgMCAwIDAgMCAwLjY3NDUwOTgwNCAgIDAgMCAwIDAgMC42Nzg0MzEzNzMgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTW9kdWxlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMyMEEwRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci00KSIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiM4MEE4RTEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTguMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci02KSIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiNGRkQ2RDIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,t,a){function l(s){a(569)}var n=a(13)(null,a(571),l,"data-v-22ed63d3",null);s.exports=n.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("资源")]),l("p",[s._v("这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(565),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("下载")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(566),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("下载")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(567),alt:""}}),l("h3",[s._v("组件交互文档")]),l("p",[s._v("进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("下载")])])])])])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/index.vue":573,"./zh-CN/index.vue":585};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=572},function(s,t,a){function l(s){a(574)}var n=a(13)(a(576),a(579),l,"data-v-05bad635",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(577),e=l(n);t.default={mounted:function(){function s(t){t.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(a){s(t),a()})}var t=(0,e.default)({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(a){s(t),a()})}}},function(s,t,a){s.exports=a(578)},function(s,t,a){!function(t,a){s.exports=a()}(this,function(){return function(s){function t(l){if(a[l])return a[l].exports;var n=a[l]={exports:{},id:l,loaded:!1};return s[l].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=s,t.c=a,t.p="",t(0)}([function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){if(Array.isArray(s)){for(var t=0,a=Array(s.length);t<s.length;t++)a[t]=s[t];return a}return Array.from(s)}function e(s){return Array.isArray(s)?s:Array.from(s)}function i(){function s(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l=(0,_.default)(s,t,a);return D.casting[l.name]=l,this}function t(s){return D.onStage=s,this}function a(){return D.casting[D.onStage]||null}function l(){function s(a){if(o.default.isArray(a)&&a.forEach(function(t){s(t)}),o.default.isString(a)){var l=a.split(":"),n=void 0;l.length>1&&"\\"!==l[0].charAt(l[0].length-1)&&(n=l.shift(),s({name:"erase",actor:n}));var e=l.join(":").replace(/\\:/g,":"),i={name:"type",args:[e]};null!=n&&(i.actor=n),s(i)}o.default.isFunction(a)&&s({name:"callback",args:[a]}),o.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),o.default.isObject(a)&&(o.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){y(a.name+":end",a),p()}),t.push(a))}for(var t=[],a=arguments.length,l=Array(a),n=0;n<a;n++)l[n]=arguments[n];return s([{name:"publisher",args:["sequence:start"]}].concat(l).concat({name:"publisher",args:["sequence:end"]})),Array.prototype.push.apply(D.scenario,t),D.options.autoplay&&i(),this}function i(){return"stopping"===D.status&&(D.status="playing"),"ready"===D.status&&(D.status="playing",p()),this}function v(s){return("ready"===D.status||o.default.isFunction(s))&&(D.currentScene=-1,"ready"===D.status?i():s()),this}function c(){return D.status="stopping",this}function p(){if("stopping"===D.status)return D.status="ready",this;if("playing"!==D.status)return this;if(D.currentScene+1>=D.scenario.length)return D.status="ready",y("scenario:end"),this;var s=D.scenario[++D.currentScene];if(0===D.currentScene&&y("scenario:start"),"publisher"===s.name){var a=e(s.args),l=a[0],i=a.slice(1);return y.apply(void 0,n(i)),l()}switch(s.actor&&t(s.actor),y(s.name+":start",s),s.name){case"type":h.apply(void 0,n(s.args));break;case"erase":C.apply(void 0,n(s.args));break;case"callback":m.apply(void 0,n(s.args));break;case"wait":b.apply(void 0,n(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function h(s,t){var l=a(),n=D.options.locale,e=D.options.minSpeed.type,i=D.options.maxSpeed.type,v=l.displayValue,_=-1,c=!1,r=null,p=null,o=j.default.map(t);return t=j.default.strip(t),function a(){var h=j.default.strip(l.displayValue.substr(v.length));if(h===t)return s();var C=t.substr(0,_+1),u=h!==C,g=l.shouldBeMistaken(h,t,r,p),m=c||!g;if(u&&m)c=!0,r=null,l.displayValue=v+j.default.inject(h.substr(0,h.length-1),o),_--,p=_;else{c=!1;var b=t.charAt(++_);g&&(b=d.default.randomCharNear(b,n),null==r&&(r=_)),l.displayValue=v+j.default.inject(h+b,o)}return setTimeout(a,l.getTypingSpeed(e,i))}(),this}function C(s,t){var l=a();if(null==l)return s();if(w.erase!==!0)return l.displayValue="",s();var n=D.options.minSpeed.erase,e=D.options.maxSpeed.erase,i=l.displayValue,v=j.default.map(i);i=j.default.strip(i);var _=i.length,c=void 0,r=0;return o.default.isNumber(t)&&(t>0?c=t:r=i.length+t),function t(){return _===r?s():(l.displayValue=j.default.inject(i.substr(0,--_),v),setTimeout(t,c||l.getTypingSpeed(n,e)))}(),this}function m(s,t){return t.call(this,s),this}function b(s,t){return setTimeout(s.bind(this),t),this}function f(s,t){return s.split(",").forEach(function(s){s=s.trim(),o.default.isArray(D.events[s])||(D.events[s]=[]),D.events[s].push(t)}),this}function y(){for(var s=arguments.length,t=Array(s),a=0;a<s;a++)t[a]=arguments[a];var l=t[0],n=D.events[l]||[];return n.length>0&&n.concat(D.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(w=r.default.merge({},g,w),o.default.isNumber(w.minSpeed)){var k=w,x=k.minSpeed;w.minSpeed={erase:x,type:x}}if(o.default.isNumber(w.maxSpeed)){var A=w,M=A.maxSpeed;w.maxSpeed={erase:M,type:M}}if("detect"===w.locale&&u){var N=u.languages;o.default.isArray(N)&&o.default.isString(N[0])&&(w.locale=N[0].substr(0,2))}d.default.supports(w.locale)||(w.locale=d.default.defaultLocale);var D={options:w,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:l,play:i,replay:v,stop:c,on:f},{options:{get:function(){return D.options},configurable:!0,enumerable:!0},status:{get:function(){return D.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(t,"__esModule",{value:!0});var v=a(1),_=l(v),c=a(3),r=l(c),p=a(2),o=l(p),h=a(4),d=l(h),C=a(6),j=l(C),u="undefined"!=typeof window&&window.navigator,g={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};i.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],t=i();return t.addActor(s,{accuracy:1,speed:.8}),t},t.default=i,s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}Object.defineProperty(t,"__esModule",{value:!0});var n=a(2),e=l(n),i=a(3),v=l(i),_="undefined"!=typeof window&&window.document,c={speed:.6,accuracy:.6};t.default=function(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l="",n=void 0;if(e.default.isNumber(t)&&(t={speed:t,accuracy:t}),t=v.default.merge({},c,t),_&&(null==a&&(a="#"+s),e.default.isString(a))){var i=a,r=_.querySelector(i);if(null==r)throw new Error("no matches for "+s+"'s selector: "+i);n=r,a=function(s){n.innerHTML=s}}return e.default.isFunction(a)||(a=console.log.bind(console)),Object.defineProperties({$element:n,getTypingSpeed:function(s,a){var l=v.default.randomFloat(t.speed,1);return v.default.getPercentageOf(a,s,l)},shouldBeMistaken:function(s,a){var l=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n=arguments.length<=3||void 0===arguments[3]?null:arguments[3],i=10*t.accuracy;if(i>=8)return!1;if(s.length<=i)return!1;if(s.length===a.length)return!1;if(e.default.isNumber(l)){var _=s.length-l,c=i>=6?10-i:4;if(_>=c)return!1}if(e.default.isNumber(n)){var _=s.length-n,r=2*Math.max(i,2);if(_<=r)return!1}return v.default.randomFloat(0,.8)>t.accuracy}},{displayValue:{get:function(){return l},set:function(s){l=s,a(s)},configurable:!0,enumerable:!0},name:{get:function(){return s},configurable:!0,enumerable:!0}})},s.exports=t.default},function(s,t){"use strict";function a(s){return{}.toString.call(s)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={isNumber:function(s){return"number"==typeof s},isString:function(s){return"[object String]"===a(s)},isObject:function(s){return"[object Object]"===a(s)},isArray:function(s){return"[object Array]"===a(s)},isFunction:function(s){return"function"==typeof s}},s.exports=t.default},function(s,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={merge:function(s){for(var t=[].slice.call(arguments,1),a=0,l=t.length;a<l;a++){var n=t[a];for(var e in n)n.hasOwnProperty(e)&&(s[e]=n[e])}return s},random:function(s,t){return Math.floor(Math.random()*(t-s+1))+s},randomFloat:function(s,t){return Math.random()*(t-s)+s},getPercentageOf:function(s,t,a){return s-s*a+t*a}},s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){for(var t={},a=0,l=s.length,n=void 0;a<l;a++){n=s[a];for(var e=0,i=n.length;e<i;e++)t[n[e]]={x:e,y:a}}return t}Object.defineProperty(t,"__esModule",{value:!0});var e=a(2),i=l(e),v=a(3),_=l(v),c=a(5),r=l(c),p="en";for(var o in r.default)if(r.default.hasOwnProperty(o)){var h=r.default[o];r.default[o]={list:h,mapped:n(h)}}t.default={defaultLocale:p,supports:function(s){return i.default.isObject(r.default[s])},randomCharNear:function(s,t){if(!this.supports(t))throw new Error('locale "'+t+'" is not supported');var a=r.default[t].mapped,l=1,n=[],e=/[A-Z]/.test(s);s=s.toLowerCase();var i=a[s]||[],v=void 0;for(var c in a)a.hasOwnProperty(c)&&c!==s&&(v=a[c],Math.abs(i.x-v.x)<=l&&Math.abs(i.y-v.y)<=l&&n.push(c));var p=n.length>0?n[_.default.random(0,n.length-1)]:this.randomChar(t);return e&&(p=p.toUpperCase()),p},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var t=r.default[s].list.join("");return t.charAt(_.default.random(0,t.length-1))}},s.exports=t.default},function(s,t){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){var t=s.match(/<([^\s>]+)/);return Boolean(t)&&i.default.indexOf(t[1].toLowerCase())>-1}Object.defineProperty(t,"__esModule",{value:!0});var e=a(7),i=l(e);t.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var t=/<[^>]+>/gi,a=[],l=[],e=void 0,i=void 0;e=t.exec(s);)i={tagName:e[0],position:e.index},"/"===i.tagName.charAt(1)?i.opener=l.pop():"/"===i.tagName.charAt(i.tagName.length-2)||n(i.tagName)||l.push(i),a.push(i);return a},inject:function(s,t){for(var a=0,l=void 0;a<t.length;a++)l=t[a],s.length>0&&l.position<=s.length?s=s.substr(0,l.position)+l.tagName+s.substr(l.position):l.opener&&l.opener.position<s.length&&(s+=l.tagName);return s}},s.exports=t.default},function(s,t){s.exports=["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]}])})},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(580),alt:""}}),l("h3",[s._v("Guide")]),l("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(581),alt:""}}),l("h3",[s._v("Component")]),l("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(582),alt:""}}),l("h3",[s._v("Resource")]),l("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(583),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("A Desktop UI Library")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),l("img",{attrs:{src:a(584),alt:"Element"}})])])}]}},function(s,t,a){s.exports=a.p+"static/guide.0a8462c.png"},function(s,t,a){s.exports=a.p+"static/component.bd3411b.png"},function(s,t,a){s.exports=a.p+"static/resource.a72b8f8.png"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA74AAACRCAYAAADkbGR/AAAAAXNSR0IArs4c6QAAEK9JREFUeAHt3d1vHFcZB+Cd2U3txknUFKgDSBAwaaKmNGplQPS2t9wg1FwiQRoJlX+Cf6KlUeoScYWKUG+47RVSkUrUqIhEiZsQqjYoQRCixJTY8e6wJ/RY2+3uetfej/l4LFlnPTM7532fYzn+Zca7tZoPAgQIECBAgAABAgQIECBAgAABAgQIzFLg3uu/fjp8zrIGcxMgQGCWAtnN3z8dPmdZg7kJECiuQFLc0lVOgACBagiEwJvVmt8I3Sa1+vX9L/34L9XoXJcECBD4v0AIvM3a5sOfg/Va43py6Ad+DvrmIEBgJAHBdyQuBxMgQGC6Ap2hN84s/EYJIwECVRDoDL2xX+E3ShgJEBhWQPAdVspxBAgQmLJAr9AbSxB+o4SRAIEyC/QKvbFf4TdKGAkQGEZA8B1GyTEECBCYssCg0BtLEX6jhJEAgTIKDAq9sV/hN0oYCRDYTkDw3U7IfgIECExZYJjQG0sSfqOEkQCBMgkME3pjv8JvlDASIDBIQPAdpGMfAQIEpiwwSuiNpQm/UcJIgEAZBEYJvbFf4TdKGAkQ6CeQ9tthOwECBAgQIECAAAECBAgQKIOAK75lWEU9ECBQKoFRrvq62luqpdcMAQKfCoxy1dfVXt82BAgMIyD4DqPkGAIECExZYJjwK/ROeVFMR4DAVAWGCb9C71SXxGQECi0g+BZ6+RRPgECZBQaFX6G3zCuvNwIEosCg8Cv0RiUjAQLDCAi+wyg5hgABAjMS6BV+hd4ZLYZpCRCYiUCv8Cv0zmQpTEqg0AKCb6GXT/EECFRBoDP8Cr1VWHE9EiDQLdAZfoXebh1fEyBAgAABAgRKIhDCb/gsSTvaIECAwMgCIfyGz5Gf6AkECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECFRAIMuy5P6Zc0vZ2bOLvdpNem20jQABAgQIECBAgAABAgQIFEEghN67r64sJbX0iVDv/kea15LTp2911i74dmp4TIAAAQIECBAgQIAAAQKFEegOvbHw7vAr+EYZIwECBAgQIECAAAECBAgURqBf6I0NdIZfwTeqGAkQIECAAAECBAgQIECgEALbhd7YRAy/gm8UMRIgQIAAAQIECBAgQIBAIQTCC1ltbLZ6vpBVdwNp+29+0+6NviZAgAABAgQIECBAgAABAnkWmEsfrA1TX6NRay6k6Seu+A6j5RgCBAgQIECAAAECBAgQyJVAeOuiexv1pX5FhdD7aCO7lJw6dU/w7adkOwECBAgQIECAAAECBAjkWqBf+O0MvaEBwTfXy6g4AgQIECBAgAABAgQIEBgk0B1+u0NveK7gO0jQPgIECBAgQIAAAQIECBDIvUAMv71Cb+6LVyABAgQIECBAgAABAgQIEBhGYK39N7/Zysr+YY51DAECBAgQIECAAAECBAgQIECAAIHxCLTfeDsNn+M5m7MQIECAAAECBAgQINBLoNFro20ECExeIATety/dPhZmaj++nCRJa/KzmoEAAQIECBAgQIBA9QS8uFX11lzHORCIobcddR8L5bSv+d554anHhd8crI0SCBAgQIAAAQIEyicg+JZvTXWUc4Hu0BvLFX6jhJEAAQIECBAgQIDAeAUE3/F6OhuBgQL9Qm98kvAbJYwECBAgQIAAAQIExifgRXXGZ+lMBAgQIECAAAECBAgQIJBDAVd8c7goSiq3QL+rvq72lnvddUeAAAECBAgQIDA7gZ5XfF/MsvrsSjIzgXILhFdvDi9kFYJu7FTojRJGAgQIECBAgAABAuMX+NwV38Wb7y/U9jW/30jrl2/sPfHx+Kd0RgIEgkC88hsee0XnoOCDAAECBAgQIECAwGQEPhN8Q+jN9m08nyTpfJiukTQuCL+TgXdWAkEghN8weg/foOCDAAECBAgQIECAwGQEtoJvd+iN0wm/UcJIgAABAgQIECBAgAABAkUUeBh8+4Xe2JDwGyWMBAgQIECAAAECBAgQIFA0gXS70Bsa2sw2nz289u6hojWnXgIECBAgQIAAAQIECBAgkDb23p9Pk8aeQRRJq3l3YWHh9qBj7CNAgAABAgQIECBAgAABAnkUSG8c+N6/0mbz3aSWNnsVGELvF/Yt/PFicnyj137bCBAgQIAAAQIECBCorkD7xTqT137z3onXf/fe16uroPO8C2y9uNVX7p7/Yqte/25Wa229h6/Qm/flUx8BAgQIECBAgACB2QmE0HvmrQvP1FrZ10IVjST580s/eu7D2VVkZgK9BR6+lUrY9fcDy//svPIr9PYGs5UAAQIECORJIPzSmX1wbin769nFPNWlFgIEyi/QHXpDx5tZ9owrv+Vf+yJ2uHXFNxYfrvxuNupHv/ToI39ye3NUMRIgQIAAgfwJhF861y+tLNXT9IlQXWOueS355ulb+atURQQIlFHgl29dOJw0W9/u1dtcPf3DT3747J1e+2wjMAuBzwXfWRRhTgIECBAgQGA0ge7QG58t/EYJIwECkxZo/xxKX/vt+8tJ2vzMHSetVmP15ZMnrkx6fucnMIrA1q3OozzJsQQIECBAgMCMBf52bjFe6e2sZHO9vpRdfGVf5zaPCRAgMAmBJElaP3vxxPmsVd+600TonYS0c45DQPAdh6JzECBAgACBaQsc/vAfrXrz393Ttt+g8KPk+M/Xurf7mgABApMQ6Ay/Qu8khJ1zXAJudR6XpPMQIECAAIEpC2TZL9KND756NG3WD4apH4beb/30oymXYToCBAjUwp9ftD8yFATyKiD45nVl1EWAAAECBIYQiOH3kbS+lgi9Q4g5hAABAgQIECBAgAABAgQKJxCutBSuaAUTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGJC2RZll67dm354sWLhyY+mQkqIZBWoktNEiBAgAABAgQIECBQCIEQeldXV5dbrdaX0zQVfguxavkvMsl/iSokQIDA7gTCP6DhDEmStHZ3Js8mQIAAAQIEJikQQ2878C7GeTY3N7N2CD5//Pjxm3GbkcCoAoLvqGKOJ0CgUALhH9C3L90+Fop+4anHLwu/hVo+xRIgQIBAhQR6hd7YvvAbJYw7FRB8dyrneQQI5F4ght72dd7HQrHt6753hN/cL5sCCRAgQKCCAoNCb+QQfqOEcScCgu9O1DyHAIHcC3SH3liw8BsljAQIECBAIB8Cw4TeWKnwGyWMowp4catRxRxPgEDuBfqF3lB4uPobbn0Ox+S+EQUSIECAAIEKCFy9enVP+9/lfcO02mg0kvn5+QPDHOsYAp0CfvHr1PCYAAECBAgQIECAAIGpChw5cmR9bm7unWaz+Z/tJm4fs7q0tLS63XH2E+gWcKtzt4ivCRAohUC/q75udS7F8mqCAAECBEoocP369fn19fXn6/X6Qq/2Qug9duzYlV77bCOwnYDgu52Q/QQIFFagO/wKvYVdSoUTIECAQEUE+oVfobci3wATbFPwnSCuUxMgMHuBGH5DJV7RefbroQICBAgQILCdQHf4FXq3E7N/GAHBdxglxxAgUGiBEH5DA97Dt9DLqHgCBAgQqJBADL/tlm+4vblCC69VAgQIECBAgAABAgQIVEmg/R/XjSr1q1cCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECuxPIsizZ3Rk8mwABAvkTSPNXkooIECBAgAABAgRmIdAOvel/V1a+c/fVlaOzmN+cBAgQmJSA/9GblKzzEiBAgAABAgQKJPBp6F3ONmuLoexmK1k98PKpKwVqQakECBDoKyD49qWxgwABAgQIECBQDYHu0Bu7Fn6jhJEAgaILuNW56CuofgIECBAgQIDALgT6hd5wynqaPXl3xW3Pu+D1VAIEciLgim9OFkIZBAgQIECAAIFpCwwKvZ21NPe0b3s+5bbnThOPCRAoloArvsVaL9USIECAAAECBMYm8MkbbzwX/6Z30EnrD7In7585tzToGPsIECCQZwHBN8+rozYCBAgQIECAwAQFsvvpx82slW03RZYk63MH997a7jj7CRAgkFcBtzrndWXURYAAAQIECBCYgsDaK7861EofLNeTtOfvhSH0Lhzc/05y8uTaFMoxBQECBCYi0PMH3ERmclICBAgQIECAAIFcCvQLv0JvLpdLUQQI7EBA8N0BmqcQIECAAAECBMom0B1+hd6yrbB+CFRbQPCt9vrrngABAgQIECCwJRDDb5rWN9zevMXiAQECBAgQIECAAAECBAiUSWDt7NnF7M0395WpJ70QIEDgf01Qh63gZYluAAAAAElFTkSuQmCC"},function(s,t,a){s.exports=a.p+"static/banner-bg.75437e1.svg"},function(s,t,a){function l(s){a(586)}var n=a(13)(a(588),a(589),l,"data-v-b2da9546",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(577),e=l(n);t.default={mounted:function(){function s(t){t.addScene("产品设计师",1800,-5,800).addScene("交互设计师",1800,-5,500).addScene("视觉设计师",1800,-5,700).addScene("产品经理",1800,-4,600).addScene("前端工程师",1800,-5,800).addScene(function(a){s(t),a()})}var t=(0,e.default)();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:.5,accuracy:1}).addScene(2600).addScene("line2:只为守护世界和平",300,-6,1e3).addScene("让你少加班",300,-5).addScene("line2:只为这样的你: ",400).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(580),alt:""}}),l("h3",[s._v("指南")]),l("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(581),alt:""}}),l("h3",[s._v("组件")]),l("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(582),alt:""}}),l("h3",[s._v("资源")]),l("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(583),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("网站快速成型工具")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。")])]),l("img",{attrs:{src:a(584),alt:"Element"}})])])}]}},function(s,t,a){var l=a(13)(a(591),a(597),null,null,null);s.exports=l.exports},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(592),e=l(n);t.default={components:{PlayComponent:e.default}}},function(s,t,a){function l(s){a(593)}var n=a(13)(a(595),a(596),l,"data-v-253c8cb7",null);s.exports=n.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{},data:function(){return{value:"#bfcbd9",value2:null}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("el-button",{on:{click:function(t){s.value="#fff"}}},[s._v("Change Value")]),a("div",[s._v("Value: "+s._s(s.value))]),a("el-color-picker",{model:{value:s.value,callback:function(t){s.value=t},expression:"value"}}),a("div",[s._v("Value2: "+s._s(s.value2))]),a("el-color-picker",{attrs:{"show-alpha":""},model:{value:s.value2,callback:function(t){s.value2=t},expression:"value2"}})],1)},staticRenderFns:[]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticStyle:{margin:"20px"}},[a("play-component")],1)},staticRenderFns:[]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t){},,,,,function(s,t,a){function l(s){a(991)}var n=a(13)(a(993),a(995),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n);t.default={data:function(){return{hovering:!1,isExpanded:!1}},props:{jsfiddle:Object,default:function(){return{}}},methods:{goJsfiddle:function(){var s=this.jsfiddle,t=s.script,a=s.html,l=s.style,n='<script src="//unpkg.com/vue/dist/vue.js"></script>\n<script src="//unpkg.com/element-ui/lib/index.js"></script>',e=(t||"").replace(/export default/,"var Main =").trim(),i=n+'\n<div id="app">\n'+a.trim()+"\n</div>",v='@import url("//unpkg.com/element-ui/lib/theme-default/index.css");\n'+(l||"").trim()+"\n";e=e?e+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')";var _={js:e,css:v,html:i,panel_js:3,panel_css:1},c=document.getElementById("fiddle-form")||document.createElement("form");c.innerHTML="";var r=document.createElement("textarea");c.method="post",c.action="https://jsfiddle.net/api/post/library/pure/",c.target="_blank";for(var p in _)r.name=p,r.value=_[p].toString(),c.appendChild(r.cloneNode());c.setAttribute("id","fiddle-form"),c.style.display="none",document.body.appendChild(c),c.submit()}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0]},codeAreaHeight:function(){return this.$el.getElementsByClassName("description").length>0?Math.max(this.$el.getElementsByClassName("description")[0].clientHeight,this.$el.getElementsByClassName("highlight")[0].clientHeight):this.$el.getElementsByClassName("highlight")[0].clientHeight;
+}},watch:{isExpanded:function(s){this.codeArea.style.height=s?this.codeAreaHeight+1+"px":"0"}},mounted:function(){var s=this;this.$nextTick(function(){var t=s.$el.getElementsByClassName("highlight")[0];0===s.$el.getElementsByClassName("description").length&&(t.style.width="100%",t.borderRight="none")})}}},function(s,t){s.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on jsfiddle.net"},footer:{feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}}]},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"demo-block",class:[s.blockClass,{hover:s.hovering}],on:{mouseenter:function(t){s.hovering=!0},mouseleave:function(t){s.hovering=!1}}},[s._t("source"),a("div",{staticClass:"meta"},[a("div",{staticClass:"description"},[s._t("default"),a("el-tooltip",{attrs:{effect:"dark",content:s.langConfig["tooltip-text"],placement:"right"}},[a("el-button",{attrs:{size:"small",type:"primary"},on:{click:s.goJsfiddle}},[s._v(s._s(s.langConfig["button-text"]))])],1)],2),s._t("highlight")],2),a("div",{staticClass:"demo-block-control",on:{click:function(t){s.isExpanded=!s.isExpanded}}},[a("transition",{attrs:{name:"arrow-slide"}},[a("i",{class:[s.iconClass,{hovering:s.hovering}]})]),a("transition",{attrs:{name:"text-slide"}},[a("span",{directives:[{name:"show",rawName:"v-show",value:s.hovering,expression:"hovering"}]},[s._v(s._s(s.controlText))])])],1)],2)},staticRenderFns:[]}},function(s,t,a){function l(s){a(997)}var n=a(13)(a(999),a(1e3),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n),i=a(598);t.default={data:function(){return{version:i.version}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0].footer}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("footer",{staticClass:"footer"},[l("div",{staticClass:"container"},[l("div",{staticClass:"footer-main"},[l("p",{staticClass:"footer-main-title"},[s._v("Element "+s._s(s.version)+" Lithium")]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[s._v(s._s(s.langConfig.feedback))]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+s.lang+".md",target:"_blank"}},[s._v(s._s(s.langConfig.contribution))])]),l("div",{staticClass:"footer-social"},[l("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[l("div",{staticClass:"footer-popover-title"},[s._v(s._s(s.langConfig.eleme)+" UED")]),l("img",{attrs:{src:a(1001),alt:""}})]),l("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),s._m(0)],1)])])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("a",{attrs:{href:"//github.com/elemefe",target:"_blank"}},[a("i",{staticClass:"doc-icon-github elementdoc"})])}]}},function(s,t,a){s.exports=a.p+"static/qrcode.a88f522.png"},function(s,t,a){function l(s){a(1003)}var n=a(13)(a(1005),a(1006),l,"data-v-7ad4e6e1",null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n);t.default={data:function(){return{active:"",isHome:!1,headerStyle:{}}},watch:{"$route.path":{immediate:!0,handler:function(){this.isHome=/^home/.test(this.$route.name),this.headerStyle.backgroundColor="rgba(32, 160, 255, "+(this.isHome?"0":"1")+")"}}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0].header}},methods:{switchLang:function(s){this.lang!==s&&(localStorage.setItem("ELEMENT_LANGUAGE",s),this.$router.push(this.$route.path.replace(this.lang,s)))}},mounted:function(){function s(s){window.addEventListener("scroll",function(){s()},!1)}var t=this;s(function(){if(t.isHome){var s=200,a=Math.min(document.documentElement.scrollTop||document.body.scrollTop,s)/s;t.$refs.header.style.backgroundColor="rgba(32, 160, 255, "+a+")"}})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"headerWrapper"},[l("header",{ref:"header",staticClass:"header",class:{"header-home":s.isHome},style:s.headerStyle},[l("div",{staticClass:"container"},[l("h1",[l("router-link",{attrs:{to:"/"+s.lang}},[l("img",{staticClass:"nav-logo",attrs:{src:a(1007),alt:"element-logo"}}),l("img",{staticClass:"nav-logo-small",attrs:{src:a(1008),alt:"element-logo"}})])],1),l("ul",{staticClass:"nav"},[l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/guide"}},[s._v(s._s(s.langConfig.guide)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/component"}},[s._v(s._s(s.langConfig.components)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/resource",exact:""}},[s._v(s._s(s.langConfig.resource)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("span",{staticClass:"nav-lang",class:{active:"zh-CN"===s.lang},on:{click:function(t){s.switchLang("zh-CN")}}},[s._v("\n            中文\n          ")]),l("span",[s._v(" / ")]),l("span",{staticClass:"nav-lang",class:{active:"en-US"===s.lang},on:{click:function(t){s.switchLang("en-US")}}},[s._v("\n            En\n          ")])])])])])])},staticRenderFns:[]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t,a){function l(s){a(1010)}var n=a(13)(a(1012),a(1013),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(994),e=l(n),i=a(598);t.default={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,versions:[],version:i.version,dropdownVisible:!1}},watch:{"$route.path":function(){this.handlePathChange()}},computed:{navStyle:function(){return this.isSmallScreen?{"padding-bottom":"60px"}:{}},isComponentPage:function(){return/^component-/.test(this.$route.name)},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.$route.meta.lang})[0].nav}},methods:{switchVersion:function(s){s!==this.version&&(location.href=location.origin+"/"+this.versions[s]+"/"+location.hash+" ")},handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var s=this;return this.isSmallScreen?void this.$nextTick(function(){s.hideAllMenu();for(var t=s.$el.querySelector("a.active"),a=t.parentNode;"UL"!==a.tagName;)a=a.parentNode;a.style.height="auto"}):void this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="auto"})},expandMenu:function(s){if(this.isSmallScreen){var t=s.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),s.currentTarget.nextElementSibling.style.height="auto")}},handleDropdownToggle:function(s){this.dropdownVisible=s}},created:function(){var s=this,t=new XMLHttpRequest;t.onreadystatechange=function(a){4===t.readyState&&200===t.status&&(s.versions=JSON.parse(t.responseText))},t.open("GET","/versions.json"),t.send()},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"side-nav",style:s.navStyle},[a("el-dropdown",{directives:[{name:"show",rawName:"v-show",value:s.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-dropdown",class:{"is-active":s.dropdownVisible},attrs:{trigger:"click"}},[a("span",[s._v("\n      "+s._s(s.langConfig.dropdown)+s._s(s.version)+"\n      "),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{offset:-80},on:{input:s.handleDropdownToggle},slot:"dropdown"},s._l(Object.keys(s.versions),function(t){return a("el-dropdown-item",{key:t,nativeOn:{click:function(a){s.switchVersion(t)}}},[s._v("\n        "+s._s(t)+"\n      ")])}))],1),a("ul",s._l(s.data,function(t){return a("li",{staticClass:"nav-item"},[t.path?a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}}):a("a",{on:{click:s.expandMenu}},[s._v(s._s(t.name))]),t.children?a("ul",{staticClass:"pure-menu-list sub-nav"},s._l(t.children,function(t){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}})],1)})):s._e(),t.groups?s._l(t.groups,function(t){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title",on:{click:s.expandMenu}},[s._v(s._s(t.groupName))]),a("ul",{staticClass:"pure-menu-list"},s._l(t.list,function(t){return t.disabled?s._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title)}})],1)}))])}):s._e()],2)}))],1)},staticRenderFns:[]}},function(s,t,a){function l(s){a(1015)}var n=a(13)(a(1017),a(1018),l,null,null);s.exports=n.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n);t.default={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var s=this,t=e.default[this.lang];this.nav=t[0].children.concat(t[1]),t[2].groups.map(function(s){return s.list}).forEach(function(t){s.nav=s.nav.concat(t)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var s=0,t=this.nav.length;s<t;s++)if(this.nav[s].path===this.currentComponent){this.currentIndex=s;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(s){this.$router.push("/"+this.lang+"/component"+("prev"===s?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"footer-nav"},[s.leftNav?a("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(t){s.handleNavClick("prev")}}},[a("i",{staticClass:"el-icon-arrow-left"}),s._v("\n    "+s._s(s.leftNav.title||s.leftNav.name)+"\n  ")]):s._e(),s.rightNav?a("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(t){s.handleNavClick("next")}}},[s._v("\n    "+s._s(s.rightNav.title||s.rightNav.name)+"\n    "),a("i",{staticClass:"el-icon-arrow-right"})]):s._e()])},staticRenderFns:[]}},function(s,t){s.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"}}}]);
\ No newline at end of file
diff --git a/docs.2dddc2b.css b/docs.2dddc2b.css
new file mode 100644
index 000000000..f740f3805
--- /dev/null
+++ b/docs.2dddc2b.css
@@ -0,0 +1 @@
+.hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}.hljs,.hljs-subst{color:#000}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#756bb1}.hljs-comment,.hljs-quote{color:#636363}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp{color:#31a354}.hljs-deletion,.hljs-variable{color:#88f}.hljs-built_in,.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-title,.hljs-type{color:#3182bd}.hljs-emphasis{font-style:italic}.hljs-attribute{color:#e6550d}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:application/font-woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAwOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLW9mZiIgZD0iTTAgNDQ4YzAgMjgyLjc2NiAyMjkuMjM0IDUxMiA1MTIgNTEyczUxMi0yMjkuMjM0IDUxMi01MTJjMC0yODIuNzY2LTIyOS4yMzQtNTEyLTUxMi01MTJzLTUxMiAyMjkuMjM0LTUxMiA1MTJ6TTk0Ny4yIDQ0OGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMnMtNDM1LjItMTk0Ljg0OS00MzUuMi00MzUuMmMwLTI0MC4zNTEgMTk0Ljg0OS00MzUuMiA0MzUuMi00MzUuMnM0MzUuMiAxOTQuODQ5IDQzNS4yIDQzNS4yek0yOTQuNCA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNNjI3LjIgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTM2MS4xNDMgMjgxLjZjLTIyLjcxMSAwLTQxLjE0My0xOC42MzctNDEuMTQzLTQxLjZzMTguNDMyLTQxLjYgNDEuMTQzLTQxLjZoMzAxLjcxNGMyMi43MTEgMCA0MS4xNDMgMTguNjM3IDQxLjE0MyA0MS42cy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNmgtMzAxLjcxNHoiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAxOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTEiIGQ9Ik01MTIuMDAxIDk2MGMtMjgyLjc3MSAwLTUxMi4wMDEtMjI5LjIzLTUxMi4wMDEtNTEyLjAwMiAwLTI4Mi43NyAyMjkuMjMtNTExLjk5OCA1MTIuMDAxLTUxMS45OTggMjgyLjc2OSAwIDUxMS45OTkgMjI5LjIyNyA1MTEuOTk5IDUxMS45OThzLTIyOS4yMyA1MTIuMDAyLTUxMS45OTkgNTEyLjAwMnpNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTYyNy4yIDU4OC44NTNjMCAyOC4yNDcgMjIuNzI2IDUxLjE0NyA1MS4yIDUxLjE0NyAyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek02OTQuNTI5IDE4MS4xOTdsLTMuNDIyIDEuMjE2Yy01Ni4xNSAyNy44NzItMTE2LjM4OCA0Mi4wNDctMTc4Ljg4MiA0Mi4wNDctNjQuNTU2IDAtMTI1LjYxMS0xNC4zMTYtMTgxLjUxNS00Mi40NWwtMy4zODItMS4xMzJjLTIuMTAyLTAuNjI4LTQuOTQ1LTEuNTI5LTguNDg5LTEuNTI5LTIwLjU1NCAwLTM3LjIzOSAxOC4yOS0zNy4yMzkgNDAuNzM0IDAgMTAuNjU1IDQuNTcxIDIxLjM2MSAxMi4xMTQgMjkuMzk5bC0wLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAyOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTIiIGQ9Ik01MTItNjRjLTI4Mi43NjYgMC01MTIgMjI5LjIzNC01MTIgNTEyczIyOS4yMzQgNTEyIDUxMiA1MTJjMjgyLjc2NiAwIDUxMi0yMjkuMjM0IDUxMi01MTJzLTIyOS4yMzQtNTEyLTUxMi01MTJ6TTI5NC40IDU4OC44NTN2LTUxLjMwN2MwLTI4LjQ4MiAyMi45MjMtNTEuMTQ3IDUxLjItNTEuMTQ3IDI4LjQ3NCAwIDUxLjIgMjIuODk5IDUxLjIgNTEuMTQ3djUxLjMwN2MwIDI4LjQ4Mi0yMi45MjMgNTEuMTQ3LTUxLjIgNTEuMTQ3LTI4LjQ3NCAwLTUxLjItMjIuODk5LTUxLjItNTEuMTQ3ek02MjcuMiA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3pNMzYxLjE0MyAyODEuNmMtMjIuNzExIDAtNDEuMTQzLTE4LjYzNy00MS4xNDMtNDEuNnMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0YzIyLjcxMSAwIDQxLjE0MyAxOC42MzcgNDEuMTQzIDQxLjZzLTE4LjQzMiA0MS42LTQxLjE0MyA0MS42aC0zMDEuNzE0eiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGU5MDM7IiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMyIgZD0iTTUxMi4wMDEgOTYwYy0yODIuNzcgMC01MTIuMDAxLTIyOS4yMy01MTIuMDAxLTUxMS45OTlzMjI5LjIzLTUxMi4wMDEgNTEyLjAwMS01MTIuMDAxYzI4Mi43NyAwIDUxMS45OTkgMjI5LjIzIDUxMS45OTkgNTExLjk5OXMtMjI5LjIyOSA1MTIuMDAxLTUxMS45OTkgNTEyLjAwMXpNODE3LjQ5NSAzMDUuNTY1Yy0wLjQ0NS0xLjQ4NS0wLjk2My0yLjkzOS0xLjU2OS00LjM1LTAuNjc2LTEuNTcyLTEuNDU1LTMuMDg5LTIuMzE3LTQuNTU2LTU1LjYzMS0xMDcuNjEzLTE2OS41MTgtMTgxLjQ1OS0zMDEuMzIzLTE4MS40NTktMC4wOTYgMC0wLjE5IDAuMDAyLTAuMjg2IDAuMDAycy0wLjE5LTAuMDAyLTAuMjg2LTAuMDAyYy0xMzEuODA0IDAtMjQ1LjY5MyA3My44NDUtMzAxLjMyMyAxODEuNDU5LTAuODYyIDEuNDY3LTEuNjQxIDIuOTg0LTIuMzE3IDQuNTU2LTAuNjA2IDEuNDEtMS4xMjQgMi44NjUtMS41NjkgNC4zNS0xLjEwMyAzLjY4LTEuNzA1IDcuNTY5LTEuNzA1IDExLjU5NyAwIDYuNTY2IDEuNTc5IDEyLjc3MSA0LjM3MiAxOC4yODIgNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWgwLjY3NmM0MS40MTEtODEuNDUzIDEyNy4xMzEtMTM3LjU0NCAyMjYuNTA3LTEzNy42NTIgOTkuMzc1IDAuMTA4IDE4NS4wOTUgNTYuMiAyMjYuNTA3IDEzNy42NTJoMC42NzZjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIzIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIyLTIyLjk1NWMyLjc5NC01LjUxMSA0LjM3Mi0xMS43MTUgNC4zNzItMTguMjgyIDAtNC4wMjktMC42MDItNy45MTgtMS43MDUtMTEuNTk3ek02MjcuMiA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6IiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==#icomoon) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\E900"}.icon-rate-face-1:before{content:"\E901"}.icon-rate-face-2:before{content:"\E902"}.icon-rate-face-3:before{content:"\E903"}body,html{margin:0;padding:0}#app,body,html{height:100%}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;overflow:auto;font-weight:400;-webkit-font-smoothing:antialiased}a{color:#4078c0;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#f9fafc;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 120px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0 30px;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h2:hover a,.page-container h3 a:hover,.page-container h3:hover a,.page-container h4 a:hover,.page-container h4:hover a,.page-container h5 a:hover,.page-container h5:hover a{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}}.page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}.page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}.clearfix[data-v-01b04186]:after,.clearfix[data-v-01b04186]:before{display:table;content:""}.clearfix[data-v-01b04186]:after{clear:both}.share-button[data-v-01b04186]{width:36px;padding:10px}.mark[data-v-01b04186]{margin-top:8px;line-height:1;float:right}.item[data-v-01b04186]{margin-right:40px}.clearfix[data-v-10f2e1a8]:after,.clearfix[data-v-10f2e1a8]:before{display:table;content:""}.clearfix[data-v-10f2e1a8]:after{clear:both}.text[data-v-10f2e1a8]{font-size:14px}.time[data-v-10f2e1a8]{font-size:13px;color:#999}.bottom[data-v-10f2e1a8]{margin-top:13px;line-height:12px}.item[data-v-10f2e1a8]{padding:18px 0}.button[data-v-10f2e1a8]{padding:0;float:right}.image[data-v-10f2e1a8]{width:100%;display:block}.box-card[data-v-10f2e1a8]{width:480px}.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}.demo-input.demo-en-US .el-select .el-input{width:110px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}.demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}.demo-badge.demo-box .el-dropdown{vertical-align:middle}.clearfix[data-v-39800af8]:after,.clearfix[data-v-39800af8]:before{display:table;content:""}.clearfix[data-v-39800af8]:after{clear:both}.share-button[data-v-39800af8]{width:36px;padding:10px}.mark[data-v-39800af8]{margin-top:8px;line-height:1;float:right}.item[data-v-39800af8]{margin-right:40px}.demo-box.demo-button .el-row{margin-bottom:10px}.demo-box.demo-button .el-button+.el-button{margin-left:10px}.demo-box.demo-button .el-button-group{margin-bottom:20px}.demo-box.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-box.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-box.demo-button .intro-block{padding:0}.demo-button .intro-block .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-button .intro-block .block:last-child{border-bottom:none}.demo-button .intro-block .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-button .intro-block .wrapper{float:right;margin-right:20px}.clearfix[data-v-13d5050c]:after,.clearfix[data-v-13d5050c]:before{display:table;content:""}.clearfix[data-v-13d5050c]:after{clear:both}.text[data-v-13d5050c]{font-size:14px}.time[data-v-13d5050c]{font-size:13px;color:#999}.bottom[data-v-13d5050c]{margin-top:13px;line-height:12px}.item[data-v-13d5050c]{padding:18px 0}.button[data-v-13d5050c]{padding:0;float:right}.image[data-v-13d5050c]{width:100%;display:block}.box-card[data-v-13d5050c]{width:480px}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .el-carousel__item:nth-child(2n+1){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}.demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-box.demo-checkbox .checkbox{margin-right:5px}.demo-box.demo-checkbox .checkbox+.checkbox{margin-left:10px}.demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}.demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue-light{background-color:#58b7ff}.bg-blue,.bg-info{background-color:#20a0ff}.bg-blue-dark{background-color:#1d8ce0}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-black{background-color:#1f2d3d}.bg-black-light{background-color:#324057}.bg-black-lighter{background-color:#475669}.bg-silver{background-color:#8492a6}.bg-silver-light{background-color:#99a9bf}.bg-silver-lighter{background-color:#c0ccda}.bg-gray{background-color:#d3dce6}.bg-gray-light{background-color:#e5e9f2}.bg-gray-lighter{background-color:#eff2f7}.bg-white-dark{background-color:#f9fafc}.color-gray{color:#5e6d82}.demo-block.demo-date-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}.demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#20a0ff}.demo-box .el-icon-caret-bottom{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-form.demo-zh-CN .el-select .el-input{width:360px}.demo-form.demo-zh-CN .el-form{width:440px}.demo-form.demo-zh-CN .line{text-align:center}.demo-form.demo-zh-CN .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-zh-CN .el-checkbox-group:after,.demo-form.demo-zh-CN .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-zh-CN .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-zh-CN .demo-form-normal{width:440px}.demo-form.demo-zh-CN .demo-form-inline{width:auto}.demo-form.demo-zh-CN .demo-form-inline .el-input{width:150px}.demo-form.demo-zh-CN .demo-form-inline>*{margin-right:10px}.demo-form.demo-zh-CN .demo-ruleForm{width:460px}.demo-form.demo-zh-CN .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-zh-CN .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-zh-CN .fr{float:right}ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}.icon-list li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.demo-icon .source>i{font-size:24px;color:#8492a6;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li span{display:inline-block;line-height:normal;vertical-align:middle;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}.icon-list li i{display:block;font-size:24px;margin-bottom:15px;color:#8492a6}.icon-list li:hover{color:#5cb6ff}.demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}.demo-input.demo-zh-CN .el-select .el-input{width:110px}.demo-input.demo-zh-CN .el-input{width:180px}.demo-input.demo-zh-CN .el-textarea{width:414px}.demo-input.demo-zh-CN .el-input-group{width:100%}.demo-input.demo-zh-CN .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-zh-CN .demo-autocomplete{text-align:center}.demo-input.demo-zh-CN .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-zh-CN .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-zh-CN .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}.demo-loading .el-table{border:none}.demo-box.demo-menu .el-menu-demo{padding-left:55px}.demo-box.demo-menu .el-menu-vertical-demo{width:200px;min-height:400px}.demo-box.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-box.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-box.demo-menu .tac{text-align:center}.demo-box.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}.demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{float:right;width:70%;margin:5px 20px 0 0}.demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}.demo-box.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-box.demo-progress .el-progress--circle{margin-right:15px}.demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-select .el-select{width:240px}.demo-box.demo-slider .source{padding:0}.demo-box.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-box.demo-slider .block:last-child{border-bottom:none}.demo-box.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-box.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}.demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}.el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}.demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:24px;line-height:22px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:78px;margin-left:10px;vertical-align:bottom}.demo-box.demo-tag .input-new-tag .el-input__inner{height:24px}.demo-box .el-date-editor+.el-date-editor{margin-left:10px}.demo-tooltip .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip .box{width:400px}.demo-tooltip .box .top{text-align:center}.demo-tooltip .box .left{float:left;width:60px}.demo-tooltip .box .right{float:right;width:60px}.demo-tooltip .box .bottom{clear:both;text-align:center}.demo-tooltip .box .item{margin:4px}.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip .box .el-tooltip{margin-left:0}.demo-transfer .transfer-footer{margin-left:20px;padding:6px 5px}.transition-box{margin-bottom:10px;width:200px;height:100px;border-radius:4px;background-color:#20a0ff;text-align:center;color:#fff;padding:40px 20px;margin-right:20px;box-sizing:border-box}.demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-typo-box{height:200px;width:200px;position:relative;border:1px solid #eaeefb;font-size:40px;color:#1f2d3d;text-align:center;line-height:162px;padding-bottom:36px;box-sizing:border-box;display:inline-block;margin-right:17px;border-radius:4px}.demo-typo-box .name{position:absolute;bottom:0;width:100%;height:35px;border-top:1px solid #eaeefb;font-size:14px;color:#8492a6;line-height:35px;text-align:left;text-indent:10px;font-family:Helvetica Neue}.demo-typo-size .h1{font-size:20px}.demo-typo-size .h2{font-size:18px}.demo-typo-size .h3{font-size:16px}.demo-typo-size .text-regular{font-size:14px}.demo-typo-size .text-small{font-size:13px}.demo-typo-size .text-smaller{font-size:12px}.demo-typo-size .color-dark-light{color:#99a9bf}.typo-PingFang{font-family:PingFang SC}.typo-Hiragino{font-family:Hiragino Sans GB}.typo-Microsoft{font-family:Microsoft YaHei}.typo-Helvetica-Neue{font-family:Helvetica Neue}.typo-Helvetica{font-family:Helvetica}.typo-Arial{font-family:Arial}.upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:hover{border-color:#20a0ff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}.cards[data-v-f413aa2a]{margin:30px 0 70px}.card[data-v-f413aa2a]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-f413aa2a]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-f413aa2a]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-f413aa2a]{font-size:14px;color:#99a9bf}.cards[data-v-001a30c3]{margin:30px 0 70px}.card[data-v-001a30c3]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-001a30c3]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-001a30c3]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-001a30c3]{font-size:14px;color:#99a9bf}h3[data-v-d0518674]{margin-bottom:15px}.block[data-v-d0518674]{margin-bottom:55px}p[data-v-d0518674]{margin:0 0 15px}.nav-demos p[data-v-d0518674]{margin-bottom:50px}.nav-demos h5[data-v-d0518674]{margin:0}.nav-demos img[data-v-d0518674]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-d0518674]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-d0518674]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-d0518674]{display:block;width:100%}.mask[data-v-d0518674]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-d0518674],.fade-leave-active[data-v-d0518674]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-d0518674],.fade-leave-active[data-v-d0518674]{opacity:0}h3[data-v-30267424]{margin-bottom:15px}.block[data-v-30267424]{margin-bottom:55px}p[data-v-30267424]{margin:0 0 15px}.nav-demos p[data-v-30267424]{margin-bottom:50px}.nav-demos h5[data-v-30267424]{margin:0}.nav-demos img[data-v-30267424]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-30267424]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-30267424]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-30267424]{display:block;width:100%}.mask[data-v-30267424]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-30267424],.zoom-leave-active[data-v-30267424]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-30267424],.zoom-leave-active[data-v-30267424]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-30267424],.fade-leave-active[data-v-30267424]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-30267424],.fade-leave-active[data-v-30267424]{opacity:0}.cards .container[data-v-bc99180a]:after,.cards .container[data-v-bc99180a]:before{display:table;content:""}.cards .container[data-v-bc99180a]:after{clear:both}.page-resource[data-v-bc99180a]{padding-top:55px;box-sizing:border-box}.cards[data-v-bc99180a]{margin:35px auto 110px}.cards .container[data-v-bc99180a]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-bc99180a]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-bc99180a]{font-size:28px;margin:0}p[data-v-bc99180a]{font-size:14px;color:#5e6d82}.card[data-v-bc99180a]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-bc99180a]{margin:75px auto 35px;height:87px}.card h3[data-v-bc99180a]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-bc99180a]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-bc99180a]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-bc99180a]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-bc99180a]{height:auto;padding-bottom:20px}.cards h3[data-v-bc99180a]{height:auto}}.cards .container[data-v-22ed63d3]:after,.cards .container[data-v-22ed63d3]:before{display:table;content:""}.cards .container[data-v-22ed63d3]:after{clear:both}.page-resource[data-v-22ed63d3]{padding-top:55px;box-sizing:border-box}.cards[data-v-22ed63d3]{margin:35px auto 110px}.cards .container[data-v-22ed63d3]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-22ed63d3]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-22ed63d3]{font-size:28px;margin:0}p[data-v-22ed63d3]{font-size:14px;color:#5e6d82}.card[data-v-22ed63d3]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-22ed63d3]{margin:75px auto 35px;height:87px}.card h3[data-v-22ed63d3]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-22ed63d3]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.8}.card a[data-v-22ed63d3]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-22ed63d3]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-22ed63d3]{height:auto;padding-bottom:20px}.cards h3[data-v-22ed63d3]{height:auto}}.cards .container[data-v-05bad635]:after,.cards .container[data-v-05bad635]:before{display:table;content:""}.cards .container[data-v-05bad635]:after{clear:both}.actor[data-v-05bad635]{min-height:65px}.actor[data-v-05bad635]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-05bad635]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-05bad635]{position:relative}.banner img[data-v-05bad635]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-05bad635]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-05bad635]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-05bad635]{padding-top:110px;padding-left:30px;font-size:42px;position:relative;z-index:10}.banner-desc h2[data-v-05bad635]{font-size:50px;margin:0;color:#fff}.banner-desc p[data-v-05bad635]{font-size:14px;opacity:.8;width:420px;line-height:1.6;padding-left:3px}.cards[data-v-05bad635]{margin:0 auto 110px;width:1140px}.cards .container[data-v-05bad635]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-05bad635]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-05bad635]{width:160px;height:120px}.card[data-v-05bad635]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-05bad635]{margin:66px auto 60px}.card h3[data-v-05bad635]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-05bad635]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.6}.card a[data-v-05bad635]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-05bad635]:hover{color:#fff;background:#20a0ff}.card[data-v-05bad635]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-05bad635],.cards[data-v-05bad635]{width:100%}.banner .container[data-v-05bad635]{width:100%;box-sizing:border-box}.banner img[data-v-05bad635]{right:0}}@media (max-width:1000px){.banner .container img[data-v-05bad635]{display:none}}@media (max-width:768px){.cards li[data-v-05bad635]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-05bad635]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-05bad635],.banner-stars[data-v-05bad635]{display:none}.banner-desc h2[data-v-05bad635]{font-size:32px}.banner-desc p[data-v-05bad635]{width:auto}}.cards .container[data-v-b2da9546]:after,.cards .container[data-v-b2da9546]:before{display:table;content:""}.cards .container[data-v-b2da9546]:after{clear:both}.actor[data-v-b2da9546]{min-height:65px}.actor[data-v-b2da9546]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-b2da9546]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-b2da9546]{position:relative}.banner img[data-v-b2da9546]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-b2da9546]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-b2da9546]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-b2da9546]{padding-top:110px;padding-left:30px;font-size:46px;position:relative;z-index:10}.banner-desc h2[data-v-b2da9546]{font-size:46px;margin:0;color:#fff}.banner-desc p[data-v-b2da9546]{font-size:14px;opacity:.8;width:420px;line-height:1.8;padding-left:3px}.cards[data-v-b2da9546]{margin:0 auto 110px;width:1140px}.cards .container[data-v-b2da9546]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-b2da9546]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-b2da9546]{width:160px;height:120px}.card[data-v-b2da9546]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-b2da9546]{margin:66px auto 60px}.card h3[data-v-b2da9546]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-b2da9546]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.8}.card a[data-v-b2da9546]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-b2da9546]:hover{color:#fff;background:#20a0ff}.card[data-v-b2da9546]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-b2da9546],.cards[data-v-b2da9546]{width:100%}.banner .container[data-v-b2da9546]{width:100%;box-sizing:border-box}.banner img[data-v-b2da9546]{right:0}}@media (max-width:1000px){.banner .container img[data-v-b2da9546]{display:none}}@media (max-width:768px){.cards li[data-v-b2da9546]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-b2da9546]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-b2da9546],.banner-stars[data-v-b2da9546]{display:none}.banner-desc h2[data-v-b2da9546]{font-size:32px}.banner-desc p[data-v-b2da9546]{width:auto}}.el-progress-bar__inner:after,.el-transfer-panel .el-transfer-panel__footer:after,.el-upload-cover:after,.el-upload-list--picture-card .el-upload-list__item-actions:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-slider__button-wrapper:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-slider:after,.el-slider:before{display:table;content:""}.el-slider:after{clear:both}.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-form-item__content:after{clear:both}.el-form-item:after,.el-form-item:before{display:table;content:""}.el-form-item:after{clear:both}.el-breadcrumb:after,.el-breadcrumb:before{display:table;content:""}.el-breadcrumb:after{clear:both}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-autocomplete-suggestion.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-pagination:after,.el-pagination:before{display:table;content:""}.el-pagination:after{clear:both}@font-face{font-family:element-icons;src:url(data:application/font-woff;base64,d09GRgABAAAAAB9EABAAAAAANAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcdCWJ3kdERUYAAAGIAAAAHQAAACAAWAAET1MvMgAAAagAAABNAAAAYFdvXOBjbWFwAAAB+AAAAFAAAAFS5mHtc2N2dCAAAAJIAAAAGAAAACQNZf70ZnBnbQAAAmAAAAT8AAAJljD3npVnYXNwAAAHXAAAAAgAAAAIAAAAEGdseWYAAAdkAAAUPAAAIUw4RPqwaGVhZAAAG6AAAAAvAAAANgxJKwtoaGVhAAAb0AAAAB4AAAAkCQwFDGhtdHgAABvwAAAAVgAAAKyk5AaSbG9jYQAAHEgAAABYAAAAWJwQpAxtYXhwAAAcoAAAACAAAAAgAU4CJG5hbWUAABzAAAABNQAAAit/uX3PcG9zdAAAHfgAAACyAAABsMLAXoJwcmVwAAAerAAAAJUAAACVpbm+ZnicY2BgYGQAgjO2i86D6MufP7fDaABY8wj8AAB4nGNgZGBg4ANiCQYQYGJgBEItIGYB8xgABhgAXQAAAHicY2Bh4WX8wsDKwMA0k+kMAwNDP4RmfM1gzMgJFGVgY2aAAUYBBgQISHNNYTjAUPFMnbnhfwNDDHMDQwNIDUiOWQKsRIGBEQCQ/wz4AAAAeJxjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETEC64pnKM/X//8Eshmdq////75ZikWKG6gIDRjYGOJcRpIeJARUwMtAMMNPOaJIAAAr1C6J4nGNgQANGDEbMEv8fMjf8b4DRAEVmCF94nJ1VaXfTRhSVvGRP2pLEUETbMROnNBqZsAUDLgQpsgvp4kBoJegiJzFd+AN87Gf9mqfQntOP/LTeO14SWnpO2xxL776ZO2/TexNxjKjseSCuUUdKXveksv5UKvGzpK7rXp4o6fWSumynnpIWUStNlczF/SO5RHUuVrJJsEnG616inqs874PSSzKsKEsi2iLayrwsTVNPHD9NtTi9ZJCmgZSMgp1Ko48QqlEvkaoOZUqHXr2eipsFUjYa8aijonoQKu4czzmljTpgpHKVw1yxWW3ke0nW8/qP0kSn2Nt+nGDDY/QjV4FUjMzA9jQeh08k09FeIjORf+y4TpSFUhtcAK9qsMegSvGhuPFBthPI1HjN8XVRqTQyFee6z7LZLB2PlRDlwd/YoZQbur+Ds9OmqFZjcfvAMwY5KZQoekgWgA5Tmaf2CNo8tEBmjfqj4hzwdQgvshBlKs+ULOhQBzJndveTYtrdSddkcaBfBjJvdveS3cfDRa+O9WW7vmAKZzF6khSLixHchzLrp0y71AhHGRdzwMU8XuLWtELIyAKMSiPMUVv4ntmoa5wdY290Ho/VU2TSRfzdTH49OKlY4TjLekfcSJy7x67rwlUgiwinGu8njizqUGWw+vvSkussOGGYZ8VCxZcXvncR+S8xbj+Qd0zhUr5rihLle6YoU54xRYVyGYWlXDHFFOWqKaYpa6aYoTxrilnKc0am/X/p+334Pocz5+Gb0oNvygvwTfkBfFN+CN+UH8E3pYJvyjp8U16Eb0pt4G0pUxGqmLF0+O0lWrWhajkzuMA+D2TNiPZFbwTSMEp11Ukpdb+lVf4k+euix2Prk5K6NWlsiLu6abP4+HTGb25dMuqGnatPjCPloT109dg0oVP7zeHfzl3dKi65q4hqw6g2IpgEgDbotwLxTfNsOxDzll18/EMwAtTPqTVUU3Xt1JUaD/K8q7sYnuTA44hjoI3rrq7ASxNTVkPz4WcpMhX7g7yplWrnsHX5ZFs1hzakwtsi9pVknKbtveRVSZWV96q0Xj6fhiF6ehbXhLZs3cmkEqFRM87x8K4qRdmRlnLUP0Lnl6K+B5xxdkHrwzHuRN1BtTXsdPj5ZiNrCyaGprS9E6BkLF0VY1HlWZxjdA1rHW/cEp6upycW8Sk2mY/CSnV9lI9uI80rdllm0ahKdXSX9lnsqzb9MjtoWB1nP2mqNu7qYVuNKlI9Vb4GtAd2Vt34UA8rPuqgUVU12+jayGM0LmvGfwzIYlz560arJtPv4JZqp81izV1Bc9+YLPdOL2+9yX4r56aRpv9Woy0jl/0cjvltEeDfOSh2U9ZAvTVpiHEB2QsYLtVE5w7N3cYg4jr7H53T/W/NwiA5q22N2Tz14erpKJI7THmcZZtZ1vUozVG0k8Q+RWKrw4nBTY3hWG7KBgbk7j+s38M94K4siw+8bSSAuM/axKie6uDuHlcjNOwruQ8YmWPHuQ2wA+ASxObYtSsdALvSJecOwGfkEDwgh+AhOQS75NwE+Jwcgi/IIfiSHIKvyLkF0COHYI8cgkfkEDwmpw2wTw7BE3IIviaH4BtyWgAJOQQpOQRPySF4ZmRzUuZvqch1oO8sugH0ve0aKFtQfjByZcLOqFh23yKyDywi9dDI1Qn1iIqlDiwi9blFpP5o5NqE+hMVS/3ZIlJ/sYjUF8aXmYGU13oveUcHfwIrvqx+AAEAAf//AA94nKVaC3Bc1Xk+/zn3uXe1e3fva6V9aXe1u5JWXq32aUlIun7IGGTZlsAPGTABHEUOIQkUcAgMESUEKMnQItl0SId2mEwyzWNipqV5kpB0ChNDQzLBtBPaztQJM23iaWdo+gi1rvufu7ItOWCcZnX3nHPP8z/nf33/WRFKsoRAlX6RMCKTPrdACGGUsH2EAtApQinsErAEWwiRJVHAbiwihku1SCZSrEVyWdD/7ZVX6BdX9mbpPI4VycDZf2bfZjFikwoZIbPkIByZOm7s3u9eTYF0hDpIaJ6wEITYQQKKAtfroCoBST0YgaAkSMGDRBO0w2FQiBRUpP0kIItU0ALCXBRCoY4Z0tERCG2OTx13cMapS8yoqIH533LKGE654/KmFOYva05350XTwTzOFwLl0P9vwrm5Obf3mmtGR6tDjnPNwWsOXrd/dHZ0dmpLqzE0Uh1xKk5lJjIUi/RarmGXQCpBNkSTkGnUC416mZbAyoiWaZshmpMKJShmZOxRzJbpGDhZybRr1Wa94EhyiKVgVKo2i2UoForQqI/TUajaSYDOeNc10Xwiyv4QArFi6iHvavoMWOlcKJQOdW/wrhpIZs3Ozm5DORKMRoMd0einFUnUBCqEQ/ktM7vdHsdWRVUUJe9zYrjL+na6j6Yh2Fns2tGnJ4SO7nj0pkfqzshI3lEBFhfBiHeHvjAR6Yrgc1+XbfSE9A4l1tWRixgmHPm5FjOCycLPUIRR9h4QCF0kSdLvFgNAiQMCpS4AoWSBARXoggiCcCN2TJKk4ZiOFC3l7WYLmmWQZBXKIEuW6UClZjs2/zrwL9H+EDwfpYVG1Lvdu9WoG2YUvgf8QwMAn1KkDljSN3RT3TsGCxHQ9Zite7fzZhE4SQSLZxdRZzhdWTed7HSsAJGAgMvbyDTvMoPUw2SfRfUSFDg9KZ+eFNKTyxah0igUC/xbBOnSC8LCpen16SFnF+nZy6aniasWQmAjO0KAx1JtIT3NVpN/W/RtpMe7zacHPuj98So98PhvQQ9+F5Fvn2jzzUE+BZBj1EVeUYHzjdAF3nM936AgySCloNni54Tk1PGccnhG/FukMVzX2+Kvi8Qc9df1Js6vSz9+abp9uhg5yr5OnyQacVyT0wnT/IRmeNtkPYKH0xaeQi6TlRx4KrErAR9ppadXxOl069kExOH9jR07Gv6Za2c/wzrYZhIk0l8EREDVK9RxqG1FTKkIUIhj5+aOHU3vs5CP745fmAc+8i7jm7jhgoTj7RbQt+Jx7ym+GMy/43jcy7E1e7mI0f5eoFl1wJZwL4XWRXuh9+H0n21OTTX9ucbP/rtYZgdIlIw8p+J4cKeO96DljKDHoAt8RuQawaXQ/IXX190495xlWroQLYko14U6rqniwraJvMzRnt6Ed29yeCYBLj2U3D2cWNmX6Isk4CFe9l6ghxLDu5NYh/qMMixwnQqTAhl1N6aAMi7AAlkggigsSCAycQH9GFvw3dg0d2OzBL3YNl3XC3rBjHU6umyUCJpHM0Wr47ReBgZSdpAW6hNIUhr8BCmjH3ztW4/t3v3Yt9qZ7D2mGIr8Q1muyab8R1DFtKoobPF8D5553/Mek2Xlh4rf+AQMKUoVh+H5XaA9TUqk4VZjukIErn94QCKIBOaRYgGl/xD6UkGcJqIozPBdTVrRLrMrKpkllPeqY5th1EdJRprRTmSLnO4iWg9sinaPg16G7hDoNg2c0FKapp04oUEAS5inAxdeG2CffvTR094vMIWvnNC0QJq3pbRA4OWXA2sGrKiPnj7fd90+wqTG91Hrz8QEgfJ9UBBQjedxDwSfQ3ju63THTJgJR8d9COh40LNUU9QMAWvWB6GQDeMmMJHMNO4KE7s6gdvEhDdfxIsRWW7g8S8fxaQhSUePShJ/P7rM32X56Hqe0EnZUmqKsrSkYGbJy0uY1GV5eVnGzFKWuI6f503eza7lDNcYLsEwg9xBneGcQDFWkWIZ7aKKBCOVaIwwQdVUuX6iP6HEu8caNU2w4GEsWeYoFuBhrLIs7x4s+DU/Xy149/i9rd/ojOPJqq0kHIGRPvKkq+mAIutG0WZNTB3XUAPz6O+AyQzkeY7mJCbPKSARIk1jJpFZEYhEtiHQsbFz6kJnbPWb9hJZZjOEsYCMunt5syEg0XrMTE/ejJjdqlPK1MYRLhRylVwFs6xkVaxKDjPTdmqNXLbQVi4bkQltnpx/fHlBWfrxsrKw/Pj8mwfMoPZp2ZA/EwgaB9jy/OGjyuHl5cPK0cPzy+zLtv56IPC6bvuyB6t8SpJRMugOjLYatd5U25cFOcdom2PU5xjzOTa4oSfXZwl6ybiki81fsvU9/C8lv5t/pu/pLtfoXQLRdcXdMNyoDVWKyUSMb77jXTZfHshl/c2/iz+fgAq68/w7NJ739RX2tiKG3tlpUgnAI+/a/B57p8HL2Dkl7z/7EHsY940+jGsnAURVQHjM8QFCGfONPJdeyibrZj3CnQwq43n/vNa/fb1rexcM1OPbVj61LV6DDeteb4nFIFHZurVCvxqLeW8Obd06xGMiUkIcdxLXd0gc7cMzqyrnowW4XgOVKLKq7AuATFBp9hJUkRnUIEICEo8tqti5h3eGhffo65ba3fwKSSXS/rUDGJOnMJPZLB/K1c9JJGKxRDqRTiVj8Vg8Gsk3MhE9aJUQ9ucsrnsIEmqZarMRqSNwaOQAQzf+pT/wPvxkNVEsJFghUSjGa0+u/B19wXsZ4ULojjuKiTP/kygWE0xJFO8482E6tvLXMHbWt0ESWcSzwD/SidHjANlItpLd5Ab3ADdPQIS5sBhiWKAy0DkiBwNUUWVlrkOjqiSp0zxXpRkdJFWazOe6ugjZOb39ys2brhhtNiqDfb25gfxAV7Yrm07iAp1NoxaJlLhRwVhFSkLO5DC9vaN6YRDERr1Z82MTf48Z3C0gsvCxVbbQYO9Spr+fiT3S2fcKHcrF6B/EcqlQ2Lu3J5HM4R4XG1Mri1NwT9jWdTv8dNgOh89n9Pv3x/OFrvsB7P6uQqErlhEF6nbjxz3zwlQDLT5pTMHPtUhE874Y1PUg7H3nMpfpPXiOX8Jz7ECJGnabaNAFxDEMkS+j81wMBAbCHFd6X7y5A6VkEoFwPGYbOg4L1qUweqE1HM4Zpi/ljUiNV+DJWPAN709mR+j4yOzsSKY/6YVSfb9O9uPDFr0nVn49PDs7TH8xPHvmuWR/XwqW+1MA/cl1tkZA5Bl1w7KE9IhkDNtujEO41GJ5KLZkB11eIXvttVCDN089f8/P7ipf/+Bfeq/sgTffeP6eN+4qP3g9158LeCFGekjdHSIgcdyGIsIQ3zDcp0iID3j4PkUyGdGzmUTcMvVYJIZwTV8PGIAHrDxeNXw/E+EvjYsQgvdGur801l9KZqtZfC4CBCdLYyV8vNNOJuN4/xvr7o6twQB+PEIEypAZGLUTKrRJJWwaXSQnkZFJy8rlDdEoRcwUtFFXrh1HpwBJzJbBd4LnoNNjuuPod790550vnX7pTifjwOJjvJo34ptfe+dLd2Mn7uYvnFeaDJIJst2d1CSVoVIxtHdzAUFhvp33C2jpfasxWa1ku6M6JSOtykR1or/YPZgd7HL0dDQdkEmYhoOhEicxCaaNEX1zDO0ju+h9fXv9ovZ6AeZ/Nbhly+CvKpvplqELRfhvzDZXzlW0S3DdlsH/rGzFmqGtNH+hYeUNrOc931pf78vcSdx3iZikQj7qhnosXURbkrMpqgWGGnE0pLYPJrmDC2wigsBtIdMYN7P92Gr6ng+x59zaNrdzTTVjwvRqo8CN6F+VWrFYN/IRMnyvKaE6zlocxkAkJaBmjdMJiISEHMrfILDFFdK3Lzr69AP3D9z/wNOj0X19Zxap3JkoOYxYpaQjSeHaZ+77dF/fIw/fWyyw0khPNFxdvHn3rps/UQsbPSPe2ytvMdWOhkKGIctUD234vf3bJ2+6OZv1MR4MIZGvop9Lu4l1vtyP1hBjiESjGguVjAyGTr6y15u72M2Zcjlz5mlM4dXy5jI+xPdbBAI4338RZD/6roybEpk/3TTPoe14EJUb/MNReZTrFAqxcFE+efMkPvDquizQrl3ztNdc5WGYDJFR0N3gaJVSeah3lYdB5FKVyCIV5YOESiKVDhFJECWMeQQmCuyQbwOUNn8Z46EbaMD5y7lfa4+k87/dUC4aQ5ccykeJMhHn1g50m5c7Bq339OpIBtv4VZ0NZHhjo14u9eQSXZahSiQMIRUZt94p51iZoo6FgSHcLAzSMsUXGkG3luHuCri/8j3X0tjevWP0pzz9FEhxw0yJ4vGAo0UFdgMNJOMJWd7en6ZLqX7vKvc6Fx9W2ju28iN/WGVsr/dJqgQ1UfT+1QgI4m1Mi0ZVdR+8kiqVUt4+SG4Yn9g/Pj6wGmus2p+4j7ZEQsVp1EPGUS6qkCjSGayik0YuZ+S6eVSa8S1fpm2IIxkuNrlMxDfO8DVvKV0qpeG20hUluI0XvSVe/AEmv9HUxrnFs99nz7MRlNskKbo9NsqqgqEl5RdV/EIPyxjd0xsJScSxk2wI4VJPW1RtMQQFjL/Gqe3YURljZR4hU+HYsdeOHYMDU9/42tar6/WlF1+8+n2JK182jGjDfIk3vXZs4Iqe1uTVL/7Ncr1+9fu8//jICaOBarHqC7+M53Et+RC5m9zuqh+69YN1gV87tO+N7VWfgGKHfoJyZV2VO343Ygj81CjsOd+LW6Su1bv2OWzltxTnBlKYROEJ3n3XHbd/+LadO2KOiEa7DBgeF3n8xAMR/w0lhkf//N4Sg1AULcDISpZ4wYdIaYxgsMaxsR+/zvTfEOsjXEr7t2atcZiAcT5Vq8kLrTaiGoK2vKFtYWdYIqJPZDJhUdQ69AGjW5L0YjA4+FBFCxZ1c8BAEewIimI4k5nQIwnUb1SDRCTs+kOCHeEBsz1Eq2zeUtG0Xt0Y4GLboYmCnsm4up4QuB3yhGs/9rE/P3JkD7yoJwVmbNw4EdaLWkenFmZUUjuCAwPBDlWSY0FDEAKFSHhi43CUCUndrNo5SX7HMdqGDZo/RjMFphV0fWLjRuPCGO+tuz5/Fz4oTjXEYX+Lsn4L2exO1IbQ4+/fi6ETjYQpEZnLAQplPhADkcJvAJVbbtq+7YrR3kKiy0E4lufwhPqX6vUWvyzNc37wUJLzDdEqHnut6vPDyfO4kl/O88oqr7JMzsx236KIXUzkgyXJpixyBrWQeey2eJ/j9DXHm30OP7olzQ51hEJ6eti0YzHbHE6Hw1hha3CYB1Axy9o4fqEpyVu8J+Hc50OBWBBHh9J/qvU1J5r+zGlVZPicVHVRoqzTtFsZf3LGJFFXX2OiKIiqiFVWZ6eFk2Y2WmZMkAU98BNRFUQlEBDROgqvqyE0maytz/TsI8IonvEV5BDZ4rqpLgpCfxG9Kp6zWxMpwkoBhAVuPBfQQYnkMMF1fJMqziIXxG2Hbtm9a3Sk2UjGo3jMou1kJbmJwstFuoUSXhhc1RIeufpqgIIvj0PR1wQsO2iReOeqgy++KrVHczVoVtvqkjqnSBK/jmLD4QDTgAp1NZE+HkICmWL8sne7fgM6blnGQOwGfXvvLw0FgbsQejaVUGsCBKmqn8gdyD5wojkcqovR6LOD9vhpp6ze0Hll5w1q2Tk9bg8+G42K9dBw84Q1PKKCwtToqd49XU8FFRYCgdqs0XMyIqPTjJzsaTAbwWcYbfdTXXt6T0VVpoB6xLJqR7r7x045zfBTfZsli2atkyMjJ60staTNfU+Fm86psf7uI0FuLs+dfZHEXOviu2x0MRSl1r92e89DKdLd1rB1ORsLBIOXQd8qRln1NTpJkA1k0t1M0NNSUfJxt8hxt6Tg0UvCgTUAXOb32pOpJJC+Yk8uuSE1EHOiEVUhOujoZEUffa9GCzSaDQFi9Oo4B7DZwpgfIiZRD7mVowRx+Myj3/nRdx6dwUz86TdvvfWbPPF+aiYSvYk/w9RcRPy+0O7A+7En2l0w8Y4mjTeNZNJ4LlFMkvWxjkNypOT28l9GBY4SsBqty9yFa+m2vbcsw/HvRNfdSJNVO9zwI9aIjwEujnB+5Uc27eeiW+iVcnYolxv6p85crhOMzmy2k8fuebR1b5yPK0bJFvIBssO9ioSIqoTUfeEOlLMAlUCR5jhC5PAQTxrjeE2Tp4ksazNEk7XJ+UM3Hbxu7trZXTuuunKTa9SNBv/UdKeE0Sj/4dEnmP9q6LzHu8Fj9hRwmI0xPDo3tM2ixftEzoWyuTbHRgGtJB+S5oyD+4NqCaUsUFKDXwmqA2rQT77iV/hN+1aeCQQordJAwBuBcrcov472aCaobprYsPLDDRObeL8fDwYa8b+PNwKDP1aD8EtvkU8Ji7zpXcqeST+28kg4FgzG6D/slCiVbsEVVx5pzexs0XtxZTX40VguF/tocK0sxEmNuFy2y0kq8zBfAmmByIJ8GIVcgGmqoK8Bhn0PoG7yO38QJoEMVXpyGOxHwx0BBUUoDnGVh3B+XJlsR5uj6DRsHpv5P99CcdwHP1yQuENpthweJqP+luk4TaFeffyJZG/yCS7T7UIyCbec2lKc2Dnxuc9/7v5NmyZ2vfranlPh/pT3hU3Hjz9YLj/op/D2Eh+zlOhLnC+s/OPP9vzk1Z3upk2fwLE4Q++WU+FUP0QwAPnkV48/ODj44PGvXri33IXnYGFMsMvd0d1JBRlcSeUZnsc8IjpRBvEQYjmRymL71oP/AwKZVfhvuNscm5JSf082mbCHnCE9HNQUmVjUCqCuZ87rBwrTuVseQHDUvuyJ+N63sfrTjo3CJYTPDMXz+UaezeTrhbz37YSxG992G4l4Xv+uMWx8V88vFrrAxU5xfu3Fc++FrgL9kjXn3cdvfuCTc1Y+Hou+blmvR2Px/P8BEpxdcHicY2BkYGAA4iUXFTLj+W2+MsizMIDA5c+f2xH0/wZWPeYGIJeDgQkkCgBf1AyCAHicY2BkYGBu+N/AEMOawAAErHoMjAyoQBsAVCkDJAAAeJxjLGNQYgACxlAGBuaXDDosQDYLAyMjEDOA2YwMzEA2NxgD2awJDHYQNWiYkYERiEHsVCDWBuIGIA7FqhYTq0P1GrPYMTCBMUJOFUz7MzAAAGi0Bh0AAAAAACgAKAAoAWQBsAH4AkACjAKyAtIC8gMYA1oDuAQcBIYE1gVaBdgGVAaUBxoHvggOCDQIiAjMCUgJyAnwCioLDAtMC5QMgg00DfIOQg6qDvgPsBA0EKYAAQAAACsAdwAGAAAAAAACACYANABsAAAAigF3AAAAAHicdY9Na8JAEIbfaNQWivTY45BL9bBhE6L4cZX4D3oXSTSQGkjWj0v/QQs99dxjf2ZfN0uhBxNm55mZd2dnADzgCx6un4cBHh134CNw3CW9Ovap+XbcQ+pNHfcx8D6o9Px7Zob21pU7uMOT4y5WeHbsU/PpuId3/DjuY+i9IUMJhQJbVDgAWamKbUX4y7RhagNjfY0drwlihND0C9r/Nm1uysycFlMVMUJaHUxa1btM4lDLQtxjpKmaq1hH1Nya54WVGg0r7QORe3xJM/xzbHCkr7Cn5jqqYIQTNSGHSDBmrNhbMLNU85zYDgpru4x20cV2TyyfeQasBzbK7dlwmKxuCg4ecY2lGJNvjqbaFwcjo5MO58lYVCkzUbVMtKi1xJruIlEi6izBOhCVi2puLvsLTjBRRQAAAHicbc3LNsJxGEbh3/47JHKIQomcwlomfV8Uw5Cb6ApMzLoCF46lPfSu9a49fEpV/vb9VbL8t/vfU6oyp2KFVdZYp8YGdTbZosE2O+yyR5N9DmjR5pAjjunQ5YQep5zR55wLLrnimgE33HJXW3x+zMbDoQ2bdmQf7KMd24l9ss92al/sq32zM/u+bOiHfuiHfuiHfuiHfuiHfuiHfuiHfuiHfuqnfuqnfuqnbk5+APaSXBUAAEu4AMhSWLEBAY5ZuQgACABjILABI0QgsAMjcLAORSAgS7gADlFLsAZTWliwNBuwKFlgZiCKVViwAiVhsAFFYyNisAIjRLMKCQUEK7MKCwUEK7MODwUEK1myBCgJRVJEswoNBgQrsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAAA) format("woff"),url(static/element-icons.b02bdc1.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-arrow-down:before{content:"\E600"}.el-icon-arrow-left:before{content:"\E601"}.el-icon-arrow-right:before{content:"\E602"}.el-icon-arrow-up:before{content:"\E603"}.el-icon-caret-bottom:before{content:"\E604"}.el-icon-caret-left:before{content:"\E605"}.el-icon-caret-right:before{content:"\E606"}.el-icon-caret-top:before{content:"\E607"}.el-icon-check:before{content:"\E608"}.el-icon-circle-check:before{content:"\E609"}.el-icon-circle-close:before{content:"\E60A"}.el-icon-circle-cross:before{content:"\E60B"}.el-icon-close:before{content:"\E60C"}.el-icon-upload:before{content:"\E60D"}.el-icon-d-arrow-left:before{content:"\E60E"}.el-icon-d-arrow-right:before{content:"\E60F"}.el-icon-d-caret:before{content:"\E610"}.el-icon-date:before{content:"\E611"}.el-icon-delete:before{content:"\E612"}.el-icon-document:before{content:"\E613"}.el-icon-edit:before{content:"\E614"}.el-icon-information:before{content:"\E615"}.el-icon-loading:before{content:"\E616"}.el-icon-menu:before{content:"\E617"}.el-icon-message:before{content:"\E618"}.el-icon-minus:before{content:"\E619"}.el-icon-more:before{content:"\E61A"}.el-icon-picture:before{content:"\E61B"}.el-icon-plus:before{content:"\E61C"}.el-icon-search:before{content:"\E61D"}.el-icon-setting:before{content:"\E61E"}.el-icon-share:before{content:"\E61F"}.el-icon-star-off:before{content:"\E620"}.el-icon-star-on:before{content:"\E621"}.el-icon-time:before{content:"\E622"}.el-icon-warning:before{content:"\E623"}.el-icon-delete2:before{content:"\E624"}.el-icon-upload2:before{content:"\E627"}.el-icon-view:before{content:"\E626"}.el-icon-loading{animation:rotating 1s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-pagination{white-space:nowrap;padding:2px 5px;color:#48576a}.el-pagination button,.el-pagination span{display:inline-block;font-size:13px;min-width:28px;height:28px;line-height:28px;vertical-align:top;box-sizing:border-box}.el-pagination .el-select .el-input{width:110px}.el-pagination .el-select .el-input input{padding-right:25px;border-radius:2px;height:28px}.el-pagination button{border:none;padding:0 6px;background:transparent}.el-pagination button:focus{outline:none}.el-pagination button:hover{color:#20a0ff}.el-pagination button.disabled{color:#e4e4e4;background-color:#fff;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:50% no-repeat;background-size:16px;background-color:#fff;border:1px solid #d1dbe5;cursor:pointer;margin:0;color:#97a8be}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px}.el-pagination .btn-prev{border-radius:2px 0 0 2px;border-right:0}.el-pagination .btn-next{border-radius:0 2px 2px 0;border-left:0}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.el-pagination--small .arrow.disabled{visibility:hidden}.el-pagination--small .el-pager li{border-radius:2px}.el-pagination__sizes{margin:0 10px 0 0}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;border-color:#d1dbe5}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#20a0ff}.el-pagination__jump{margin-left:10px}.el-pagination__total{margin:0 10px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{border:1px solid #d1dbe5;border-radius:2px;line-height:18px;padding:4px 2px;width:30px;text-align:center;margin:0 6px;box-sizing:border-box;transition:border .3s}.el-pagination__editor::-webkit-inner-spin-button,.el-pagination__editor::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination__editor:focus{outline:none;border-color:#20a0ff}.el-pager{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0;padding:0}.el-pager,.el-pager li{display:inline-block;vertical-align:top;margin:0}.el-pager li{padding:0 4px;border:1px solid #d1dbe5;border-right:0;background:#fff;font-size:13px;min-width:28px;height:28px;line-height:28px;cursor:pointer;box-sizing:border-box;text-align:center}.el-pager li:last-child{border-right:1px solid #d1dbe5}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#97a8be}.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pager li.active+li{border-left:0;padding-left:5px}.el-pager li:hover{color:#20a0ff}.el-pager li.active{border-color:#20a0ff;background-color:#20a0ff;color:#fff;cursor:default}.el-dialog{position:absolute;left:50%;transform:translateX(-50%);background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;margin-bottom:50px}.el-dialog--tiny{width:30%}.el-dialog--small{width:50%}.el-dialog--large{width:90%}.el-dialog--full{width:100%;top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{top:0;right:0;bottom:0;left:0;position:fixed;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 0}.el-dialog__close{cursor:pointer;color:#bfcbd9}.el-dialog__close:hover{color:#20a0ff}.el-dialog__title{line-height:1;font-size:16px;font-weight:700;color:#1f2d3d}.el-dialog__body{padding:30px 20px;color:#48576a;font-size:14px}.el-dialog__headerbtn{float:right}.el-dialog__footer{padding:10px 20px 15px;text-align:right;box-sizing:border-box}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-autocomplete{position:relative;display:inline-block}.el-autocomplete-suggestion{margin:5px 0;box-shadow:0 0 6px 0 rgba(0,0,0,.04),0 2px 4px 0 rgba(0,0,0,.12)}.el-autocomplete-suggestion li{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer;color:#48576a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li:hover{background-color:#e4e8f1}.el-autocomplete-suggestion li.highlighted{background-color:#20a0ff;color:#fff}.el-autocomplete-suggestion li:active{background-color:#0082e6}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #d1dbe5}.el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.el-autocomplete-suggestion.is-loading li:hover{background-color:#fff}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-autocomplete-suggestion__wrap{max-height:280px;overflow:auto;background-color:#fff;border:1px solid #d1dbe5;padding:6px 0;border-radius:2px;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-dropdown{display:inline-block;position:relative;color:#48576a;font-size:14px}.el-dropdown .el-button-group{display:block}.el-dropdown .el-dropdown__caret-button{padding-right:5px;padding-left:5px}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown-menu{margin:5px 0;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);padding:6px 0;z-index:10;position:absolute;top:0;left:0;min-width:100px}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer}.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#e4e8f1;color:#48576a}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bfcbd9;pointer-events:none}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #d1dbe5}.el-dropdown-menu__item--divided:before{content:"";height:6px;display:block;margin:0 -10px;background-color:#fff}.el-menu-item,.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#48576a;padding:0 20px;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu{border-radius:2px;position:relative;margin:0;padding-left:0;background-color:#eef1f6}.el-menu,.el-menu li{list-style:none}.el-menu--dark{background-color:#324157}.el-menu--dark .el-menu-item,.el-menu--dark .el-submenu__title{color:#bfcbd9}.el-menu--dark .el-menu-item:hover,.el-menu--dark .el-submenu__title:hover{background-color:#48576a}.el-menu--dark .el-submenu .el-menu{background-color:#1f2d3d}.el-menu--dark .el-submenu .el-menu .el-menu-item:hover{background-color:#48576a}.el-menu--horizontal .el-menu-item{float:left;height:60px;line-height:60px;margin:0;cursor:pointer;position:relative;box-sizing:border-box;border-bottom:5px solid transparent}.el-menu--horizontal .el-menu-item a,.el-menu--horizontal .el-menu-item a:hover{color:inherit}.el-menu--horizontal .el-menu-item:hover{background-color:#d1dbe5}.el-menu--horizontal .el-submenu{float:left;position:relative}.el-menu--horizontal .el-submenu>.el-menu{position:absolute;top:65px;left:0;border:1px solid #d1dbe5;padding:5px 0;background-color:#fff;z-index:100;min-width:100%;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-menu--horizontal .el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:5px solid transparent}.el-menu--horizontal .el-submenu .el-menu-item{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px}.el-menu--horizontal .el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:5px;color:#97a8be;margin-top:-3px}.el-menu--horizontal .el-menu-item:hover,.el-menu--horizontal .el-submenu__title:hover{background-color:#eef1f6}.el-menu--horizontal>.el-menu-item:hover,.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{border-bottom:5px solid #20a0ff}.el-menu--horizontal.el-menu--dark .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu__title:hover{background-color:#324157}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title{color:#48576a}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover{background-color:#d1dbe5}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active{color:#20a0ff}.el-menu-item [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-menu-item:first-child{margin-left:0}.el-menu-item:last-child{margin-right:0}.el-menu-item:hover{background-color:#d1dbe5}.el-menu-item.is-active{color:#20a0ff}.el-submenu [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-submenu .el-menu{background-color:#e4e8f1}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px}.el-submenu .el-menu-item:hover{background-color:#d1dbe5}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-active .el-submenu__title{border-bottom-color:#20a0ff}.el-submenu__title{position:relative}.el-submenu__title:hover{background-color:#d1dbe5}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding-top:15px;line-height:normal;font-size:14px;padding-left:20px;color:#97a8be}.el-radio{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio+.el-radio{margin-left:15px}.el-radio__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-radio__input.is-focus .el-radio__inner{border-color:#20a0ff}.el-radio__input.is-checked .el-radio__inner{border-color:#20a0ff;background:#20a0ff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-disabled .el-radio__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#eef1f6}.el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#fff}.el-radio__input.is-disabled+.el-radio__label{color:#bbb;cursor:not-allowed}.el-radio__inner{border:1px solid #bfcbd9;border-radius:100%;width:18px;height:18px;border-radius:50%;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#20a0ff}.el-radio__inner:after{width:6px;height:6px;border-radius:50%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(.71,-.46,.88,.6)}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio__label{font-size:14px;padding-left:5px}.el-radio-group{display:inline-block;font-size:0;line-height:1;vertical-align:middle}.el-radio-group .el-radio{font-size:14px}.el-radio-button{position:relative;display:inline-block}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-radio-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:10px 15px;font-size:14px;border-radius:0}.el-radio-button__inner:hover{color:#20a0ff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1;left:-999px}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-radio-button--large .el-radio-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-radio-button--small .el-radio-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner{padding:4px;font-size:12px;border-radius:0}.el-switch{display:inline-block;position:relative;font-size:14px;line-height:22px;height:22px;vertical-align:middle}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-switch.is-disabled .el-switch__core{border-color:#e4e8f1!important;background:#e4e8f1!important}.el-switch.is-disabled .el-switch__core span{background-color:#fbfdff!important}.el-switch.is-disabled .el-switch__core~.el-switch__label *{color:#fbfdff!important}.el-switch.is-disabled .el-switch__input:checked+.el-switch__core{border-color:#e4e8f1;background-color:#e4e8f1}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;width:46px;height:22px;left:0;top:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-switch__label,.el-switch__label *{position:absolute;display:inline-block;font-size:14px}.el-switch__label *{line-height:1;top:4px;color:#fff}.el-switch__label--left i{left:6px}.el-switch__label--right i{right:6px}.el-switch__input{display:none}.el-switch__input:checked+.el-switch__core{border-color:#20a0ff;background-color:#20a0ff}.el-switch__core{margin:0;display:inline-block;position:relative;width:46px;height:22px;border:1px solid #bfcbd9;outline:none;border-radius:12px;box-sizing:border-box;background:#bfcbd9;cursor:pointer;transition:border-color .3s,background-color .3s}.el-switch__core .el-switch__button{top:0;left:0;position:absolute;border-radius:100%;transition:transform .3s;width:16px;height:16px;background-color:#fff}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-select-dropdown{position:absolute;z-index:1001;border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);box-sizing:border-box;margin:5px 0}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#20a0ff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#e4e8f1}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:10px;font-family:element-icons;content:"\E608";font-size:11px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.el-select-dropdown__wrap{max-height:274px}.el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;box-sizing:border-box}.el-select-dropdown__item{font-size:14px;padding:8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.hover,.el-select-dropdown__item:hover{background-color:#e4e8f1}.el-select-dropdown__item.selected{color:#fff;background-color:#20a0ff}.el-select-dropdown__item.selected.hover{background-color:#1c8de0}.el-select-dropdown__item span{line-height:1.5!important}.el-select-dropdown__item.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-group{margin:0;padding:0}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select-group__wrap{list-style:none;margin:0;padding:0}.el-select-group__title{padding-left:10px;font-size:12px;color:#999;height:30px;line-height:30px}.el-select{display:inline-block;position:relative}.el-select:hover .el-input__inner{border-color:#8391a5}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#20a0ff}.el-select .el-input .el-input__icon{color:#bfcbd9;font-size:12px;transition:transform .3s;transform:translateY(-50%) rotate(180deg);line-height:16px;top:50%;cursor:pointer}.el-select .el-input .el-input__icon.is-show-close{transition:0s;width:16px;height:16px;font-size:14px;right:8px;text-align:center;transform:translateY(-50%) rotate(180deg);border-radius:100%;color:#bfcbd9}.el-select .el-input .el-input__icon.is-show-close:hover{color:#97a8be}.el-select .el-input .el-input__icon.is-reverse{transform:translateY(-50%)}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#d1dbe5}.el-select>.el-input{display:block}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{height:24px;line-height:24px;box-sizing:border-box;margin:3px 0 3px 6px}.el-select__input{border:none;outline:none;padding:0;margin-left:10px;color:#666;font-size:14px;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background-color:transparent}.el-select__input.is-mini{height:14px}.el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#bfcbd9;line-height:18px;font-size:12px}.el-select__close:hover{color:#97a8be}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%)}.el-select__tag{display:inline-block;height:24px;line-height:24px;font-size:14px;border-radius:4px;color:#fff;background-color:#20a0ff}.el-select__tag .el-icon-close{font-size:12px}.el-table{position:relative;overflow:hidden;box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;border:1px solid #dfe6ec;font-size:14px;color:#1f2d3d}.el-table .el-tooltip.cell{white-space:nowrap}.el-table td,.el-table th{height:40px;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.is-left,.el-table th.is-left{text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #dfe6ec}.el-table td.gutter,.el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.el-table td.is-hidden>*,.el-table th.is-hidden>*{visibility:hidden}.el-table:before{left:0;bottom:0;width:100%;height:1px}.el-table:after,.el-table:before{content:"";position:absolute;background-color:#dfe6ec;z-index:1}.el-table:after{top:0;right:0;width:1px;height:100%}.el-table th{background-color:#eef1f6;text-align:left}.el-table th,.el-table th>div{white-space:nowrap;overflow:hidden}.el-table th>div{display:inline-block;padding-left:18px;padding-right:18px;line-height:40px;text-overflow:ellipsis}.el-table td>div,.el-table th>div{box-sizing:border-box}.el-table th.required>div:before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.el-table th>.cell{position:relative;word-wrap:normal;text-overflow:ellipsis;display:inline-block;line-height:30px;vertical-align:middle;width:100%;box-sizing:border-box}.el-table th>.cell.highlight{color:#20a0ff}.el-table .caret-wrapper{position:relative;cursor:pointer;display:inline-block;vertical-align:middle;margin-left:5px;margin-top:-2px;width:16px;height:30px;overflow:visible;overflow:initial}.el-table .sort-caret{display:inline-block;width:0;height:0;border:0;content:"";position:absolute;left:3px;z-index:2}.el-table .sort-caret.ascending{top:9px;border-top:none;border-bottom:5px solid #97a8be}.el-table .sort-caret.ascending,.el-table .sort-caret.descending{border-right:5px solid transparent;border-left:5px solid transparent}.el-table .sort-caret.descending{bottom:9px;border-top:5px solid #97a8be;border-bottom:none}.el-table .ascending .sort-caret.ascending{border-bottom-color:#48576a}.el-table .descending .sort-caret.descending{border-top-color:#48576a}.el-table td.gutter{width:0}.el-table .cell{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:24px;padding-left:18px;padding-right:18px}.el-table tr input[type=checkbox]{margin:0}.el-table tr{background-color:#fff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-table__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.el-table__expand-column .cell{padding:0;text-align:center}.el-table__expand-icon{position:relative;cursor:pointer;color:#666;font-size:12px;transition:transform .2s ease-in-out;height:40px}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expanded-cell{padding:20px 50px;background-color:#fbfdff;box-shadow:inset 0 2px 0 #f4f4f4}.el-table__expanded-cell:hover{background-color:#fbfdff!important}.el-table--fit{border-right:0;border-bottom:0}.el-table--fit td.gutter,.el-table--fit th.gutter{border-right-width:1px}.el-table--border td,.el-table--border th{border-right:1px solid #dfe6ec}.el-table--border th{border-bottom:1px solid #dfe6ec}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;box-shadow:1px 0 8px #d3d4d6;overflow-x:hidden}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#dfe6ec;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#eef1f6;border-bottom:1px solid #dfe6ec}.el-table__fixed-right{top:0;left:auto;right:0;box-shadow:-1px 0 8px #d3d4d6}.el-table__fixed-right .el-table__fixed-body-wrapper,.el-table__fixed-right .el-table__fixed-footer-wrapper,.el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.el-table__fixed-header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__fixed-footer-wrapper{position:absolute;left:0;bottom:0;z-index:3}.el-table__fixed-footer-wrapper tbody td{border-top:1px solid #dfe6ec;background-color:#fbfdff;color:#1f2d3d}.el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.el-table__body-wrapper,.el-table__footer-wrapper,.el-table__header-wrapper{width:100%}.el-table__footer-wrapper{margin-top:-1px}.el-table__footer-wrapper td{border-top:1px solid #dfe6ec}.el-table__body,.el-table__footer,.el-table__header{table-layout:fixed}.el-table__footer-wrapper,.el-table__header-wrapper{overflow:hidden}.el-table__footer-wrapper thead div,.el-table__header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__footer-wrapper tbody td,.el-table__header-wrapper tbody td{background-color:#fbfdff;color:#1f2d3d}.el-table__body-wrapper{overflow:auto;position:relative}.el-table--striped .el-table__body tr:nth-child(2n) td{background:#fafafa;background-clip:padding-box}.el-table--striped .el-table__body tr:nth-child(2n).current-row td{background:#edf7ff}.el-table__body tr.hover-row>td{background-color:#eef1f6}.el-table__body tr.current-row>td{background:#edf7ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #dfe6ec;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;margin-left:5px;cursor:pointer}.el-table__column-filter-trigger i{color:#97a8be}.el-table--enable-row-transition .el-table__body td{transition:background-color .25s ease}.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#eef1f6;background-clip:padding-box}.el-table--fluid-height .el-table__fixed,.el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.el-table-column--selection .cell{padding-left:14px;padding-right:14px}.el-table-filter{border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);box-sizing:border-box;margin:2px 0}.el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.el-table-filter__list-item:hover{background-color:#e4e8f1;color:#48576a}.el-table-filter__list-item.is-active{background-color:#20a0ff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #d1dbe5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#8391a5;cursor:pointer;font-size:14px;padding:0 3px}.el-table-filter__bottom button:hover{color:#20a0ff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group .el-checkbox{display:block;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-date-table td{width:32px;height:32px;box-sizing:border-box;text-align:center;cursor:pointer}.el-date-table td.next-month,.el-date-table td.prev-month{color:#ddd}.el-date-table td.today{color:#20a0ff;position:relative}.el-date-table td.today:before{content:" ";position:absolute;top:0;right:0;width:0;height:0;border-top:.5em solid #20a0ff;border-left:.5em solid transparent}.el-date-table td.available:hover{background-color:#e4e8f1}.el-date-table td.in-range{background-color:#d2ecff}.el-date-table td.in-range:hover{background-color:#afddff}.el-date-table td.current:not(.disabled),.el-date-table td.end-date,.el-date-table td.start-date{background-color:#20a0ff!important;color:#fff}.el-date-table td.disabled{background-color:#f4f4f4;opacity:1;cursor:not-allowed;color:#ccc}.el-date-table td.week{font-size:80%;color:#8391a5}.el-date-table th{padding:5px;color:#8391a5;font-weight:400}.el-date-table.is-week-mode .el-date-table__row:hover{background-color:#e4e8f1}.el-date-table.is-week-mode .el-date-table__row.current{background-color:#d2ecff}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-month-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-month-table td .cell:hover{background-color:#e4e8f1}.el-month-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-month-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#97a8be}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-year-table td .cell:hover{background-color:#e4e8f1}.el-year-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-year-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-date-range-picker{min-width:520px}.el-date-range-picker table{table-layout:fixed;width:100%}.el-date-range-picker .el-picker-panel__body{min-width:513px}.el-date-range-picker .el-picker-panel__content{margin:0}.el-date-range-picker.has-sidebar.has-time{min-width:766px}.el-date-range-picker.has-sidebar{min-width:620px}.el-date-range-picker.has-time{min-width:660px}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header button{float:left}.el-date-range-picker__header div{font-size:14px;margin-right:50px}.el-date-range-picker__content{float:left;width:50%;box-sizing:border-box;margin:0;padding:16px}.el-date-range-picker__content.is-right .el-date-range-picker__header button{float:right}.el-date-range-picker__content.is-right .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.el-date-range-picker__editors-wrap{box-sizing:border-box;display:table-cell}.el-date-range-picker__editors-wrap.is-right{text-align:right}.el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#97a8be}.el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.el-time-range-picker{min-width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.el-picker-panel,.el-time-range-picker__body{border-radius:2px;border:1px solid #d1dbe5}.el-picker-panel{color:#48576a;box-shadow:0 2px 6px #ccc;background:#fff;line-height:20px;margin:5px 0}.el-picker-panel__body-wrapper:after,.el-picker-panel__body:after{content:"";display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#48576a;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{background-color:#e4e8f1}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#20a0ff}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{font-size:12px;color:#97a8be;border:0;background:transparent;cursor:pointer;outline:none;margin-top:3px}.el-picker-panel__icon-btn:hover{color:#20a0ff}.el-picker-panel__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;box-sizing:border-box;padding-top:6px;background-color:#fbfdff}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-date-picker{min-width:254px}.el-date-picker .el-picker-panel__content{min-width:224px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker.has-sidebar.has-time{min-width:434px}.el-date-picker.has-sidebar{min-width:370px}.el-date-picker.has-time{min-width:324px}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-picker__header{margin:12px;text-align:center}.el-date-picker__header-label{font-size:14px;padding:0 5px;line-height:22px;text-align:center;cursor:pointer}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#20a0ff}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.time-select{margin:5px 0;min-width:0}.time-select .el-picker-panel__content{max-height:200px;margin:0}.time-select-item{padding:8px 10px;font-size:14px}.time-select-item.selected:not(.disabled){background-color:#20a0ff;color:#fff}.time-select-item.selected:not(.disabled):hover{background-color:#20a0ff}.time-select-item.disabled{color:#d1dbe5;cursor:not-allowed}.time-select-item:hover{background-color:#e4e8f1;cursor:pointer}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-linear-enter-active,.el-fade-in-linear-leave-active{transition:opacity .2s linear}.el-fade-in-linear-enter,.el-fade-in-linear-leave,.el-fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.el-date-editor{position:relative;display:inline-block}.el-date-editor .el-picker-panel{position:absolute;min-width:180px;box-sizing:border-box;box-shadow:0 2px 6px #ccc;background:#fff;z-index:10;top:41px}.el-date-editor.el-input{width:193px}.el-date-editor--daterange.el-input{width:220px}.el-date-editor--datetimerange.el-input{width:350px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33%}.el-time-spinner.has-seconds .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){margin-left:1%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__list{padding:0;margin:0;list-style:none;text-align:center}.el-time-spinner__list:after,.el-time-spinner__list:before{content:"";display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#e4e8f1;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#fff}.el-time-spinner__item.disabled{color:#d1dbe5;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #d1dbe5;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:":";top:50%;color:#fff;position:absolute;font-size:14px;margin-top:-15px;line-height:16px;background-color:#20a0ff;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left}.el-time-panel__content:after{left:50%;margin-left:-2px}.el-time-panel__content:before{padding-left:50%;margin-right:-2px}.el-time-panel__content.has-seconds:after{left:66.66667%}.el-time-panel__content.has-seconds:before{padding-left:33.33333%}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:none;font-size:12px;color:#8391a5}.el-time-panel__btn.confirm{font-weight:800;color:#20a0ff}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:2px;border:1px solid #d1dbe5;padding:10px;z-index:2000;font-size:12px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-popover .popper__arrow,.el-popover .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popover .popper__arrow{border-width:6px}.el-popover .popper__arrow:after{content:" ";border-width:6px}.el-popover[x-placement^=top]{margin-bottom:12px}.el-popover[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#d1dbe5;border-bottom-width:0}.el-popover[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popover[x-placement^=bottom]{margin-top:12px}.el-popover[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#d1dbe5}.el-popover[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popover[x-placement^=right]{margin-left:12px}.el-popover[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#d1dbe5;border-left-width:0}.el-popover[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popover[x-placement^=left]{margin-right:12px}.el-popover[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#d1dbe5}.el-popover[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-popover__title{color:#1f2d3d;font-size:13px;line-height:1;margin-bottom:9px}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-message-box{text-align:left;display:inline-block;vertical-align:middle;background-color:#fff;width:420px;border-radius:3px;font-size:16px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:20px 20px 0}.el-message-box__content{padding:30px 20px;color:#48576a;font-size:14px;position:relative}.el-message-box__close{display:inline-block;position:absolute;top:19px;right:20px;color:#999;cursor:pointer;line-height:20px;text-align:center}.el-message-box__close:hover{color:#20a0ff}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#ff4949}.el-message-box__errormsg{color:#ff4949;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:16px;font-weight:700;height:18px;color:#333}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:1.4}.el-message-box__btns{padding:10px 20px 15px;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:36px!important}.el-message-box__status.el-icon-circle-check{color:#13ce66}.el-message-box__status.el-icon-information{color:#50bfff}.el-message-box__status.el-icon-warning{color:#f7ba2a}.el-message-box__status.el-icon-circle-cross{color:#ff4949}.msgbox-fade-enter-active{animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{animation:msgbox-fade-out .3s}@keyframes msgbox-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-breadcrumb{font-size:13px;line-height:1}.el-breadcrumb__separator{margin:0 8px;color:#bfcbd9}.el-breadcrumb__item{float:left}.el-breadcrumb__item:last-child .el-breadcrumb__item__inner,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{color:#97a8be;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-breadcrumb__item__inner,.el-breadcrumb__item__inner a{transition:color .15s linear;color:#48576a}.el-breadcrumb__item__inner:hover,.el-breadcrumb__item__inner a:hover{color:#20a0ff;cursor:pointer}.el-form--label-left .el-form-item__label{text-align:left}.el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}.el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.el-form--inline .el-form-item__label{float:none;display:inline-block}.el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item{margin-bottom:22px}.el-form-item .el-form-item{margin-bottom:0}.el-form-item .el-form-item .el-form-item__content{margin-left:0!important}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner,.el-form-item.is-error .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-textarea__inner{border-color:#ff4949}.el-form-item.is-required .el-form-item__label:before{content:"*";color:#ff4949;margin-right:4px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#48576a;line-height:1;padding:11px 12px 11px 0;box-sizing:border-box}.el-form-item__content{line-height:36px;position:relative;font-size:14px}.el-form-item__error{color:#ff4949;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-tabs__header{border-bottom:1px solid #d1dbe5;padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:3px;background-color:#20a0ff;z-index:1;transition:transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;transition:all .15s}.el-tabs__new-tab .el-icon-plus{transform:scale(.8)}.el-tabs__new-tab:hover{color:#20a0ff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap.is-scrollable{padding:0 15px}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav-next,.el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#8391a5}.el-tabs__nav-next{right:0}.el-tabs__nav-prev{left:0}.el-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left}.el-tabs__item{padding:0 16px;height:42px;box-sizing:border-box;line-height:42px;display:inline-block;list-style:none;font-size:14px;color:#8391a5;position:relative}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.el-tabs__item .el-icon-close:before{transform:scale(.7);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#97a8be;color:#fff}.el-tabs__item:hover{color:#1f2d3d;cursor:pointer}.el-tabs__item.is-disabled{color:#bbb;cursor:default}.el-tabs__item.is-active{color:#20a0ff}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;transform-origin:100% 50%}.el-tabs--card>.el-tabs__header .el-tabs__item{border:1px solid transparent;transition:all .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-right:9px;padding-left:9px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border:1px solid #d1dbe5;border-bottom-color:#fff;border-radius:4px 4px 0 0}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-right:16px;padding-left:16px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{width:14px}.el-tabs--border-card{background:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card>.el-tabs__content{padding:15px}.el-tabs--border-card>.el-tabs__header{background-color:#eef1f6;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;border-top:0;margin-right:-1px;margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{background-color:#fff;border-right-color:#d1dbe5;border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:first-child{border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:last-child{border-right-color:#d1dbe5}.slideInLeft-transition,.slideInRight-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave .3s}.slideInLeft-enter{animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave .3s}@keyframes slideInRight-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(-100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(-100%);opacity:0}}.el-tag{background-color:#8391a5;display:inline-block;padding:0 5px;height:24px;line-height:22px;font-size:12px;color:#fff;border-radius:4px;box-sizing:border-box;border:1px solid transparent;white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;transform:scale(.75);height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-2px}.el-tag .el-icon-close:hover{background-color:#fff;color:#8391a5}.el-tag--gray{background-color:#e4e8f1;border-color:#e4e8f1;color:#48576a}.el-tag--gray .el-tag__close:hover{background-color:#48576a;color:#fff}.el-tag--gray.is-hit{border-color:#48576a}.el-tag--primary{background-color:rgba(32,160,255,.1);border-color:rgba(32,160,255,.2);color:#20a0ff}.el-tag--primary .el-tag__close:hover{background-color:#20a0ff;color:#fff}.el-tag--primary.is-hit{border-color:#20a0ff}.el-tag--success{background-color:rgba(18,206,102,.1);border-color:rgba(18,206,102,.2);color:#13ce66}.el-tag--success .el-tag__close:hover{background-color:#13ce66;color:#fff}.el-tag--success.is-hit{border-color:#13ce66}.el-tag--warning{background-color:rgba(247,186,41,.1);border-color:rgba(247,186,41,.2);color:#f7ba2a}.el-tag--warning .el-tag__close:hover{background-color:#f7ba2a;color:#fff}.el-tag--warning.is-hit{border-color:#f7ba2a}.el-tag--danger{background-color:rgba(255,73,73,.1);border-color:rgba(255,73,73,.2);color:#ff4949}.el-tag--danger .el-tag__close:hover{background-color:#ff4949;color:#fff}.el-tag--danger.is-hit{border-color:#ff4949}.el-tree{cursor:default;background:#fff;border:1px solid #d1dbe5}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.el-tree-node{white-space:nowrap}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree-node__content{line-height:36px;height:36px;cursor:pointer}.el-tree-node__content>.el-checkbox,.el-tree-node__content>.el-tree-node__expand-icon{margin-right:8px}.el-tree-node__content>.el-checkbox{vertical-align:middle}.el-tree-node__content:hover{background:#e4e8f1}.el-tree-node__expand-icon{display:inline-block;cursor:pointer;width:0;height:0;vertical-align:middle;margin-left:10px;border:6px solid transparent;border-right-width:0;border-left-color:#97a8be;border-left-width:7px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon:hover{border-left-color:#999}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{border-color:transparent;cursor:default}.el-tree-node__label,.el-tree-node__loading-icon{font-size:14px;vertical-align:middle;display:inline-block}.el-tree-node__loading-icon{margin-right:4px;color:#97a8be}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#edf7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;color:#fff;opacity:1;display:table;transition:opacity .2s}.el-alert .el-alert__description{color:#fff;font-size:12px;margin:5px 0 0}.el-alert--success{background-color:#13ce66}.el-alert--info{background-color:#50bfff}.el-alert--warning{background-color:#f7ba2a}.el-alert--error{background-color:#ff4949}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px;display:table-cell;color:#fff;vertical-align:middle}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert__closebtn{font-size:12px;color:#fff;opacity:1;top:12px;right:15px;position:absolute;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}.el-notification{width:330px;padding:20px;box-sizing:border-box;border-radius:2px;position:fixed;right:16px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);transition:opacity .3s,transform .3s,right .3s,top .4s;overflow:hidden}.el-notification .el-icon-circle-check{color:#13ce66}.el-notification .el-icon-circle-cross{color:#ff4949}.el-notification .el-icon-information{color:#50bfff}.el-notification .el-icon-warning{color:#f7ba2a}.el-notification__group{margin-left:0}.el-notification__group.is-with-icon{margin-left:55px}.el-notification__title{font-weight:400;font-size:16px;color:#1f2d3d;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:10px 0 0;color:#8391a5;text-align:justify}.el-notification__icon{width:40px;height:40px;font-size:40px;float:left;position:relative;top:3px}.el-notification__closeBtn{top:20px;right:20px;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-notification__closeBtn:hover{color:#97a8be}.el-notification-fade-enter{transform:translateX(100%);right:0}.el-notification-fade-leave-active{opacity:0}.el-input-number{display:inline-block;overflow:hidden;width:180px;position:relative}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:82px}.el-input-number.is-without-controls .el-input__inner{padding-right:10px}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#d1dbe5;color:#d1dbe5}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#d1dbe5;cursor:not-allowed}.el-input-number__decrease,.el-input-number__increase{height:auto;border-left:1px solid #bfcbd9;width:36px;line-height:34px;top:1px;text-align:center;color:#97a8be;cursor:pointer;position:absolute;z-index:1}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#20a0ff}.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#20a0ff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#d1dbe5;cursor:not-allowed}.el-input-number__increase{right:0}.el-input-number__decrease{right:37px}.el-input-number--large{width:200px}.el-input-number--large .el-input-number__decrease,.el-input-number--large .el-input-number__increase{line-height:42px;width:42px;font-size:16px}.el-input-number--large .el-input-number__decrease{right:43px}.el-input-number--large .el-input__inner{padding-right:94px}.el-input-number--small{width:130px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{line-height:30px;width:30px;font-size:13px}.el-input-number--small .el-input-number__decrease{right:31px}.el-input-number--small .el-input__inner{padding-right:70px}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow:after{content:" ";border-width:5px}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper.is-light{background:#fff;border:1px solid #1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow:after{border-top-color:#fff}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow:after{border-bottom-color:#fff}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow:after{border-left-color:#fff}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-tooltip__popper.is-dark{background:#1f2d3d;color:#fff}.el-slider.is-vertical{position:relative}.el-slider.is-vertical .el-slider__runway{width:4px;height:100%;margin:0 16px}.el-slider.is-vertical .el-slider__bar{width:4px;height:auto;border-radius:0 0 3px 3px}.el-slider.is-vertical .el-slider__button-wrapper{top:auto;left:-16px;transform:translateY(50%)}.el-slider.is-vertical .el-slider__stop{transform:translateY(50%)}.el-slider.is-vertical.el-slider--with-input{padding-bottom:64px}.el-slider.is-vertical.el-slider--with-input .el-slider__input{overflow:visible;float:none;position:absolute;bottom:22px;width:36px;margin-top:15px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input__inner{text-align:center;padding-left:5px;padding-right:5px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{top:30px;margin-top:-1px;border:1px solid #bfcbd9;line-height:20px;box-sizing:border-box;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__decrease{width:18px;right:18px;border-bottom-left-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase{width:19px;border-bottom-right-radius:4px}.el-slider.is-vertical.el-slider--with-input .el-slider__input .el-input-number__increase~.el-input .el-input__inner{border-bottom-left-radius:0;border-bottom-right-radius:0}.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:hover .el-input-number__increase{border-color:#8391a5}.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__decrease,.el-slider.is-vertical.el-slider--with-input .el-slider__input:active .el-input-number__increase{border-color:#20a0ff}.el-slider__runway{width:100%;height:4px;margin:16px 0;background-color:#e4e8f1;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.el-slider__runway.show-input{margin-right:160px;width:auto}.el-slider__runway.disabled{cursor:default}.el-slider__runway.disabled .el-slider__bar,.el-slider__runway.disabled .el-slider__button{background-color:#bfcbd9}.el-slider__runway.disabled .el-slider__button-wrapper.dragging,.el-slider__runway.disabled .el-slider__button-wrapper.hover,.el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{transform:scale(1)}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{cursor:not-allowed}.el-slider__input{float:right;margin-top:3px}.el-slider__bar{height:4px;background-color:#20a0ff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{width:36px;height:36px;position:absolute;z-index:1001;top:-16px;transform:translateX(-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button-wrapper .el-tooltip{vertical-align:middle;display:inline-block}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__button{width:12px;height:12px;background-color:#20a0ff;border-radius:50%;transition:.2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.5);background-color:#1c8de0}.el-slider__button.hover,.el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__stop{position:absolute;width:4px;height:4px;border-radius:100%;background-color:#bfcbd9;transform:translateX(-50%)}.el-loading-mask{position:absolute;z-index:10000;background-color:hsla(0,0%,100%,.9);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{width:50px;height:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#20a0ff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{width:42px;height:42px;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#20a0ff;stroke-linecap:round}.el-loading-fade-enter,.el-loading-fade-leave-active{opacity:0}@keyframes loading-rotate{to{transform:rotate(1turn)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.el-row{position:relative;box-sizing:border-box}.el-row--flex{display:-ms-flexbox;display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-align-bottom{-ms-flex-align:end;align-items:flex-end}.el-row--flex.is-align-middle{-ms-flex-align:center;align-items:center}.el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.el-row--flex.is-justify-space-between{-ms-flex-pack:justify;justify-content:space-between}.el-row--flex.is-justify-end{-ms-flex-pack:end;justify-content:flex-end}.el-row--flex.is-justify-center{-ms-flex-pack:center;justify-content:center}.el-col-1,.el-col-2,.el-col-3,.el-col-4,.el-col-5,.el-col-6,.el-col-7,.el-col-8,.el-col-9,.el-col-10,.el-col-11,.el-col-12,.el-col-13,.el-col-14,.el-col-15,.el-col-16,.el-col-17,.el-col-18,.el-col-19,.el-col-20,.el-col-21,.el-col-22,.el-col-23,.el-col-24{float:left;box-sizing:border-box}.el-col-0{width:0}.el-col-offset-0{margin-left:0}.el-col-pull-0{position:relative;right:0}.el-col-push-0{position:relative;left:0}.el-col-1{width:4.16667%}.el-col-offset-1{margin-left:4.16667%}.el-col-pull-1{position:relative;right:4.16667%}.el-col-push-1{position:relative;left:4.16667%}.el-col-2{width:8.33333%}.el-col-offset-2{margin-left:8.33333%}.el-col-pull-2{position:relative;right:8.33333%}.el-col-push-2{position:relative;left:8.33333%}.el-col-3{width:12.5%}.el-col-offset-3{margin-left:12.5%}.el-col-pull-3{position:relative;right:12.5%}.el-col-push-3{position:relative;left:12.5%}.el-col-4{width:16.66667%}.el-col-offset-4{margin-left:16.66667%}.el-col-pull-4{position:relative;right:16.66667%}.el-col-push-4{position:relative;left:16.66667%}.el-col-5{width:20.83333%}.el-col-offset-5{margin-left:20.83333%}.el-col-pull-5{position:relative;right:20.83333%}.el-col-push-5{position:relative;left:20.83333%}.el-col-6{width:25%}.el-col-offset-6{margin-left:25%}.el-col-pull-6{position:relative;right:25%}.el-col-push-6{position:relative;left:25%}.el-col-7{width:29.16667%}.el-col-offset-7{margin-left:29.16667%}.el-col-pull-7{position:relative;right:29.16667%}.el-col-push-7{position:relative;left:29.16667%}.el-col-8{width:33.33333%}.el-col-offset-8{margin-left:33.33333%}.el-col-pull-8{position:relative;right:33.33333%}.el-col-push-8{position:relative;left:33.33333%}.el-col-9{width:37.5%}.el-col-offset-9{margin-left:37.5%}.el-col-pull-9{position:relative;right:37.5%}.el-col-push-9{position:relative;left:37.5%}.el-col-10{width:41.66667%}.el-col-offset-10{margin-left:41.66667%}.el-col-pull-10{position:relative;right:41.66667%}.el-col-push-10{position:relative;left:41.66667%}.el-col-11{width:45.83333%}.el-col-offset-11{margin-left:45.83333%}.el-col-pull-11{position:relative;right:45.83333%}.el-col-push-11{position:relative;left:45.83333%}.el-col-12{width:50%}.el-col-offset-12{margin-left:50%}.el-col-pull-12{position:relative;right:50%}.el-col-push-12{position:relative;left:50%}.el-col-13{width:54.16667%}.el-col-offset-13{margin-left:54.16667%}.el-col-pull-13{position:relative;right:54.16667%}.el-col-push-13{position:relative;left:54.16667%}.el-col-14{width:58.33333%}.el-col-offset-14{margin-left:58.33333%}.el-col-pull-14{position:relative;right:58.33333%}.el-col-push-14{position:relative;left:58.33333%}.el-col-15{width:62.5%}.el-col-offset-15{margin-left:62.5%}.el-col-pull-15{position:relative;right:62.5%}.el-col-push-15{position:relative;left:62.5%}.el-col-16{width:66.66667%}.el-col-offset-16{margin-left:66.66667%}.el-col-pull-16{position:relative;right:66.66667%}.el-col-push-16{position:relative;left:66.66667%}.el-col-17{width:70.83333%}.el-col-offset-17{margin-left:70.83333%}.el-col-pull-17{position:relative;right:70.83333%}.el-col-push-17{position:relative;left:70.83333%}.el-col-18{width:75%}.el-col-offset-18{margin-left:75%}.el-col-pull-18{position:relative;right:75%}.el-col-push-18{position:relative;left:75%}.el-col-19{width:79.16667%}.el-col-offset-19{margin-left:79.16667%}.el-col-pull-19{position:relative;right:79.16667%}.el-col-push-19{position:relative;left:79.16667%}.el-col-20{width:83.33333%}.el-col-offset-20{margin-left:83.33333%}.el-col-pull-20{position:relative;right:83.33333%}.el-col-push-20{position:relative;left:83.33333%}.el-col-21{width:87.5%}.el-col-offset-21{margin-left:87.5%}.el-col-pull-21{position:relative;right:87.5%}.el-col-push-21{position:relative;left:87.5%}.el-col-22{width:91.66667%}.el-col-offset-22{margin-left:91.66667%}.el-col-pull-22{position:relative;right:91.66667%}.el-col-push-22{position:relative;left:91.66667%}.el-col-23{width:95.83333%}.el-col-offset-23{margin-left:95.83333%}.el-col-pull-23{position:relative;right:95.83333%}.el-col-push-23{position:relative;left:95.83333%}.el-col-24{width:100%}.el-col-offset-24{margin-left:100%}.el-col-pull-24{position:relative;right:100%}.el-col-push-24{position:relative;left:100%}@media (max-width:768px){.el-col-xs-0{width:0}.el-col-xs-offset-0{margin-left:0}.el-col-xs-pull-0{position:relative;right:0}.el-col-xs-push-0{position:relative;left:0}.el-col-xs-1{width:4.16667%}.el-col-xs-offset-1{margin-left:4.16667%}.el-col-xs-pull-1{position:relative;right:4.16667%}.el-col-xs-push-1{position:relative;left:4.16667%}.el-col-xs-2{width:8.33333%}.el-col-xs-offset-2{margin-left:8.33333%}.el-col-xs-pull-2{position:relative;right:8.33333%}.el-col-xs-push-2{position:relative;left:8.33333%}.el-col-xs-3{width:12.5%}.el-col-xs-offset-3{margin-left:12.5%}.el-col-xs-pull-3{position:relative;right:12.5%}.el-col-xs-push-3{position:relative;left:12.5%}.el-col-xs-4{width:16.66667%}.el-col-xs-offset-4{margin-left:16.66667%}.el-col-xs-pull-4{position:relative;right:16.66667%}.el-col-xs-push-4{position:relative;left:16.66667%}.el-col-xs-5{width:20.83333%}.el-col-xs-offset-5{margin-left:20.83333%}.el-col-xs-pull-5{position:relative;right:20.83333%}.el-col-xs-push-5{position:relative;left:20.83333%}.el-col-xs-6{width:25%}.el-col-xs-offset-6{margin-left:25%}.el-col-xs-pull-6{position:relative;right:25%}.el-col-xs-push-6{position:relative;left:25%}.el-col-xs-7{width:29.16667%}.el-col-xs-offset-7{margin-left:29.16667%}.el-col-xs-pull-7{position:relative;right:29.16667%}.el-col-xs-push-7{position:relative;left:29.16667%}.el-col-xs-8{width:33.33333%}.el-col-xs-offset-8{margin-left:33.33333%}.el-col-xs-pull-8{position:relative;right:33.33333%}.el-col-xs-push-8{position:relative;left:33.33333%}.el-col-xs-9{width:37.5%}.el-col-xs-offset-9{margin-left:37.5%}.el-col-xs-pull-9{position:relative;right:37.5%}.el-col-xs-push-9{position:relative;left:37.5%}.el-col-xs-10{width:41.66667%}.el-col-xs-offset-10{margin-left:41.66667%}.el-col-xs-pull-10{position:relative;right:41.66667%}.el-col-xs-push-10{position:relative;left:41.66667%}.el-col-xs-11{width:45.83333%}.el-col-xs-offset-11{margin-left:45.83333%}.el-col-xs-pull-11{position:relative;right:45.83333%}.el-col-xs-push-11{position:relative;left:45.83333%}.el-col-xs-12{width:50%}.el-col-xs-offset-12{margin-left:50%}.el-col-xs-pull-12{position:relative;right:50%}.el-col-xs-push-12{position:relative;left:50%}.el-col-xs-13{width:54.16667%}.el-col-xs-offset-13{margin-left:54.16667%}.el-col-xs-pull-13{position:relative;right:54.16667%}.el-col-xs-push-13{position:relative;left:54.16667%}.el-col-xs-14{width:58.33333%}.el-col-xs-offset-14{margin-left:58.33333%}.el-col-xs-pull-14{position:relative;right:58.33333%}.el-col-xs-push-14{position:relative;left:58.33333%}.el-col-xs-15{width:62.5%}.el-col-xs-offset-15{margin-left:62.5%}.el-col-xs-pull-15{position:relative;right:62.5%}.el-col-xs-push-15{position:relative;left:62.5%}.el-col-xs-16{width:66.66667%}.el-col-xs-offset-16{margin-left:66.66667%}.el-col-xs-pull-16{position:relative;right:66.66667%}.el-col-xs-push-16{position:relative;left:66.66667%}.el-col-xs-17{width:70.83333%}.el-col-xs-offset-17{margin-left:70.83333%}.el-col-xs-pull-17{position:relative;right:70.83333%}.el-col-xs-push-17{position:relative;left:70.83333%}.el-col-xs-18{width:75%}.el-col-xs-offset-18{margin-left:75%}.el-col-xs-pull-18{position:relative;right:75%}.el-col-xs-push-18{position:relative;left:75%}.el-col-xs-19{width:79.16667%}.el-col-xs-offset-19{margin-left:79.16667%}.el-col-xs-pull-19{position:relative;right:79.16667%}.el-col-xs-push-19{position:relative;left:79.16667%}.el-col-xs-20{width:83.33333%}.el-col-xs-offset-20{margin-left:83.33333%}.el-col-xs-pull-20{position:relative;right:83.33333%}.el-col-xs-push-20{position:relative;left:83.33333%}.el-col-xs-21{width:87.5%}.el-col-xs-offset-21{margin-left:87.5%}.el-col-xs-pull-21{position:relative;right:87.5%}.el-col-xs-push-21{position:relative;left:87.5%}.el-col-xs-22{width:91.66667%}.el-col-xs-offset-22{margin-left:91.66667%}.el-col-xs-pull-22{position:relative;right:91.66667%}.el-col-xs-push-22{position:relative;left:91.66667%}.el-col-xs-23{width:95.83333%}.el-col-xs-offset-23{margin-left:95.83333%}.el-col-xs-pull-23{position:relative;right:95.83333%}.el-col-xs-push-23{position:relative;left:95.83333%}.el-col-xs-24{width:100%}.el-col-xs-offset-24{margin-left:100%}.el-col-xs-pull-24{position:relative;right:100%}.el-col-xs-push-24{position:relative;left:100%}}@media (min-width:768px){.el-col-sm-0{width:0}.el-col-sm-offset-0{margin-left:0}.el-col-sm-pull-0{position:relative;right:0}.el-col-sm-push-0{position:relative;left:0}.el-col-sm-1{width:4.16667%}.el-col-sm-offset-1{margin-left:4.16667%}.el-col-sm-pull-1{position:relative;right:4.16667%}.el-col-sm-push-1{position:relative;left:4.16667%}.el-col-sm-2{width:8.33333%}.el-col-sm-offset-2{margin-left:8.33333%}.el-col-sm-pull-2{position:relative;right:8.33333%}.el-col-sm-push-2{position:relative;left:8.33333%}.el-col-sm-3{width:12.5%}.el-col-sm-offset-3{margin-left:12.5%}.el-col-sm-pull-3{position:relative;right:12.5%}.el-col-sm-push-3{position:relative;left:12.5%}.el-col-sm-4{width:16.66667%}.el-col-sm-offset-4{margin-left:16.66667%}.el-col-sm-pull-4{position:relative;right:16.66667%}.el-col-sm-push-4{position:relative;left:16.66667%}.el-col-sm-5{width:20.83333%}.el-col-sm-offset-5{margin-left:20.83333%}.el-col-sm-pull-5{position:relative;right:20.83333%}.el-col-sm-push-5{position:relative;left:20.83333%}.el-col-sm-6{width:25%}.el-col-sm-offset-6{margin-left:25%}.el-col-sm-pull-6{position:relative;right:25%}.el-col-sm-push-6{position:relative;left:25%}.el-col-sm-7{width:29.16667%}.el-col-sm-offset-7{margin-left:29.16667%}.el-col-sm-pull-7{position:relative;right:29.16667%}.el-col-sm-push-7{position:relative;left:29.16667%}.el-col-sm-8{width:33.33333%}.el-col-sm-offset-8{margin-left:33.33333%}.el-col-sm-pull-8{position:relative;right:33.33333%}.el-col-sm-push-8{position:relative;left:33.33333%}.el-col-sm-9{width:37.5%}.el-col-sm-offset-9{margin-left:37.5%}.el-col-sm-pull-9{position:relative;right:37.5%}.el-col-sm-push-9{position:relative;left:37.5%}.el-col-sm-10{width:41.66667%}.el-col-sm-offset-10{margin-left:41.66667%}.el-col-sm-pull-10{position:relative;right:41.66667%}.el-col-sm-push-10{position:relative;left:41.66667%}.el-col-sm-11{width:45.83333%}.el-col-sm-offset-11{margin-left:45.83333%}.el-col-sm-pull-11{position:relative;right:45.83333%}.el-col-sm-push-11{position:relative;left:45.83333%}.el-col-sm-12{width:50%}.el-col-sm-offset-12{margin-left:50%}.el-col-sm-pull-12{position:relative;right:50%}.el-col-sm-push-12{position:relative;left:50%}.el-col-sm-13{width:54.16667%}.el-col-sm-offset-13{margin-left:54.16667%}.el-col-sm-pull-13{position:relative;right:54.16667%}.el-col-sm-push-13{position:relative;left:54.16667%}.el-col-sm-14{width:58.33333%}.el-col-sm-offset-14{margin-left:58.33333%}.el-col-sm-pull-14{position:relative;right:58.33333%}.el-col-sm-push-14{position:relative;left:58.33333%}.el-col-sm-15{width:62.5%}.el-col-sm-offset-15{margin-left:62.5%}.el-col-sm-pull-15{position:relative;right:62.5%}.el-col-sm-push-15{position:relative;left:62.5%}.el-col-sm-16{width:66.66667%}.el-col-sm-offset-16{margin-left:66.66667%}.el-col-sm-pull-16{position:relative;right:66.66667%}.el-col-sm-push-16{position:relative;left:66.66667%}.el-col-sm-17{width:70.83333%}.el-col-sm-offset-17{margin-left:70.83333%}.el-col-sm-pull-17{position:relative;right:70.83333%}.el-col-sm-push-17{position:relative;left:70.83333%}.el-col-sm-18{width:75%}.el-col-sm-offset-18{margin-left:75%}.el-col-sm-pull-18{position:relative;right:75%}.el-col-sm-push-18{position:relative;left:75%}.el-col-sm-19{width:79.16667%}.el-col-sm-offset-19{margin-left:79.16667%}.el-col-sm-pull-19{position:relative;right:79.16667%}.el-col-sm-push-19{position:relative;left:79.16667%}.el-col-sm-20{width:83.33333%}.el-col-sm-offset-20{margin-left:83.33333%}.el-col-sm-pull-20{position:relative;right:83.33333%}.el-col-sm-push-20{position:relative;left:83.33333%}.el-col-sm-21{width:87.5%}.el-col-sm-offset-21{margin-left:87.5%}.el-col-sm-pull-21{position:relative;right:87.5%}.el-col-sm-push-21{position:relative;left:87.5%}.el-col-sm-22{width:91.66667%}.el-col-sm-offset-22{margin-left:91.66667%}.el-col-sm-pull-22{position:relative;right:91.66667%}.el-col-sm-push-22{position:relative;left:91.66667%}.el-col-sm-23{width:95.83333%}.el-col-sm-offset-23{margin-left:95.83333%}.el-col-sm-pull-23{position:relative;right:95.83333%}.el-col-sm-push-23{position:relative;left:95.83333%}.el-col-sm-24{width:100%}.el-col-sm-offset-24{margin-left:100%}.el-col-sm-pull-24{position:relative;right:100%}.el-col-sm-push-24{position:relative;left:100%}}@media (min-width:992px){.el-col-md-0{width:0}.el-col-md-offset-0{margin-left:0}.el-col-md-pull-0{position:relative;right:0}.el-col-md-push-0{position:relative;left:0}.el-col-md-1{width:4.16667%}.el-col-md-offset-1{margin-left:4.16667%}.el-col-md-pull-1{position:relative;right:4.16667%}.el-col-md-push-1{position:relative;left:4.16667%}.el-col-md-2{width:8.33333%}.el-col-md-offset-2{margin-left:8.33333%}.el-col-md-pull-2{position:relative;right:8.33333%}.el-col-md-push-2{position:relative;left:8.33333%}.el-col-md-3{width:12.5%}.el-col-md-offset-3{margin-left:12.5%}.el-col-md-pull-3{position:relative;right:12.5%}.el-col-md-push-3{position:relative;left:12.5%}.el-col-md-4{width:16.66667%}.el-col-md-offset-4{margin-left:16.66667%}.el-col-md-pull-4{position:relative;right:16.66667%}.el-col-md-push-4{position:relative;left:16.66667%}.el-col-md-5{width:20.83333%}.el-col-md-offset-5{margin-left:20.83333%}.el-col-md-pull-5{position:relative;right:20.83333%}.el-col-md-push-5{position:relative;left:20.83333%}.el-col-md-6{width:25%}.el-col-md-offset-6{margin-left:25%}.el-col-md-pull-6{position:relative;right:25%}.el-col-md-push-6{position:relative;left:25%}.el-col-md-7{width:29.16667%}.el-col-md-offset-7{margin-left:29.16667%}.el-col-md-pull-7{position:relative;right:29.16667%}.el-col-md-push-7{position:relative;left:29.16667%}.el-col-md-8{width:33.33333%}.el-col-md-offset-8{margin-left:33.33333%}.el-col-md-pull-8{position:relative;right:33.33333%}.el-col-md-push-8{position:relative;left:33.33333%}.el-col-md-9{width:37.5%}.el-col-md-offset-9{margin-left:37.5%}.el-col-md-pull-9{position:relative;right:37.5%}.el-col-md-push-9{position:relative;left:37.5%}.el-col-md-10{width:41.66667%}.el-col-md-offset-10{margin-left:41.66667%}.el-col-md-pull-10{position:relative;right:41.66667%}.el-col-md-push-10{position:relative;left:41.66667%}.el-col-md-11{width:45.83333%}.el-col-md-offset-11{margin-left:45.83333%}.el-col-md-pull-11{position:relative;right:45.83333%}.el-col-md-push-11{position:relative;left:45.83333%}.el-col-md-12{width:50%}.el-col-md-offset-12{margin-left:50%}.el-col-md-pull-12{position:relative;right:50%}.el-col-md-push-12{position:relative;left:50%}.el-col-md-13{width:54.16667%}.el-col-md-offset-13{margin-left:54.16667%}.el-col-md-pull-13{position:relative;right:54.16667%}.el-col-md-push-13{position:relative;left:54.16667%}.el-col-md-14{width:58.33333%}.el-col-md-offset-14{margin-left:58.33333%}.el-col-md-pull-14{position:relative;right:58.33333%}.el-col-md-push-14{position:relative;left:58.33333%}.el-col-md-15{width:62.5%}.el-col-md-offset-15{margin-left:62.5%}.el-col-md-pull-15{position:relative;right:62.5%}.el-col-md-push-15{position:relative;left:62.5%}.el-col-md-16{width:66.66667%}.el-col-md-offset-16{margin-left:66.66667%}.el-col-md-pull-16{position:relative;right:66.66667%}.el-col-md-push-16{position:relative;left:66.66667%}.el-col-md-17{width:70.83333%}.el-col-md-offset-17{margin-left:70.83333%}.el-col-md-pull-17{position:relative;right:70.83333%}.el-col-md-push-17{position:relative;left:70.83333%}.el-col-md-18{width:75%}.el-col-md-offset-18{margin-left:75%}.el-col-md-pull-18{position:relative;right:75%}.el-col-md-push-18{position:relative;left:75%}.el-col-md-19{width:79.16667%}.el-col-md-offset-19{margin-left:79.16667%}.el-col-md-pull-19{position:relative;right:79.16667%}.el-col-md-push-19{position:relative;left:79.16667%}.el-col-md-20{width:83.33333%}.el-col-md-offset-20{margin-left:83.33333%}.el-col-md-pull-20{position:relative;right:83.33333%}.el-col-md-push-20{position:relative;left:83.33333%}.el-col-md-21{width:87.5%}.el-col-md-offset-21{margin-left:87.5%}.el-col-md-pull-21{position:relative;right:87.5%}.el-col-md-push-21{position:relative;left:87.5%}.el-col-md-22{width:91.66667%}.el-col-md-offset-22{margin-left:91.66667%}.el-col-md-pull-22{position:relative;right:91.66667%}.el-col-md-push-22{position:relative;left:91.66667%}.el-col-md-23{width:95.83333%}.el-col-md-offset-23{margin-left:95.83333%}.el-col-md-pull-23{position:relative;right:95.83333%}.el-col-md-push-23{position:relative;left:95.83333%}.el-col-md-24{width:100%}.el-col-md-offset-24{margin-left:100%}.el-col-md-pull-24{position:relative;right:100%}.el-col-md-push-24{position:relative;left:100%}}@media (min-width:1200px){.el-col-lg-0{width:0}.el-col-lg-offset-0{margin-left:0}.el-col-lg-pull-0{position:relative;right:0}.el-col-lg-push-0{position:relative;left:0}.el-col-lg-1{width:4.16667%}.el-col-lg-offset-1{margin-left:4.16667%}.el-col-lg-pull-1{position:relative;right:4.16667%}.el-col-lg-push-1{position:relative;left:4.16667%}.el-col-lg-2{width:8.33333%}.el-col-lg-offset-2{margin-left:8.33333%}.el-col-lg-pull-2{position:relative;right:8.33333%}.el-col-lg-push-2{position:relative;left:8.33333%}.el-col-lg-3{width:12.5%}.el-col-lg-offset-3{margin-left:12.5%}.el-col-lg-pull-3{position:relative;right:12.5%}.el-col-lg-push-3{position:relative;left:12.5%}.el-col-lg-4{width:16.66667%}.el-col-lg-offset-4{margin-left:16.66667%}.el-col-lg-pull-4{position:relative;right:16.66667%}.el-col-lg-push-4{position:relative;left:16.66667%}.el-col-lg-5{width:20.83333%}.el-col-lg-offset-5{margin-left:20.83333%}.el-col-lg-pull-5{position:relative;right:20.83333%}.el-col-lg-push-5{position:relative;left:20.83333%}.el-col-lg-6{width:25%}.el-col-lg-offset-6{margin-left:25%}.el-col-lg-pull-6{position:relative;right:25%}.el-col-lg-push-6{position:relative;left:25%}.el-col-lg-7{width:29.16667%}.el-col-lg-offset-7{margin-left:29.16667%}.el-col-lg-pull-7{position:relative;right:29.16667%}.el-col-lg-push-7{position:relative;left:29.16667%}.el-col-lg-8{width:33.33333%}.el-col-lg-offset-8{margin-left:33.33333%}.el-col-lg-pull-8{position:relative;right:33.33333%}.el-col-lg-push-8{position:relative;left:33.33333%}.el-col-lg-9{width:37.5%}.el-col-lg-offset-9{margin-left:37.5%}.el-col-lg-pull-9{position:relative;right:37.5%}.el-col-lg-push-9{position:relative;left:37.5%}.el-col-lg-10{width:41.66667%}.el-col-lg-offset-10{margin-left:41.66667%}.el-col-lg-pull-10{position:relative;right:41.66667%}.el-col-lg-push-10{position:relative;left:41.66667%}.el-col-lg-11{width:45.83333%}.el-col-lg-offset-11{margin-left:45.83333%}.el-col-lg-pull-11{position:relative;right:45.83333%}.el-col-lg-push-11{position:relative;left:45.83333%}.el-col-lg-12{width:50%}.el-col-lg-offset-12{margin-left:50%}.el-col-lg-pull-12{position:relative;right:50%}.el-col-lg-push-12{position:relative;left:50%}.el-col-lg-13{width:54.16667%}.el-col-lg-offset-13{margin-left:54.16667%}.el-col-lg-pull-13{position:relative;right:54.16667%}.el-col-lg-push-13{position:relative;left:54.16667%}.el-col-lg-14{width:58.33333%}.el-col-lg-offset-14{margin-left:58.33333%}.el-col-lg-pull-14{position:relative;right:58.33333%}.el-col-lg-push-14{position:relative;left:58.33333%}.el-col-lg-15{width:62.5%}.el-col-lg-offset-15{margin-left:62.5%}.el-col-lg-pull-15{position:relative;right:62.5%}.el-col-lg-push-15{position:relative;left:62.5%}.el-col-lg-16{width:66.66667%}.el-col-lg-offset-16{margin-left:66.66667%}.el-col-lg-pull-16{position:relative;right:66.66667%}.el-col-lg-push-16{position:relative;left:66.66667%}.el-col-lg-17{width:70.83333%}.el-col-lg-offset-17{margin-left:70.83333%}.el-col-lg-pull-17{position:relative;right:70.83333%}.el-col-lg-push-17{position:relative;left:70.83333%}.el-col-lg-18{width:75%}.el-col-lg-offset-18{margin-left:75%}.el-col-lg-pull-18{position:relative;right:75%}.el-col-lg-push-18{position:relative;left:75%}.el-col-lg-19{width:79.16667%}.el-col-lg-offset-19{margin-left:79.16667%}.el-col-lg-pull-19{position:relative;right:79.16667%}.el-col-lg-push-19{position:relative;left:79.16667%}.el-col-lg-20{width:83.33333%}.el-col-lg-offset-20{margin-left:83.33333%}.el-col-lg-pull-20{position:relative;right:83.33333%}.el-col-lg-push-20{position:relative;left:83.33333%}.el-col-lg-21{width:87.5%}.el-col-lg-offset-21{margin-left:87.5%}.el-col-lg-pull-21{position:relative;right:87.5%}.el-col-lg-push-21{position:relative;left:87.5%}.el-col-lg-22{width:91.66667%}.el-col-lg-offset-22{margin-left:91.66667%}.el-col-lg-pull-22{position:relative;right:91.66667%}.el-col-lg-push-22{position:relative;left:91.66667%}.el-col-lg-23{width:95.83333%}.el-col-lg-offset-23{margin-left:95.83333%}.el-col-lg-pull-23{position:relative;right:95.83333%}.el-col-lg-push-23{position:relative;left:95.83333%}.el-col-lg-24{width:100%}.el-col-lg-offset-24{margin-left:100%}.el-col-lg-pull-24{position:relative;right:100%}.el-col-lg-push-24{position:relative;left:100%}}.el-upload{display:inline-block;text-align:center;cursor:pointer}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#8391a5;margin-top:7px}.el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;cursor:pointer;line-height:146px;vertical-align:top}.el-upload--picture-card i{font-size:28px;color:#8c939d}.el-upload--picture-card:hover{border-color:#20a0ff;color:#20a0ff}.el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:360px;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.el-upload-dragger .el-upload__text{color:#97a8be;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#20a0ff;font-style:normal}.el-upload-dragger .el-icon-upload{font-size:67px;color:#97a8be;margin:40px 0 16px;line-height:50px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:1px solid rgba(191,203,217,.2);margin-top:7px;padding-top:5px}.el-upload-dragger:hover{border-color:#20a0ff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #20a0ff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#48576a;line-height:1.8;margin-top:5px;box-sizing:border-box;border-radius:4px;width:100%;position:relative}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item .el-progress{position:absolute;bottom:-3px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;top:-10px;right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-check,.el-upload-list__item .el-icon-circle-check{color:#13ce66}.el-upload-list__item .el-icon-close{display:none;cursor:pointer;opacity:.75;transform:scale(.7);color:#48576a}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item:hover{background-color:#eef1f6}.el-upload-list__item:hover .el-icon-close{display:inline-block}.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#20a0ff;cursor:pointer}.el-upload-list__item.is-success:hover .el-icon-check,.el-upload-list__item.is-success:hover .el-icon-circle-check{display:none}.el-upload-list__item-name{color:#48576a;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;transition:color .3s;white-space:nowrap}.el-upload-list__item-name [class^=el-icon]{color:#97a8be;margin-right:7px;height:100%;line-height:inherit}.el-upload-list__item-status-label{position:absolute;right:10px;top:0;line-height:inherit}.el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#48576a;display:none}.el-upload-list__item-delete:hover{color:#20a0ff}.el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.el-upload-list--picture-card .el-upload-list__item .el-icon-check,.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture-card .el-upload-list__item-name,.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;transform:rotate(-45deg) scale(.8)}.el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);transition:opacity .3s}.el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.el-upload-list--picture-card .el-progress{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.el-upload-list--picture .el-upload-list__item .el-icon-check,.el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:transparent;box-shadow:none;top:-2px;right:-12px}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label .el-icon-close{transform:rotate(45deg) scale(.7)}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;margin-left:-80px}.el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 1px 1px #ccc}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;transform:rotate(-45deg) scale(.8)}.el-upload-list--picture .el-progress{position:static}.el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-upload-cover img{display:block;width:100%;height:100%}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-cover__label i{font-size:12px;margin-top:11px;transform:rotate(-45deg) scale(.8);color:#fff}.el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-upload-cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;margin-top:60px}.el-upload-cover__interact .btn i{margin-top:0}.el-upload-cover__interact .btn span{opacity:0;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#48576a}.el-progress{position:relative;line-height:1}.el-progress.is-exception .el-progress-bar__inner{background-color:#ff4949}.el-progress.is-exception .el-progress__text{color:#ff4949}.el-progress.is-success .el-progress-bar__inner{background-color:#13ce66}.el-progress.is-success .el-progress__text{color:#13ce66}.el-progress__text{font-size:14px;color:#48576a;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;transform:translateY(-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#e4e8f1;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;border-radius:2px 0 0 2px;background-color:#20a0ff;text-align:right;border-radius:100px;line-height:1}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}to{background-position:32px 0}}.el-time-spinner{width:100%;white-space:nowrap}.el-spinner{display:inline-block;vertical-align:middle}.el-spinner-inner{animation:rotate 2s linear infinite;width:50px;height:50px}.el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.el-message{box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);min-width:300px;padding:10px 12px;box-sizing:border-box;border-radius:2px;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#fff;transition:opacity .3s,transform .4s;overflow:hidden}.el-message .el-icon-circle-check{color:#13ce66}.el-message .el-icon-circle-cross{color:#ff4949}.el-message .el-icon-information{color:#50bfff}.el-message .el-icon-warning{color:#f7ba2a}.el-message__group{margin-left:38px;position:relative;height:20px;line-height:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.el-message__group p{font-size:14px;margin:0 34px 0 0;white-space:nowrap;color:#8391a5;text-align:justify}.el-message__group.is-with-icon{margin-left:0}.el-message__img{width:40px;height:40px;position:absolute;left:0;top:0}.el-message__icon{vertical-align:middle;margin-right:8px}.el-message__closeBtn{top:3px;right:0;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-message__closeBtn:hover{color:#97a8be}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;transform:translate(-50%,-100%)}.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#ff4949;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff}.el-badge__content.is-dot{width:8px;height:8px;padding:0;right:0;border-radius:50%}.el-badge__content.is-fixed{top:0;right:10px;position:absolute;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-card{border:1px solid #d1dbe5;border-radius:4px;background-color:#fff;overflow:hidden;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-card__header{padding:18px 20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.el-rate__item{font-size:0;vertical-align:middle}.el-rate__icon,.el-rate__item{display:inline-block;position:relative}.el-rate__icon{font-size:18px;margin-right:6px;color:#bfcbd9;transition:.3s}.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal{position:absolute;top:0;left:0;display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{font-size:0}.el-steps>:last-child .el-step__line{display:none}.el-steps.is-horizontal{white-space:nowrap}.el-steps.is-horizontal.is-center{text-align:center}.el-step{position:relative;vertical-align:top}.el-step:last-child .el-step__main{padding-right:0}.el-step.is-vertical .el-step__head,.el-step.is-vertical .el-step__main{display:inline-block}.el-step.is-vertical .el-step__main{padding-left:10px}.el-step.is-horizontal,.el-step__line{display:inline-block}.el-step__line{position:absolute;border-color:inherit;background-color:#bfcbd9}.el-step__line.is-vertical{width:2px;box-sizing:border-box;top:32px;bottom:0;left:15px}.el-step__line.is-horizontal{top:15px;height:2px;left:32px;right:0}.el-step__line.is-icon.is-horizontal{right:4px}.el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;transition:all .15s;width:0;height:0}.el-step__icon{display:block;line-height:28px}.el-step__icon>*{line-height:inherit;vertical-align:middle}.el-step__head{width:28px;height:28px;border-radius:50%;background-color:transparent;text-align:center;line-height:28px;font-size:28px;vertical-align:top;transition:all .15s}.el-step__head.is-finish{color:#20a0ff;border-color:#20a0ff}.el-step__head.is-error{color:#ff4949;border-color:#ff4949}.el-step__head.is-success{color:#13ce66;border-color:#13ce66}.el-step__head.is-process,.el-step__head.is-wait{color:#bfcbd9;border-color:#bfcbd9}.el-step__head.is-text{font-size:14px;border-width:2px;border-style:solid}.el-step__head.is-text.is-finish{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-step__head.is-text.is-error{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-step__head.is-text.is-success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-step__head.is-text.is-wait{color:#bfcbd9;background-color:#fff;border-color:#bfcbd9}.el-step__head.is-text.is-process{color:#fff;background-color:#bfcbd9;border-color:#bfcbd9}.el-step__main{white-space:normal;padding-right:10px;text-align:left}.el-step__title{font-size:14px;line-height:32px;display:inline-block}.el-step__title.is-finish{font-weight:700;color:#20a0ff}.el-step__title.is-error{font-weight:700;color:#ff4949}.el-step__title.is-success{font-weight:700;color:#13ce66}.el-step__title.is-wait{font-weight:400;color:#97a8be}.el-step__title.is-process{font-weight:700;color:#48576a}.el-step__description{font-size:12px;font-weight:400;line-height:14px}.el-step__description.is-finish{color:#20a0ff}.el-step__description.is-error{color:#ff4949}.el-step__description.is-success{color:#13ce66}.el-step__description.is-wait{color:#bfcbd9}.el-step__description.is-process{color:#8391a5}.el-carousel{overflow-x:hidden;position:relative}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:none;padding:0;margin:0;width:36px;height:36px;cursor:pointer;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#fff;position:absolute;top:50%;z-index:10;transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__indicators{position:absolute;list-style:none;bottom:0;left:50%;transform:translateX(-50%);margin:0;padding:0;z-index:2}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#8391a5;opacity:.24}.el-carousel__indicator{display:inline-block;background-color:transparent;padding:12px 4px;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.3s}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{transform:translateY(-50%) translateX(10px);opacity:0}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active .el-scrollbar__bar,.el-scrollbar:focus .el-scrollbar__bar,.el-scrollbar:hover .el-scrollbar__bar{opacity:1;transition:opacity .34s ease-out}.el-scrollbar__wrap{overflow:scroll}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(151,168,190,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(151,168,190,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;transition:opacity .12s ease-out}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;transition:.4s ease-in-out;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card{width:50%}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;transition:.2s}.el-collapse{border:1px solid #dfe6ec;border-radius:0}.el-collapse-item:last-child{margin-bottom:-1px}.el-collapse-item.is-active>.el-collapse-item__header .el-collapse-item__header__arrow{transform:rotate(90deg)}.el-collapse-item__header{height:43px;line-height:43px;padding-left:15px;background-color:#fff;color:#48576a;cursor:pointer;border-bottom:1px solid #dfe6ec;font-size:13px}.el-collapse-item__header__arrow{margin-right:8px;transition:transform .3s}.el-collapse-item__wrap{will-change:height;background-color:#fbfdff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #dfe6ec}.el-collapse-item__content{padding:10px 15px;font-size:13px;color:#1f2d3d;line-height:1.769230769230769}.el-cascader{display:inline-block;position:relative}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-caret-bottom{transition:transform .3s}.el-cascader .el-icon-caret-bottom.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#bbb}.el-cascader__label{position:absolute;left:0;top:0;height:100%;line-height:34px;padding:0 25px 0 10px;color:#1f2d3d;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:left}.el-cascader__label span{color:#97a8be}.el-cascader--large{font-size:16px}.el-cascader--large .el-cascader__label{line-height:40px}.el-cascader--small{font-size:13px}.el-cascader--small .el-cascader__label{line-height:28px}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #d1dbe5;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #d1dbe5;background-color:#fff;box-sizing:border-box;margin:0;padding:6px 0;min-width:160px}.el-cascader-menu:last-child{border-right:0}.el-cascader-menu__item{font-size:14px;padding:8px 30px 8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-cascader-menu__item:hover{background-color:#e4e8f1}.el-cascader-menu__item.selected{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.selected.hover{background-color:#1c8de0}.el-cascader-menu__item.is-active{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.is-active:hover{background-color:#1c8de0}.el-cascader-menu__item.is-disabled{color:#bfcbd9;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\E606";font-size:12px;transform:scale(.8);color:#bfcbd9;position:absolute;right:10px;margin-top:1px}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-hue-slider__bar{position:relative;background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.el-color-svpanel__black{background:linear-gradient(0deg,#000,transparent)}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper:after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:6px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#1f2d3d}.el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.el-color-dropdown__btn:hover{color:#20a0ff;border-color:#20a0ff}.el-color-dropdown__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:#4db3ff}.el-color-picker{display:inline-block;position:relative;line-height:normal}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:36px;padding:6px;border:1px solid #bfcbd9;border-radius:4px;font-size:0}.el-color-picker__color{position:relative;display:inline-block;box-sizing:border-box;border:1px solid #666;width:22px;height:22px;text-align:center}.el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.el-color-picker__empty{font-size:12px;vertical-align:middle;color:#666;position:absolute;top:4px;left:4px}.el-color-picker__icon{display:inline-block;position:relative;top:-6px;margin-left:8px;width:12px;color:#888;font-size:12px}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12)}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input.is-disabled .el-input__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::placeholder{color:#bfcbd9}.el-input.is-active .el-input__inner{outline:none;border-color:#20a0ff}.el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #bfcbd9;box-sizing:border-box;color:#1f2d3d;display:block;font-size:inherit;height:36px;line-height:1;outline:none;padding:3px 10px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::-webkit-input-placeholder{color:#97a8be}.el-input__inner::-moz-placeholder{color:#97a8be}.el-input__inner:-ms-input-placeholder{color:#97a8be}.el-input__inner::placeholder{color:#97a8be}.el-input__inner:hover{border-color:#8391a5}.el-input__inner:focus{outline:none;border-color:#20a0ff}.el-input__icon{position:absolute;width:35px;height:100%;right:0;top:0;text-align:center;color:#bfcbd9;transition:all .3s}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__icon+.el-input__inner{padding-right:35px}.el-input__icon.is-clickable:hover{cursor:pointer;color:#8391a5}.el-input__icon.is-clickable:hover+.el-input__inner{border-color:#8391a5}.el-input--large{font-size:16px}.el-input--large .el-input__inner{height:42px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:30px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:22px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#fbfdff;color:#97a8be;vertical-align:middle;display:table-cell;position:relative;border:1px solid #bfcbd9;border-radius:4px;padding:0 10px;width:1%;white-space:nowrap}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:block;margin:-10px}.el-input-group__append .el-button,.el-input-group__append .el-select .el-input__inner,.el-input-group__append .el-select:hover .el-input__inner,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select .el-input__inner,.el-input-group__prepend .el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append{border-left:0}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-textarea{display:inline-block;width:100%;vertical-align:bottom}.el-textarea.is-disabled .el-textarea__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#bfcbd9}.el-textarea__inner{display:block;resize:vertical;padding:5px 7px;line-height:1.5;box-sizing:border-box;width:100%;font-size:14px;color:#1f2d3d;background-color:#fff;background-image:none;border:1px solid #bfcbd9;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#97a8be}.el-textarea__inner::-moz-placeholder{color:#97a8be}.el-textarea__inner:-ms-input-placeholder{color:#97a8be}.el-textarea__inner::placeholder{color:#97a8be}.el-textarea__inner:hover{border-color:#8391a5}.el-textarea__inner:focus{outline:none;border-color:#20a0ff}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #bfcbd9;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#20a0ff;border-color:#20a0ff}.el-button:active{color:#1d90e6;border-color:#1d90e6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#d1dbe5;color:#bfcbd9}.el-button.is-active{color:#1d90e6;border-color:#1d90e6}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--primary{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-button--primary:focus,.el-button--primary:hover{background:#4db3ff;border-color:#4db3ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#1d90e6;border-color:#1d90e6;color:#fff}.el-button--primary.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button--primary.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-button--success:focus,.el-button--success:hover{background:#42d885;border-color:#42d885;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#11b95c;border-color:#11b95c;color:#fff}.el-button--success.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#fff;border-color:#13ce66;color:#13ce66}.el-button--success.is-plain:active{background:#fff;border-color:#11b95c;color:#11b95c;outline:none}.el-button--warning{color:#fff;background-color:#f7ba2a;border-color:#f7ba2a}.el-button--warning:focus,.el-button--warning:hover{background:#f9c855;border-color:#f9c855;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#dea726;border-color:#dea726;color:#fff}.el-button--warning.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#fff;border-color:#f7ba2a;color:#f7ba2a}.el-button--warning.is-plain:active{background:#fff;border-color:#dea726;color:#dea726;outline:none}.el-button--danger{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-button--danger:focus,.el-button--danger:hover{background:#ff6d6d;border-color:#ff6d6d;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#e64242;border-color:#e64242;color:#fff}.el-button--danger.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#fff;border-color:#ff4949;color:#ff4949}.el-button--danger.is-plain:active{background:#fff;border-color:#e64242;color:#e64242;outline:none}.el-button--info{color:#fff;background-color:#50bfff;border-color:#50bfff}.el-button--info:focus,.el-button--info:hover{background:#73ccff;border-color:#73ccff;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#48ace6;border-color:#48ace6;color:#fff}.el-button--info.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#fff;border-color:#50bfff;color:#50bfff}.el-button--info.is-plain:active{background:#fff;border-color:#48ace6;color:#48ace6;outline:none}.el-button--large{padding:11px 19px;font-size:16px;border-radius:4px}.el-button--small{padding:7px 9px;font-size:12px;border-radius:4px}.el-button--mini{padding:4px;font-size:12px;border-radius:4px}.el-button--text{border:none;color:#20a0ff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#4db3ff}.el-button--text:active{color:#1d90e6}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group .el-button--primary:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button{float:left;position:relative}.el-button-group .el-button+.el-button{margin-left:0}.el-button-group .el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group .el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group .el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group .el-button:not(:last-child){margin-right:-1px}.el-button-group .el-button.is-active,.el-button-group .el-button:active,.el-button-group .el-button:focus,.el-button-group .el-button:hover{z-index:1}.el-checkbox{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-checkbox+.el-checkbox{margin-left:15px}.el-checkbox__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;border:1px solid #fff;margin-top:-1px;left:3px;right:3px;top:50%}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#20a0ff}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#eef1f6}.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#fff}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{border-color:#fff}.el-checkbox__input.is-disabled+.el-checkbox__label{color:#bbb;cursor:not-allowed}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #bfcbd9;border-radius:4px;box-sizing:border-box;width:18px;height:18px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:hover{border-color:#20a0ff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:2px solid #fff;border-left:0;border-top:0;height:8px;left:5px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:4px;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;visibility:hidden;left:-999px}.el-checkbox__label{font-size:14px;padding-left:5px}.el-checkbox-button{position:relative;display:inline-block;@.is-focus{& .el-checkbox-button__inner{border-color:#20a0ff}}}.el-checkbox-button.is-checked .el-checkbox-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-checkbox-button.is-disabled .el-checkbox-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-checkbox-button:first-child .el-checkbox-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.el-checkbox-button:last-child .el-checkbox-button__inner{border-radius:0 4px 4px 0}.el-checkbox-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:0}.el-checkbox-button__inner:hover{color:#20a0ff}.el-checkbox-button__inner [class*=el-icon-]{line-height:.9}.el-checkbox-button__inner [class*=el-icon-]+span{margin-left:5px}.el-checkbox-button__original{opacity:0;outline:none;position:absolute;margin:0;visibility:hidden;left:-999px}.el-checkbox-button--large .el-checkbox-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-checkbox-button--small .el-checkbox-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-checkbox-button--mini .el-checkbox-button__inner{padding:4px;font-size:12px;border-radius:0}.el-transfer{font-size:14px}.el-transfer__buttons{display:inline-block;vertical-align:middle;padding:0 10px}.el-transfer__buttons .el-button{display:block;margin:0 auto;padding:8px 12px}.el-transfer__buttons .el-button:first-child{margin-bottom:6px}.el-transfer__buttons .el-button [class*=el-icon-]+span{margin-left:0}.el-transfer-panel{border:1px solid #d1dbe5;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);display:inline-block;vertical-align:middle;width:200px;box-sizing:border-box;position:relative}.el-transfer-panel .el-transfer-panel__header{height:36px;line-height:36px;background:#fbfdff;margin:0;padding-left:20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box;color:#1f2d3d}.el-transfer-panel .el-transfer-panel__footer{height:36px;background:#fff;margin:0;padding:0;border-top:1px solid #d1dbe5;position:absolute;bottom:0;left:0;width:100%;z-index:1}.el-transfer-panel .el-transfer-panel__footer .el-checkbox{padding-left:20px;color:#8391a5}.el-transfer-panel .el-transfer-panel__empty{margin:0;height:32px;line-height:32px;padding:6px 20px 0;color:#8391a5}.el-transfer-panel .el-checkbox__label{padding-left:14px}.el-transfer-panel .el-checkbox__inner{width:14px;height:14px;border-radius:3px}.el-transfer-panel .el-checkbox__inner:after{height:6px;width:3px;left:4px}.el-transfer-panel__body{padding-bottom:36px;height:246px}.el-transfer-panel__list{margin:0;padding:6px 0;list-style:none;height:246px;overflow:auto;box-sizing:border-box}.el-transfer-panel__list.is-filterable{height:214px}.el-transfer-panel__item{height:32px;line-height:32px;padding-left:20px;display:block}.el-transfer-panel__item .el-checkbox__label{width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;box-sizing:border-box;padding-left:28px}.el-transfer-panel__item .el-checkbox__input{position:absolute;top:9px}.el-transfer-panel__item+.el-transfer-panel__item{margin-left:0}.el-transfer-panel__item.el-checkbox{color:#48576a}.el-transfer-panel__item:hover{background:#e4e8f1}.el-transfer-panel__filter{margin-top:10px;text-align:center;padding:0 10px;width:100%;box-sizing:border-box}.el-transfer-panel__filter .el-input__inner{height:22px;width:100%;display:inline-block;box-sizing:border-box}.el-transfer-panel__filter .el-input__icon{right:10px}.el-transfer-panel__filter .el-icon-circle-close{cursor:pointer}.demo-block{border:1px solid #eaeefb;border-radius:4px;transition:.2s}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#f9fafc;border-top:1px solid #eaeefb;clear:both;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:18px 24px;width:40%;box-sizing:border-box;border-left:1px solid #eaeefb;float:right;font-size:14px;line-height:1.8;color:#5e6d82;word-break:break-word}.demo-block .description p{margin:0 0 12px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;transform:translateY(-2px);display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px}.demo-block .highlight{width:60%;border-right:1px solid #eaeefb}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:36px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;transition:.2s;position:relative}.demo-block .demo-block-control i{font-size:12px;line-height:36px;transition:.3s}.demo-block .demo-block-control i.hovering{transform:translateX(-40px)}.demo-block .demo-block-control span{position:absolute;transform:translateX(-30px);font-size:14px;line-height:36px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#20a0ff;background-color:#f9fafc}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;transform:translateX(10px)}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.footer{height:120px;background-color:#324057;color:#a4aebd;width:100%;z-index:1000;margin-top:-120px}.footer *{word-spacing:0}.footer .container{height:100%;box-sizing:border-box}.footer .footer-main{font-size:0;padding-top:40px;display:inline-block}.footer .footer-main .footer-main-title{line-height:1;font-size:22px;margin:0}.footer .footer-main .footer-main-link{display:inline-block;margin:12px 18px 0 0;line-height:1;font-size:12px;color:#768193}.footer .footer-main .footer-main-link a{color:#768193;text-decoration:none}.footer .footer-social{float:right;line-height:120px}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#8d99ab;background-color:transparent;width:32px;height:32px;font-size:32px;vertical-align:middle}.footer .footer-social .elementdoc:hover{transform:scale(1.2)}.footer .footer-social .doc-icon-weixin{margin-right:36px}.footer .footer-social .doc-icon-weixin:hover{color:#fff}.footer .footer-social .doc-icon-github{margin-right:0}.footer .footer-social .doc-icon-github:hover{color:#fff}.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.footer-popover img{width:100px;height:100px;margin:10px}@media (max-width:768px){.footer .footer-social{display:none}}.header .nav[data-v-7ad4e6e1]:after,.header .nav[data-v-7ad4e6e1]:before{display:table;content:""}.header .nav[data-v-7ad4e6e1]:after{clear:both}.headerWrapper[data-v-7ad4e6e1]{height:80px}.header[data-v-7ad4e6e1]{height:80px;background-color:#20a0ff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-7ad4e6e1]{height:100%;box-sizing:border-box}.header h1[data-v-7ad4e6e1]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-7ad4e6e1]{color:#fff;text-decoration:none;display:block}.header h1 span[data-v-7ad4e6e1]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-7ad4e6e1]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav-logo-small[data-v-7ad4e6e1],.header .nav-logo[data-v-7ad4e6e1]{vertical-align:sub}.header .nav-logo-small[data-v-7ad4e6e1]{display:none}.header .nav-item[data-v-7ad4e6e1]{margin:0;float:left;list-style:none;position:relative;cursor:pointer;margin-left:20px}.header .nav-item a[data-v-7ad4e6e1]{text-decoration:none;color:#fff;display:block;padding:0 20px;opacity:.8}.header .nav-item a.active[data-v-7ad4e6e1],.header .nav-item a[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item a.active[data-v-7ad4e6e1]{font-weight:700}.header .nav-item a.active[data-v-7ad4e6e1]:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:4px;background:#99d2fc}.header .nav-item[data-v-7ad4e6e1]:last-child{cursor:default;margin-left:34px}.header .nav-item:last-child span[data-v-7ad4e6e1]{opacity:.8}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]{cursor:pointer;display:inline-block;height:100%}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item:last-child .nav-lang.active[data-v-7ad4e6e1]{font-weight:700;opacity:1}.header-home[data-v-7ad4e6e1]{position:fixed;top:0;background-color:rgba(32,160,255,0)}@media (max-width:850px){.header .nav-logo[data-v-7ad4e6e1]{display:none}.header .nav-logo-small[data-v-7ad4e6e1]{display:inline-block}.header .nav-item[data-v-7ad4e6e1]{margin-left:6px}.header .nav-item a[data-v-7ad4e6e1]{padding:0 5px}.header .nav-item[data-v-7ad4e6e1]:last-child{margin-left:10px}}@media (max-width:700px){.header .container[data-v-7ad4e6e1]{padding:0 12px}.header .nav-item a[data-v-7ad4e6e1],.header .nav-lang[data-v-7ad4e6e1]{font-size:12px;vertical-align:top}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-dropdown{margin-bottom:6px;width:100%}.side-nav .nav-dropdown span{display:block;width:100%;font-size:16px;color:#5e6d82;line-height:40px;transition:.2s;padding-bottom:6px;border-bottom:1px solid #eaeefb}.side-nav .nav-dropdown span:hover{cursor:pointer}.side-nav .nav-dropdown i{transition:.2s;font-size:12px;color:#d3dce6}.side-nav .nav-dropdown.is-active i,.side-nav .nav-dropdown.is-active span,.side-nav .nav-dropdown:hover i,.side-nav .nav-dropdown:hover span{color:#20a0ff}.side-nav .nav-dropdown.is-active i{transform:rotate(180deg) translateY(2px)}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}.nav-dropdown-list{width:120px;margin-top:-8px}.nav-dropdown-list li{font-size:14px}.footer-nav{padding:24px 0;color:#99a9bf;font-size:14px}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#d9def1;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#20a0ff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px}
\ No newline at end of file
diff --git a/docs.597e34b.js b/docs.597e34b.js
deleted file mode 100644
index 8d3e89834..000000000
--- a/docs.597e34b.js
+++ /dev/null
@@ -1,109 +0,0 @@
-webpackJsonp([0,2],[function(s,t,a){s.exports=a(1)},function(s,t,a){(function(s){"use strict";function t(s){return s&&s.__esModule?s:{default:s}}var l=a(2),n=t(l),e=a(3),i=t(e),v=a(22),_=t(v),r=a(23),c=t(r),p=a(578),o=t(p);a(953);var h=a(958),d=t(h),C=a(964),j=t(C),u=a(970),g=t(u),m=a(977),b=t(m),f=a(982),y=t(f),w=a(987),k=t(w);n.default.use(o.default),n.default.use(_.default),n.default.component("demo-block",d.default),n.default.component("main-footer",j.default),n.default.component("main-header",g.default),n.default.component("side-nav",b.default),n.default.component("footer-nav",y.default);var x=new _.default({mode:"hash",base:s,routes:c.default});x.afterEach(function(s){var t=k.default[s.meta.lang];for(var a in t)if(new RegExp("^"+a,"g").test(s.name))return void(document.title=t[a]);document.title="Element"}),new n.default({render:function(s){return s(i.default)},router:x}).$mount("#app")}).call(t,"/")},,function(s,t,a){a(4);var l=a(13)(a(14),a(21),null,null);s.exports=l.exports},function(s,t){},,,,,,,,,,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},e=a(15),i=a(16),v=l(i),_=a(20),r=l(_);(0,e.use)(location.href.indexOf("zh-CN")>-1?v.default:r.default),t.default={name:"app",computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"}},watch:{lang:function(){this.localize()}},methods:{localize:function(){(0,e.use)("zh-CN"===this.lang?v.default:r.default)},renderAnchorHref:function(){if(!/changelog/g.test(location.href)){var s=document.querySelectorAll("h2 a,h3 a"),t=location.href.split("#").splice(0,2).join("#");[].slice.call(s).forEach(function(s){var a=s.getAttribute("href");s.href=t+a})}},goAnchor:function(){if(location.href.match(/#/g).length>1){var s=function(){var s=location.href.match(/#[^#]+$/g);if(!s)return{v:void 0};var t=document.querySelector(s[0]);return t?void setTimeout(function(s){document.documentElement.scrollTop=document.body.scrollTop=t.offsetTop+120},50):{v:void 0}}();if("object"===("undefined"==typeof s?"undefined":n(s)))return s.v}}},mounted:function(){this.localize(),this.renderAnchorHref(),this.goAnchor()},created:function(){var s=this;window.addEventListener("hashchange",function(){location.href.match(/#/g).length<2?(document.documentElement.scrollTop=document.body.scrollTop=0,s.renderAnchorHref()):s.goAnchor()})}}},,,,,,function(s,t){"use strict";t.__esModule=!0,t.default={el:{colorpicker:{confirm:"OK",clear:"Clear"},datepicker:{now:"Now",today:"Today",cancel:"Cancel",clear:"Clear",confirm:"OK",selectDate:"Select date",selectTime:"Select time",startDate:"Start Date",startTime:"Start Time",endDate:"End Date",endTime:"End Time",year:"",month1:"Jan",month2:"Feb",month3:"Mar",month4:"Apr",month5:"May",month6:"Jun",month7:"Jul",month8:"Aug",month9:"Sep",month10:"Oct",month11:"Nov",month12:"Dec",weeks:{sun:"Sun",mon:"Mon",tue:"Tue",wed:"Wed",thu:"Thu",fri:"Fri",sat:"Sat"},months:{jan:"Jan",feb:"Feb",mar:"Mar",apr:"Apr",may:"May",jun:"Jun",jul:"Jul",aug:"Aug",sep:"Sep",oct:"Oct",nov:"Nov",dec:"Dec"}},select:{loading:"Loading",noMatch:"No matching data",noData:"No data",placeholder:"Select"},cascader:{noMatch:"No matching data",placeholder:"Select"},pagination:{goto:"Go to",pagesize:"/page",total:"Total {total}",pageClassifier:""},messagebox:{title:"Message",confirm:"OK",cancel:"Cancel",error:"Illegal input"},upload:{delete:"Delete",preview:"Preview",continue:"Continue"},table:{emptyText:"No Data",confirmFilter:"Confirm",resetFilter:"Reset",clearFilter:"All"},tree:{emptyText:"No Data"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{attrs:{id:"app"}},["play"!==s.lang?a("main-header"):s._e(),a("div",{staticClass:"main-cnt"},[a("router-view")],1),"play"!==s.lang?a("main-footer"):s._e()],1)},staticRenderFns:[]}},function(s,t){s.exports=VueRouter},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(25),v=l(i),_=function(s){function t(s,t,n){var e="/changelog"===s.path?a(38)("./"+t+"/changelog.vue"):a(55)("./"+t+s.path+".md"),i={path:s.path.slice(1),meta:{title:s.title||s.name,description:s.description,lang:t},name:"component-"+(s.title||s.name),component:e.default||e};l[n].children.push(i)}var l=[];return Object.keys(s).forEach(function(n,e){var i=s[n];l.push({path:"/"+n+"/component",redirect:"/"+n+"/component/installation",component:a(26)("./"+n+"/component.vue"),children:[]}),i.forEach(function(s){s.groups?s.groups.forEach(function(s){s.list.forEach(function(s){t(s,n,e)})}):s.children?s.children.forEach(function(s){t(s,n,e)}):t(s,n,e)})}),l},r=_(e.default),c=function(s){var t={path:"/"+s+"/guide",redirect:"/"+s+"/guide/design",component:a(501)("./"+s+"/guide.vue"),children:[{path:"design",name:"guide-design"+s,meta:{lang:s},component:a(512)("./"+s+"/design.vue")},{path:"nav",name:"guide-nav"+s,meta:{lang:s},component:a(525)("./"+s+"/nav.vue")}]},l={path:"/"+s+"/resource",meta:{lang:s},name:"resource"+s,component:a(540)("./"+s+"/resource.vue")},n={path:"/"+s,meta:{lang:s},name:"home"+s,component:a(552)("./"+s+"/index.vue")};return[t,l,n]};v.default.forEach(function(s){r=r.concat(c(s.lang))}),r.push({path:"/play",name:"play",component:a(570)});var p=localStorage.getItem("ELEMENT_LANGUAGE")||window.navigator.language||"en-US",o="/en-US";p.indexOf("zh-")!==-1&&(o="/zh-CN"),r=r.concat([{path:"/",redirect:o},{path:"*",redirect:o}]),t.default=r},function(s,t){s.exports={"zh-CN":[{name:"开发指南",children:[{path:"/installation",name:"安装"},{path:"/quickstart",name:"快速上手"},{path:"/i18n",name:"国际化"},{path:"/custom-theme",name:"自定义主题"}]},{name:"更新日志",path:"/changelog"},{name:"基础组件",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout 布局"},{path:"/color",title:"Color 色彩"},{path:"/typography",title:"Typography 字体"},{path:"/icon",title:"Icon 图标"},{path:"/button",title:"Button 按钮"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio 单选框"},{path:"/checkbox",title:"Checkbox 多选框"},{path:"/input",title:"Input 输入框"},{path:"/input-number",title:"InputNumber 计数器"},{path:"/select",title:"Select 选择器"},{path:"/cascader",title:"Cascader 级联选择器"},{path:"/switch",title:"Switch 开关"},{path:"/slider",title:"Slider 滑块"},{path:"/time-picker",title:"TimePicker 时间选择器"},{path:"/date-picker",title:"DatePicker 日期选择器"},{path:"/datetime-picker",title:"DateTimePicker 日期时间选择器"},{path:"/upload",title:"Upload 上传"},{path:"/rate",title:"Rate 评分"},{path:"/color-picker",title:"ColorPicker 颜色选择器"},{path:"/form",title:"Form 表单"}]},{groupName:"Data",list:[{path:"/table",title:"Table 表格"},{path:"/tag",title:"Tag 标签"},{path:"/progress",title:"Progress 进度条"},{path:"/tree",title:"Tree 树形控件"},{path:"/pagination",title:"Pagination 分页"},{path:"/badge",title:"Badge 标记"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert 警告"},{path:"/loading",title:"Loading 加载"},{path:"/message",title:"Message 消息提示"},{path:"/message-box",title:"MessageBox 弹框"},{path:"/notification",title:"Notification 通知"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu 导航菜单"},{path:"/tabs",title:"Tabs 标签页"},{path:"/breadcrumb",title:"Breadcrumb 面包屑"},{path:"/dropdown",title:"Dropdown 下拉菜单"},{path:"/steps",title:"Steps 步骤条"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog 对话框"},{path:"/tooltip",title:"Tooltip 文字提示"},{path:"/popover",title:"Popover 弹出框"},{path:"/card",title:"Card 卡片"},{path:"/carousel",title:"Carousel 走马灯"},{path:"/collapse",title:"Collapse 折叠面板"}]}]}],"en-US":[{name:"Development",children:[{path:"/installation",name:"Installation"},{path:"/quickstart",name:"Quick Start"},{path:"/i18n",name:"Internationalization"},{path:"/custom-theme",name:"Custom Theme"}]},{name:"Changelog",path:"/changelog"},{name:"Components",groups:[{groupName:"Basic",list:[{path:"/layout",title:"Layout"},{path:"/color",title:"Color"},{path:"/typography",title:"Typography"},{path:"/icon",title:"Icon"},{path:"/button",title:"Button"}]},{groupName:"Form",list:[{path:"/radio",title:"Radio"},{path:"/checkbox",title:"Checkbox"},{path:"/input",title:"Input"},{path:"/input-number",title:"InputNumber"},{path:"/select",title:"Select"},{path:"/cascader",title:"Cascader"},{path:"/switch",title:"Switch"},{path:"/slider",title:"Slider"},{path:"/time-picker",title:"TimePicker"},{path:"/date-picker",title:"DatePicker"},{path:"/datetime-picker",title:"DateTimePicker"},{path:"/upload",title:"Upload"},{path:"/rate",title:"Rate"},{path:"/color-picker",title:"ColorPicker"},{path:"/form",title:"Form"}]},{groupName:"Data",list:[{path:"/table",title:"Table"},{path:"/tag",title:"Tag"},{path:"/progress",title:"Progress"},{path:"/tree",title:"Tree"},{path:"/pagination",title:"Pagination"},{path:"/badge",title:"Badge"}]},{groupName:"Notice",list:[{path:"/alert",title:"Alert"},{path:"/loading",title:"Loading"},{path:"/message",title:"Message"},{path:"/message-box",title:"MessageBox"},{path:"/notification",title:"Notification"}]},{groupName:"Navigation",list:[{path:"/menu",title:"NavMenu"},{path:"/tabs",title:"Tabs"},{path:"/breadcrumb",title:"Breadcrumb"},{path:"/dropdown",title:"Dropdown"},{path:"/steps",title:"Steps"}]},{groupName:"Others",list:[{path:"/dialog",title:"Dialog"},{path:"/tooltip",title:"Tooltip"},{path:"/popover",title:"Popover"},{path:"/card",title:"Card"},{path:"/carousel",title:"Carousel"},{path:"/collapse",title:"Collapse"}]}]}]}},function(s,t){s.exports=[{lang:"zh-CN"},{lang:"en-US"}]},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/component.vue":27,"./zh-CN/component.vue":33};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=26},function(s,t,a){a(28);var l=a(13)(a(30),a(32),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(31),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:e.default,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=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){a(34);var l=a(13)(a(36),a(37),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n),i=a(31),v=l(i);t.default={data:function(){return{lang:this.$route.meta.lang,navsData:e.default,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=(0,v.default)(300,this.handleScroll),document.addEventListener("scroll",this.throttledScrollHandler)},beforeDestroy:function(){document.removeEventListener("scroll",this.throttledScrollHandler)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-component"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:6}},[a("side-nav",{attrs:{data:s.navsData[s.lang],base:"/"+s.lang+"/component"}})],1),a("el-col",{attrs:{xs:24,sm:18}},[a("router-view",{staticClass:"content"}),a("footer-nav")],1)],1),a("transition",{attrs:{name:"back-top-fade"}},[a("div",{directives:[{name:"show",rawName:"v-show",value:s.showBackToTop,expression:"showBackToTop"}],staticClass:"page-component-up",class:{hover:s.hover},on:{mouseenter:function(t){s.hover=!0},mouseleave:function(t){s.hover=!1},click:s.toTop}},[a("i",{staticClass:"el-icon-caret-top"})])])],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/changelog.vue":39,"./zh-CN/changelog.vue":47};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=38},function(s,t,a){a(40);var l=a(13)(a(42),a(46),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(43),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){var v=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(44)},function(s,t,a){var l=a(13)(null,a(45),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"changelog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changelog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changelog")]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("Fixed RadioButton not working properly when some texts on the page are selected, #4217")]),a("li",[s._v("Fixed the toggle-all checkbox of Tree not working in some browsers, #4107 (by @pengchongfu)")]),a("li",[s._v("Fixed Cascader clear button not working, #4167 (by @pengchongfu)")]),a("li",[s._v("Fixed router switching error when the page has a Table with Tooltips, #4085")]),a("li",[s._v("Fixed Upload not able to remove selected files, #4233")]),a("li",[s._v("Added "),a("code",[s._v("onClick")]),s._v(" attribute for Notification, #4221 (by @amouillard)")]),a("li",[s._v("Fixed binding value of DatePicker becoming undefined when cleared, #4186 (by @pengchongfu)")]),a("li",[s._v("Fixed style error of ColorPicker when nested in a FormItem, #4303")]),a("li",[s._v("Added "),a("code",[s._v("enterable")]),s._v(" attribute for Tooltip, #4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("resetFields")]),s._v(" of Form reassigning form items, #3840 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("max")]),s._v(" and "),a("code",[s._v("min")]),s._v(" attributes for CheckboxGroup, #3700 (by @mdartic)")]),a("li",[s._v("Fixed DatePicker adding one to picked month in some specific days, #3935")]),a("li",[s._v("Added "),a("code",[s._v("closeAll")]),s._v(" method for Message, #3966 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("format-tooltip")]),s._v(" attribute for Slider, #3657 (by @liyanlong)")]),a("li",[s._v("Fixed filter panel of Table being when nested in a Dialog, #4023 (by @liyanlong)")]),a("li",[s._v("Fixed single Select unable to create new items in Vue 2.2.x, #3984")]),a("li",[s._v("Fixed Row disappearing in all breakpoints if its "),a("code",[s._v("span")]),s._v(" is set to 0 in some breakpoints, #4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("Fixed Select not compatible with Vue 2.2.6, #3797")]),a("li",[s._v("Improve performance for rendering tooltip in Table, #3478")]),a("li",[s._v("Add "),a("code",[s._v("tooltip-effect")]),s._v(" property for Table")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("Fixed Switch compatible with SSR, #3752")]),a("li",[s._v("Fixed the time of TimePicker calculating incorrectly, #3479")]),a("li",[s._v("Fixed the week of DatePicker formatting incorrectly, #2774")]),a("li",[s._v("Fixed the week of DatePicker initializing incorrectly, #3058")]),a("li",[s._v("Fixed the events of Popover destroying incorrectly, #3555")]),a("li",[s._v("Fixed InputNumber setInterval, #3514 (by @pengchongfu)")]),a("li",[s._v("Fixed RadioButton css files, #3276")]),a("li",[s._v("Fixed hover style on striped Table, #3696 (by @nicoeg)")]),a("li",[s._v("Fixed Slider's button jumping left issue, #3664 (by @gabrielboliveira)")]),a("li",[s._v("Added "),a("code",[s._v("delete-tag")]),s._v(" event for Select, #3663 (by @pengchongfu)")]),a("li",[s._v("Added "),a("code",[s._v("onPick")]),s._v(" option for DatePicker, #2921")]),a("li",[s._v("Added "),a("code",[s._v("status")]),s._v(" for Step, #3722")]),a("li",[s._v("Added full example for on-demand importing, #3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("show-tooltip")]),s._v(" property for Slider, #3430 (by @gabrielboliveira)")]),a("li",[s._v("Fixed Slider precision not updating when "),a("code",[s._v("step")]),s._v(" is updated, #3475 (by @gabrielboliveira)")]),a("li",[s._v("Fixed a bug that when the window is at the criticality of showing the scrollbar, the popup of Tooltip inside a Table will cause the Table to shake horizontally, #3549")]),a("li",[s._v("Fixed Table automatically shrinking vertically in some conditions, #3539")]),a("li",[s._v("Fixed popup components inside a Popover not hiding when blank area is clicked, #3451 (by @nicoeg)")]),a("li",[s._v("Now Col will hide itself if its "),a("code",[s._v("xs")]),s._v(", "),a("code",[s._v("sm")]),s._v(", "),a("code",[s._v("md")]),s._v(" or "),a("code",[s._v("lg")]),s._v(" is set to 0, #3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("Fixed Carousel not responding to dynamic data updates, #3159")]),a("li",[s._v("Fixed "),a("code",[s._v("cell-dblclick")]),s._v(" of Table not firing issue, #3305")]),a("li",[s._v("Fixed disabled Cascader not displaying initial value, #3297")]),a("li",[s._v("Fixed Slider not correctly displaying initial value when "),a("code",[s._v("show-input")]),s._v(" is true, #3281")]),a("li",[s._v("Fixed Tooltip error in server-side rendering, #3214")]),a("li",[s._v("Fixed "),a("code",[s._v("range-separator")]),s._v(" of DatePicker not working issue, #3378")]),a("li",[s._v("Added support for dynamically update loading text of Loading directive, #3345 (by @imyzf)")]),a("li",[s._v("Added "),a("code",[s._v("http-request")]),s._v(" attribute for Upload, #3387")]),a("li",[s._v("Added support for hiding col if its "),a("code",[s._v("span")]),s._v(" is 0, #3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("Fixed Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("Fixed compatibility issues with Vue 2.2, #3002 #3067 #3097")]),a("li",[s._v("Fixed Cascader's dropdown hiding behind Dialog when nested in a Dialog, #3035")]),a("li",[s._v("Fixed incorrect parameter of "),a("code",[s._v("change")]),s._v(" event of Cascader, #3014")]),a("li",[s._v("Add "),a("code",[s._v("change")]),s._v(" event for ColorPicker, #3049 (by @nicoeg)")]),a("li",[s._v("Fixed "),a("code",[s._v("setCheckedKeys")]),s._v(" method of Tree not working on non-leaf nodes, #2967 (by @rainyLeo)")]),a("li",[s._v("Fixed Tooltip not compatible with "),a("code",[s._v("router-link")]),s._v(", #3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("Fixed SSR regression in version 1.2.0, #2982")]),a("li",[s._v("Fixed horizontal scroll buttons not showing in Tabs, #2974")]),a("li",[s._v("Fixed wrong calculation of height after the "),a("code",[s._v("height")]),s._v(" attribute is updated dynamically in Table, #2979")]),a("li",[s._v("Added "),a("code",[s._v("cell-dblclick")]),s._v(" and "),a("code",[s._v("header-dragend")]),s._v(" events for Table, #2983 #2988")]),a("li",[s._v("Fixed form items showing a left padding inside an inline Form with a specified "),a("code",[s._v("label-width")]),s._v(", #2990")]),a("li",[s._v("Fixed Cascader's dropdown misplaces in some conditions, #2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"new-features"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Cascader and ColorPicker")]),a("li",[s._v("New attributes "),a("code",[s._v("editable")]),s._v(" and "),a("code",[s._v("addable")]),s._v(", and new events "),a("code",[s._v("tab-add")]),s._v(" and "),a("code",[s._v("edit")]),s._v(" for Tabs")]),a("li",[s._v("Language config files in UMD format")]),a("li",[s._v("New events "),a("code",[s._v("node-expand")]),s._v(" and "),a("code",[s._v("node-collapse")]),s._v(" for Tree, #2507 (by @masterzhang)")]),a("li",[s._v("New attribute "),a("code",[s._v("indent")]),s._v(" for Tree, #2713")]),a("li",[s._v("Dialog's title now supports named slot, #2657")]),a("li",[s._v("New attribute "),a("code",[s._v("range")]),s._v(" for Slider, #2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("Attribute "),a("code",[s._v("auto-upload")]),s._v(" that controls if files are uploaded immediately after selecting, and its default value is "),a("code",[s._v("true")])]),a("li",[s._v("Event "),a("code",[s._v("on-change")]),s._v(" that fires when file status changes")]),a("li",[s._v("Attribute "),a("code",[s._v("list-type")]),s._v(" that configures the appearance of file list")])])]),a("li",[s._v("Scroll bars in Autocomplete are made prettier")])]),a("h4",{attrs:{id:"fixes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[s._v("Carousel not responding to contents' update, #2775")]),a("li",[s._v("Numbers in TimePicker not align in some conditions, #2948")]),a("li",[s._v("TimePicker only responding to odd clicks in some conditions, #2884 (by @k55k32)")]),a("li",[s._v("Tabs' display order error when tab-pane is dynamically changed, #2898")]),a("li",[s._v("Menu highlighting menu-item when "),a("code",[s._v("default-active")]),s._v(" is assigned to an non-existent item")]),a("li",[s._v("Collapse's style issue when nested")])]),a("h4",{attrs:{id:"breaking-changes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Tooltip is refactored, no additional HTML tags will be rendered so that the structures of nested component stay unchanged, #2459")]),a("li",[s._v("The backdrop of Dialog now inserts to body element by default, #2556")]),a("li",[s._v("Tabs don't maintain tab instances internally any more, so they should be handled externally via events emitted by Tabs, #2567")]),a("li",[s._v("Upload is refactored\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" renamed to "),a("code",[s._v("file-list")]),s._v(", and "),a("code",[s._v("show-upload-list")]),s._v(" renamed to "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" removed")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("customClass")]),s._v(" of MessageBox affecting follow-up instances, #2472")]),a("li",[s._v("Fixed style issue of Select after being activated when located in a non-default-activated tab pane inside Tabs, #2466")]),a("li",[s._v("Fixed style missing issue for some components when imported on demand")]),a("li",[s._v("Fixed disabled filterable multiple Select still showing dropdown when clicked on a certain area, #2540")]),a("li",[s._v("Restored returning to original sorting in sortable Table columns, #2491")]),a("li",[s._v("Added "),a("code",[s._v("reset.css")]),s._v(" in "),a("code",[s._v("theme-default")]),s._v(", #2378")]),a("li",[s._v("Added "),a("code",[s._v("range-separator")]),s._v(" attribute for DatePicker, #2579")]),a("li",[s._v("Published individual component packages: Table, DatePicker, Loading, Upload and Carousel")]),a("li",[s._v("Add Finnish (@groenroos)")])]),a("h3",{attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("Fixed Menu not activating corresponding menu item after router switching in router mode, #2451")]),a("li",[s._v("Fixed "),a("code",[s._v("value")]),s._v(" attribute of Collapse not supporting "),a("code",[s._v("Number")]),s._v(" typed value, #2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("Fixed Input Number triggering "),a("code",[s._v("change")]),s._v(" event when bound value is changed programmatically, #2329")]),a("li",[s._v("Fixed Menu not responding to "),a("code",[s._v("$router")]),s._v(" changing in router mode, #2391")]),a("li",[s._v("Fixed Menu and Tree expanding state malfunctioning when clicked multiple times quickly, #2354")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event triggering mechanism of Input Number and Checkbox Group, now they do not fire when bound value is changed programmatically")]),a("li",[s._v("Added "),a("code",[s._v("on-icon-click")]),s._v(" attribute for Input, #2414")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Radio Group, #2411")]),a("li",[s._v("Added "),a("code",[s._v("accordion")]),s._v(" attribute for Tree, #2408")]),a("li",[s._v("Added "),a("code",[s._v("show-message")]),s._v(" attribute for Form, #2356")]),a("li",[s._v("Fixed sort clicking area of Table, updated default sorting related APIs, #2309 #2405 (by @njleonzhang)")]),a("li",[s._v("Fixed "),a("code",[s._v("firstDayOfWeek")]),s._v(" not working in ranged typed of DatePicker, #2353")]),a("li",[s._v("Fixed DatePicker displaying 1970 when initial value is null, #2388")]),a("li",[s._v("Fixed "),a("code",[s._v("filteredValue")]),s._v(" attribute for Table, #2348")]),a("li",[s._v("Fixed scrollable Table's style with empty data, #2396")]),a("li",[s._v("Added "),a("code",[s._v("beforeClose")]),s._v(" attribute for MessageBox, #2204")]),a("li",[s._v("Fixed filterable Select not showing dropdown when triangle icon is clicked, #2389")])]),a("p",[s._v("Breaking change")]),a("ul",[a("li",[s._v("The "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes added in 1.1.3 are now merged into an object-typed attribute")])]),a("h3",{attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("Fixed DatePicker not firing change event when cleared for the first time upon page load, #2167")]),a("li",[s._v("Fixed DatePicker year calculating error when choosing the next year, #2152")]),a("li",[s._v("Added "),a("code",[s._v("default-sort-prop")]),s._v(" and "),a("code",[s._v("default-sort-order")]),s._v(" attributes for Table, #2182 (by @njleonzhang)")]),a("li",[s._v("Fixed filterable Select filtering other options with initial value, #2196")]),a("li",[s._v("Added custom i18n processing, making Element compatible with i18n plugins other than "),a("code",[s._v("vue-i18n")]),s._v(", #2129")]),a("li",[s._v("Added "),a("code",[s._v("resize")]),s._v(" attribute for Input, #2263 (by @Kingwl)")]),a("li",[s._v("Fixed Autocomplete not hiding dropdown when blurred, #2247")]),a("li",[s._v("Fixed style issues with nested Tabs, #2212 (by @Kingwl)")]),a("li",[s._v("Fixed Tabs' tab bar locating error when non-first item is initially activated, #2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("sortable")]),s._v(" and "),a("code",[s._v("fixed")]),s._v(" attribute of Table not working in Vue 2.1.7+")]),a("li",[s._v("Fixed Input Number not resetting on blur when input with illegal values, #2098")]),a("li",[s._v("Removed "),a("code",[s._v("title")]),s._v(" scoped slot of Collapse, and added "),a("code",[s._v("title")]),s._v(" named slot, #2100")]),a("li",[s._v("Fixed range selection in TimePicker not working issue")]),a("li",[s._v("Fixed Tabs' active tab switching when a non-active tab is removed, #2106")]),a("li",[s._v("Fixed console error reporting when navigating Select with arrow keys, #2120")]),a("li",[s._v("Fixed incorrect validation timing of filterable Select in Form, #2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("Fixed compatibility issue with latest Vue due to compilation")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"new-features-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#new-features-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" New features:")]),a("ul",[a("li",[s._v("Two brand new components: Carousel and Collapse")]),a("li",[s._v("SSR supported")]),a("li",[s._v("Scrollbars' style inside components is upgraded")]),a("li",[s._v("Table now supports custom templates via "),a("a",{
-attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("scoped slots")]),s._v("; the good old "),a("code",[s._v("inline-template")]),s._v(" is still compatible, but it's no longer recommended and is likely to be removed in the future")]),a("li",[s._v("Table now supports expandable rows")]),a("li",[s._v("DatePicker now supports specifying the first day of week")]),a("li",[s._v("TimeSelect now supports "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete now supports "),a("code",[s._v("popper-class")])]),a("li",[s._v("To customize template of Tab-Pane, now you can use the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("label")])])]),a("h4",{attrs:{id:"fixes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixes:")]),a("ul",[a("li",[a("code",[s._v("change")]),s._v(" event of DatePicker incorrectly triggering multiple times, #2070")]),a("li",[s._v("Width shaking of tab-pane while initializing, #1883")])]),a("h4",{attrs:{id:"breaking-changes-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breaking-changes-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breaking changes:")]),a("ul",[a("li",[s._v("Only compatible with Vue 2.1.6 and beyond")]),a("li",[s._v("Parameters of Form validateField() methods are updated")]),a("li",[s._v("Alert's render-content attribute is removed, and now you can pass your custom template via default slot")]),a("li",[s._v("The box models of Input and Select are updated from "),a("code",[s._v("block")]),s._v(" to "),a("code",[s._v("inline-block")])]),a("li",[s._v("The box model of Tabs is updated from "),a("code",[s._v("inline-block")]),s._v(" to "),a("code",[s._v("block")]),s._v(", and Tab-Pane's "),a("code",[s._v("label-content")]),s._v(" attribute is removed")]),a("li",[s._v("The dropdown of Autocomplete now inserts directly to "),a("code",[s._v("<body>")]),s._v(", not "),a("code",[s._v("<el-autocomplete>")]),s._v(" any more")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("Fixed DatePicker incorrectly triggering input event, #1834")]),a("li",[s._v("Fixed Tree reporting "),a("code",[s._v("event is undefined")]),s._v(" error in Firefox, #1945")]),a("li",[s._v("Added "),a("code",[s._v("change")]),s._v(" event for DatePicker, whose parameter is the formatted value, #1841")]),a("li",[s._v("Added "),a("code",[s._v("header-align")]),s._v(" attribute for Table, #1424")]),a("li",[s._v("Fixed single select Table's highlight style not removing when data is removed, #1890")]),a("li",[s._v("Fixed filterable Select lagging issue with more options, #1933")]),a("li",[s._v("Fixed multiple disabled Select not disabling removing selected options issue, #2001")]),a("li",[s._v("Fixed Col style not working in "),a("code",[s._v("xs")]),s._v(", #2011")]),a("li",[s._v("Added "),a("code",[s._v("value")]),s._v(" attribute for Tab, #2008")]),a("li",[s._v("Fixed InputNumber "),a("code",[s._v("change")]),s._v(" event incorrectly firing multiple times in some conditions, #1999")]),a("li",[s._v("Added "),a("code",[s._v("clearable")]),s._v(" attribute for DatePicker, #1994")]),a("li",[s._v("Fixed Form always passing validation in async mode, #1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("Fixed nested Popup from event bubbling, #1677")]),a("li",[s._v("Fixed the issue that datetimerange-typed DatePicker can not select time, #1758")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" event not firing correctly of Slider, #1809")]),a("li",[s._v("Fixed Loading's spinner splitting while animating in some conditions, #1786")]),a("li",[s._v("Added "),a("code",[s._v("loading-text")]),s._v(", "),a("code",[s._v("no-data-text")]),s._v(", "),a("code",[s._v("no-match-text")]),s._v(" properties and "),a("code",[s._v("visible-change")]),s._v(" event for Select, #1849")]),a("li",[s._v("Added "),a("code",[s._v("popper-class")]),s._v(" property for DatePicker, Select and Tooltip, #1806")]),a("li",[s._v("Added "),a("code",[s._v("expand-on-click-node")]),s._v(", "),a("code",[s._v("current-node-key")]),s._v(" properties and "),a("code",[s._v("current-change")]),s._v(" event for Tree, #1805 #1807")]),a("li",[s._v("Added the third parameter "),a("code",[s._v("column")]),s._v(" for Table's "),a("code",[s._v("row-click")]),s._v(" event, #1808")]),a("li",[s._v("Fixed an error when pages with Checkbox switching routes due to "),a("code",[s._v("computed")]),s._v(" property being cached, #1860")]),a("li",[s._v("Added the tab instance as a parameter for TabPanel's "),a("code",[s._v("label-content")]),s._v(" render function, #1857")]),a("li",[s._v("Added infinite submenus support for NavMenu in vertical mode, #1851")]),a("li",[s._v("Updated Checkbox so that it works without a binding value, #1818")]),a("li",[s._v("Added "),a("code",[s._v("onProgress")]),s._v(" hook for Progress, #1782")]),a("li",[s._v("Fixed Tab not updating active bar with dynamic label, #1761")]),a("li",[s._v("Added "),a("code",[s._v("filter-change")]),s._v(" event for Table, and "),a("code",[s._v("column-key")]),s._v(" property for TableColumn, #1876")]),a("li",[s._v("Added "),a("code",[s._v("hide-on-click")]),s._v(" property for Dropdown, #1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("Fixed DatePicker dropdown appears when hovering on the clear button")]),a("li",[s._v("Fixed DatePicker displays a wrong date when its initial value is null")]),a("li",[s._v("Added "),a("code",[s._v("row-contextmenu")]),s._v(" event and "),a("code",[s._v("max-height")]),s._v(" attribute for Table, #1663 #1674")]),a("li",[s._v("Added "),a("code",[s._v("customClass")]),s._v(" attribute for MessageBox, #1707")]),a("li",[s._v("Added "),a("code",[s._v("iconClass")]),s._v(" and "),a("code",[s._v("customClass")]),s._v(" attributes for Message and Notification, #1671")]),a("li",[s._v("Added empty slot for Table, #1737")]),a("li",[s._v("Added old value as a second parameter in change event for InputNumber")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" attribute for Tabs, #1620")]),a("li",[s._v("Added "),a("code",[s._v("size")]),s._v(" attribute for DatePicker input, #1440")]),a("li",[s._v("Fixed "),a("code",[s._v("datetimerange")]),s._v(" DatePicker's panel not showing correct date if initial value is present, #1129")]),a("li",[s._v("Fixed DatePicker display error when switching year, #1607")]),a("li",[s._v("Fixed DatePicker not triggering clickoutside when its icon is clicked, #1604")]),a("li",[s._v("Fixed TimePicker not refreshing value after clicking the clear button, #1583")]),a("li",[s._v("Fixed remote filterable Select display error when its value is an object, #1593")]),a("li",[s._v("Fixed Select's clear button still working bug when it's "),a("code",[s._v("disabled")]),s._v(", #1619")]),a("li",[s._v("Fixed Switch's background color error when its "),a("code",[s._v("disabled")]),s._v(" attribute is dynamically changed, #1627")]),a("li",[s._v("Fixed some style bugs of Table")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("Fixed Select with async options and binding value displaying value instead of label, #1537")]),a("li",[s._v("Fixed Select reports an error when initial binding value is an empty object, #1533")]),a("li",[s._v("Fixed remote filtering Select not showing dropdown in some conditions, #1531")]),a("li",[s._v("Fixed Slider sometimes drifting a small distance after releasing dragging, #1546")]),a("li",[s._v("Fixed Steps style in IE9, #1543")]),a("li",[s._v("Added Upload generating URL for all file types, #1530")]),a("li",[s._v("Fixed TimeSelect style, removed flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("controls")]),s._v(" attribute for Input Number, #1473")]),a("li",[s._v("Fixed Checkbox Group and Radio Group async issue, #1511 #1514")]),a("li",[s._v("Added "),a("code",[s._v("offset")]),s._v(" attribute for Notification, #1419")]),a("li",[s._v("Fixed Slider's value not accurate issue when dragging rapidly, #1458")]),a("li",[s._v("Fixed Slider incorrectly showing multiple decimal digits issue, #1450")]),a("li",[s._v("Fixed Select's binding value and displayed value not in sync in some conditions")]),a("li",[s._v("Added "),a("code",[s._v("multiple-limit")]),s._v(" and "),a("code",[s._v("allow-create")]),s._v(" attributes for Select")]),a("li",[s._v("Fixed Tree leaf nodes' triangle icon not disappear when expanded, #1438")]),a("li",[s._v("Fixed Tree's view not updating issue after fetching child nodes' data, #1439")]),a("li",[s._v("Fixed some Table's style issues in windows system, #1464 #1507")]),a("li",[s._v("Fixed Table's first column's label not showing issue when grouping table head is used with fixed columns, #1451")]),a("li",[s._v("Added "),a("code",[s._v("row-dblclick")]),s._v(" event for Table, #1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("Fixed "),a("code",[s._v("currentPage")]),s._v(" of Pagination not working in some cases, #1336")]),a("li",[s._v("Fixed "),a("code",[s._v("month")]),s._v(" and "),a("code",[s._v("disabledDate")]),s._v(" DatePicker's view not refreshing issue when switching year, #1158")]),a("li",[s._v("Fixed "),a("code",[s._v("readonly")]),s._v(" DatePicker clear button not disabled issue, #1238")]),a("li",[s._v("Fixed Slider not working when binding value is "),a("code",[s._v("NaN")]),s._v(" or "),a("code",[s._v("step")]),s._v(" is smaller than 1, #1239 #1282")]),a("li",[s._v("Added multi-header for Table, #1312")]),a("li",[s._v("Added "),a("code",[s._v("rowStyle")]),s._v(" for Table, #1348")]),a("li",[s._v("Fixed some attributes of TableColumn can not dynamically assigned issue, #1314")]),a("li",[s._v("Added "),a("code",[s._v("filter-node-method")]),s._v(" attribute and "),a("code",[s._v("filter")]),s._v(" method for Tree, #1257")]),a("li",[s._v("Added "),a("code",[s._v("getCheckedKeys")]),s._v(" and "),a("code",[s._v("setCheckedKeys")]),s._v(" methods for Tree, #1254")]),a("li",[s._v("Added deep nesting support for Checkbox/Radio inside Checkbox/Radio Group, #1152")]),a("li",[s._v("Fixed Popper not triggering destroy issue when keep-alive, #1359")]),a("li",[s._v("Added object deep validation for Form, #1363")]),a("li",[s._v("Added "),a("code",[s._v("append")]),s._v(" and "),a("code",[s._v("prepend")]),s._v(" for Autocomplete, #1369")]),a("li",[s._v("Added dynamic "),a("code",[s._v("pageSizes")]),s._v(" support for Pagination, #1372")]),a("li",[s._v("Added custom style API for checked buttons in Radio Button, #1380")]),a("li",[s._v("Added assigning title via slot for Menu Group, #1382")]),a("li",[s._v("Fixed DatePicker year switching bug, #1385")]),a("li",[s._v("Added uploaded file list API for Upload, #1393")]),a("li",[s._v("Added multi-type support for "),a("code",[s._v("label")]),s._v(" attribute of Checkbox, #1400")]),a("li",[s._v("Added "),a("code",[s._v("setChecked")]),s._v(" method for Tree, #1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("Added "),a("code",[s._v("context")]),s._v(" for Table to specify which context to access inside of table columns, #1161")]),a("li",[s._v("Added multiple languages")]),a("li",[s._v("Fixed language's dynamic switching issue, #1160")]),a("li",[s._v("Added "),a("code",[s._v("render-content")]),s._v(" for Alert, #568")]),a("li",[s._v("Added styles for focused Button, #982")]),a("li",[s._v("Fixed "),a("code",[s._v("change")]),s._v(" triggering timing in Switch, #1162")]),a("li",[s._v("Fixed TimeSelect being disabled when start time is set to "),a("code",[s._v("00:00")]),s._v(", #676")]),a("li",[s._v("Added "),a("code",[s._v("show-header")]),s._v(" attribute and "),a("code",[s._v("header-click")]),s._v(" method for Table, #1195")]),a("li",[s._v("Improved "),a("code",[s._v("height")]),s._v(" attribute for Table when set to a string, #1195")]),a("li",[s._v("Fixed "),a("code",[s._v("selection-change")]),s._v(" of Table not triggering in some cases, #1198")]),a("li",[s._v("Fixed Table's fixed columns not disappear when "),a("code",[s._v("fixed")]),s._v(" attribute is dynamically changed, #1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("Fixed Pagination improperly triggering multiple "),a("code",[s._v("current-change")]),s._v(" events")]),a("li",[s._v("Fixed Switch style when nested in a Form, #967")]),a("li",[s._v("Fixed Loading locks scroll of "),a("code",[s._v("body")]),s._v(" in specific scenarios, #968")]),a("li",[a("code",[s._v("span")]),s._v(" of Col is no longer a required attribute, and its default value is "),a("code",[s._v("24")]),s._v(" if omitted")]),a("li",[s._v("Added "),a("code",[s._v("disabled")]),s._v(" and "),a("code",[s._v("editable")]),s._v(" attribute for DatePicker, #976")]),a("li",[s._v("Fixed DatePicker readonly with native behavior, #976")]),a("li",[s._v("Added "),a("code",[s._v("close")]),s._v(" method for Message and Notification to manually close an instance")]),a("li",[s._v("Added clear value feature for DatePicker, #759")]),a("li",[s._v("Fixed Form reports an error when resetting a Date typed field, #937")]),a("li",[s._v("Fixed Table render error using vue-loader 9.9.0")]),a("li",[s._v("Added "),a("code",[s._v("align-center")]),s._v(" attribute for Step, #994")]),a("li",[s._v("Fixed Upload missing Progress component, #1013")]),a("li",[s._v("Layout now supports responsive layout")]),a("li",[s._v("Added "),a("code",[s._v("show-close")]),s._v(" for Dialog")]),a("li",[s._v("Fixed an error when "),a("code",[s._v("vue-i18n")]),s._v(" is imported but not configured, #973")]),a("li",[s._v("Fixed DatePicker not refresh view with an initial value, #1050")]),a("li",[s._v("Fixed DiatePicker not refresh year when switched in month picker, #1070")]),a("li",[s._v("Added $loading service")]),a("li",[s._v("Added "),a("code",[s._v("manual")]),s._v(" trigger in Popover")]),a("li",[s._v("Added props: "),a("code",[s._v("nodeKey")]),s._v(", "),a("code",[s._v("emptyText")]),s._v(", "),a("code",[s._v("checkStrictly")]),s._v(", "),a("code",[s._v("defaultExpandAll")]),s._v(", "),a("code",[s._v("autoExpandParent")]),s._v(", "),a("code",[s._v("defaultCheckedKeys")]),s._v(", "),a("code",[s._v("defaultExpandedKeys")]),s._v(" and method: "),a("code",[s._v("setCheckedNodes")]),s._v(" for Tree")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("p",[s._v("Element 1.0.0 released.")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n    Changelog\n  ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){a(48);var l=a(13)(a(50),a(54),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(51),e=l(n);t.default={components:{ChangeLog:e.default},data:function(){return{count:3}},mounted:function(){var s=this.$refs.changeLog,t=s.$el.children,a=t[1].querySelector("a");a&&a.remove();for(var l=t[1].textContent.trim(),n='<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>",e=t.length,i=2;i<e;i++){var v=t[i];a=t[i].querySelector("a"),a&&a.remove(),"H3"!==v.tagName?n+=t[i].outerHTML:(l=t[i].textContent.trim(),n+='</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v'+l+'" target="_blank">'+l+"</a></h3>")}n=n.replace(/#(\d+)/g,'<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>'),n=n.replace(/@(\w+)/g,'<a href="https://github.com/$1" target="_blank">@$1</a>'),this.$refs.timeline.innerHTML=n+"</li>",s.$el.remove()}}},function(s,t,a){s.exports=a(52)},function(s,t,a){var l=a(13)(null,a(53),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"geng-xin-ri-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-xin-ri-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更新日志")]),a("h3",{attrs:{id:"1-2-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.9")]),a("p",[a("em",[s._v("2017-04-19")])]),a("ul",[a("li",[s._v("修复在有文本选中的情况下，RadioButton 需要多次点击才能生效的问题，#4217")]),a("li",[s._v("修复 Tree 的多选框在某些浏览器下不能全选的问题，#4107（by @pengchongfu）")]),a("li",[s._v("修复可清空的 Cascader 清空按钮无效的问题，#4167（by @pengchongfu）")]),a("li",[s._v("修复带有 Tooltip 的 Table 在路由切换时有时会报错的问题，#4085")]),a("li",[s._v("修复 Upload 无法移除待上传的文件的问题，#4233")]),a("li",[s._v("新增 Notification 的 "),a("code",[s._v("onClick")]),s._v(" 属性，#4221（by @amouillard）")]),a("li",[s._v("修复 DatePicker 在清空后值变为 undefined 的问题，#4186（by @pengchongfu）")]),a("li",[s._v("修复 FormItem 中 ColorPicker 的样式错误，#4303")]),a("li",[s._v("新增 Tooltip 的 "),a("code",[s._v("enterable")]),s._v(" 属性，#4210")])]),a("h3",{attrs:{id:"1-2-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.8")]),a("p",[a("em",[s._v("2017-04-07")])]),a("ul",[a("li",[s._v("修复 Form 的 "),a("code",[s._v("resetFields")]),s._v(" 会给表单项重新赋值的问题，#3840（by @pengchongfu）")]),a("li",[s._v("新增 CheckboxGroup 的 "),a("code",[s._v("max")]),s._v(" 和 "),a("code",[s._v("min")]),s._v(" 属性，#3700（by @mdartic）")]),a("li",[s._v("修复 DatePicker 在一些特定的日期会导致月份 +1 的问题，#3935")]),a("li",[s._v("新增 Message 的 "),a("code",[s._v("closeAll")]),s._v(" 方法，#3966（by @pengchongfu）")]),a("li",[s._v("新增 Slider 的 "),a("code",[s._v("format-tooltip")]),s._v(" 属性，#3657（by @liyanlong）")]),a("li",[s._v("修复内嵌于 Dialog 中的 Table 的筛选面板被遮挡的问题，#4023（by @liyanlong）")]),a("li",[s._v("修复单选的 Select 在 Vue 2.2.x 下无法创建条目的问题，#3984")]),a("li",[s._v("修复某些断点下 "),a("code",[s._v("span")]),s._v(" 为 0 的 Row 在其他断点下也会消失的问题，#4053")])]),a("h3",{attrs:{id:"1-2-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.7")]),a("p",[a("em",[s._v("2017-03-29")])]),a("ul",[a("li",[s._v("修复 Select 不兼容 Vue 2.2.6 的问题，#3797")]),a("li",[s._v("优化 Table 的 Tooltip 渲染性能，#3478")]),a("li",[s._v("新增 Table "),a("code",[s._v("tooltip-effect")]),s._v(" 属性")])]),a("h3",{attrs:{id:"1-2-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.6")]),a("p",[a("em",[s._v("2017-03-28")])]),a("ul",[a("li",[s._v("修复 Switch 样式不兼容 vue SSR，#3752")]),a("li",[s._v("修复 TimePicker 日期计算错误，#3479")]),a("li",[s._v("修复 DatePicker 格式化 week 类型错误，#2774")]),a("li",[s._v("修复 DatePicker 周选择器默认值，#3058")]),a("li",[s._v("修复 Popover 销毁时未正确清除事件，#3555")]),a("li",[s._v("修复 InputNumber 鼠标左右键一起按下会导致值一直自增加，#3514（by @pengchongfu）")]),a("li",[s._v("修复 RadioButton 样式文件引入但无样式，#3276")]),a("li",[s._v("修复 Table 的 hover 样式，#3696（by @nicoeg）")]),a("li",[s._v("修复 Slider 跳动问题，#3664（by @gabrielboliveira）")]),a("li",[s._v("新增 Select "),a("code",[s._v("delete-tag")]),s._v(" 事件 #3663（by @pengchongfu）")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("onPick")]),s._v(" 选项，#2921")]),a("li",[s._v("新增 Steps 可分别设置 step 的状态（status）和样式调整，#3722")]),a("li",[s._v("新增完整的按需引入组件的文档，#3302")])]),a("h3",{attrs:{id:"1-2-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.5")]),a("p",[a("em",[s._v("2017-03-19")])]),a("ul",[a("li",[s._v("新增 Slider 的 "),a("code",[s._v("show-tooltip")]),s._v(" 属性，#3430（by @gabrielboliveira）")]),a("li",[s._v("修复动态改变 Slider "),a("code",[s._v("step")]),s._v(" 的精度时，其值的精度不随之改变的问题，#3475（by @gabrielboliveira）")]),a("li",[s._v("修复含有 Tooltip 的 Table 在当前窗口高度临界于出现滚动条时，弹出 Tooltip 会导致 Table 宽度抖动的问题，#3549")]),a("li",[s._v("修复 Table 在某些情况下高度自动往复变小的问题，#3539")]),a("li",[s._v("修复 Popover 中的弹出类组件在点击 Popover 的空白区域时不隐藏的问题，#3451（by @nicoeg）")]),a("li",[s._v("现在 "),a("code",[s._v("xs")]),s._v("、"),a("code",[s._v("sm")]),s._v("、"),a("code",[s._v("md")]),s._v("、"),a("code",[s._v("lg")]),s._v(" 值为 0 的 Col 会被正确隐藏，#3564")])]),a("h3",{attrs:{id:"1-2-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.4")]),a("p",[a("em",[s._v("2017-03-09")])]),a("ul",[a("li",[s._v("修复 Carousel 有时不响应数据动态更新的问题，#3159")]),a("li",[s._v("修复 Table 的 "),a("code",[s._v("cell-dblclick")]),s._v(" 事件无法触发的问题，#3305")]),a("li",[s._v("修复禁用的 Cascader 不显示默认值的问题，#3297")]),a("li",[s._v("修复 Slider 在 "),a("code",[s._v("show-input")]),s._v(" 时初始值不正确的问题，#3281")]),a("li",[s._v("修复 Tooltip 在服务端渲染时报错的问题，#3214")]),a("li",[s._v("修复 DatePicker 的 "),a("code",[s._v("range-separator")]),s._v(" 属性有时无效的问题，#3378")]),a("li",[s._v("新增指令式调用 Loading 时响应动态加载文案的功能，#3345（by @imyzf）")]),a("li",[s._v("新增 Upload 的 "),a("code",[s._v("http-request")]),s._v(" 参数，用于实现覆盖默认的上传行为，#3387")]),a("li",[s._v("新增 Col 支持将 "),a("code",[s._v("span")]),s._v(" 值设为 0 时隐藏该列的功能，#3313")])]),a("h3",{attrs:{id:"1-2-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.3")]),a("p",[a("em",[s._v("2017-03-01")])]),a("ul",[a("li",[s._v("修复 Tooltip, #3152")])]),a("h3",{attrs:{id:"1-2-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.2")]),a("p",[a("em",[s._v("2017-02-28")])]),a("ul",[a("li",[s._v("修复若干组件与 Vue 2.2 不兼容的问题，#3002 #3067 #3097")]),a("li",[s._v("修复嵌套在 Dialog 内的 Cascader 下拉框有时出现在 Dialog 之后的问题，#3035")]),a("li",[s._v("修复 Cascader 的 "),a("code",[s._v("change")]),s._v(" 事件参数在某些情况下不正确的问题，#3014")]),a("li",[s._v("新增 ColorPicker 的 "),a("code",[s._v("change")]),s._v(" 事件，#3049（by @nicoeg）")]),a("li",[s._v("修复 Tree 的 "),a("code",[s._v("setCheckedKeys")]),s._v(" 方法对非叶子节点无效的问题，#2967（by @rainyLeo）")]),a("li",[s._v("修复 Tooltip 和 "),a("code",[s._v("router-link")]),s._v(" 共用报错的问题，#3143")])]),a("h3",{attrs:{id:"1-2-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.1")]),a("p",[a("em",[s._v("2017-02-23")])]),a("ul",[a("li",[s._v("修复用于 SSR 时报错的问题，#2982")]),a("li",[s._v("修复 Tabs 左右滚动按钮无法出现的问题，#2974")]),a("li",[s._v("修复 Table 在动态改变 "),a("code",[s._v("height")]),s._v(" 属性后高度计算错误的问题，#2979")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("cell-dblclick")]),s._v(" 和 "),a("code",[s._v("header-dragend")]),s._v(" 事件，#2983 #2988")]),a("li",[s._v("修复行内表单在指定 "),a("code",[s._v("label-width")]),s._v(" 时表单元素出现左边距的问题，#2990")]),a("li",[s._v("修复 Cascader 在某些情况下弹出框位置不正确的问题，#2992")])]),a("h3",{attrs:{id:"1-2-0-lithium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-2-0-lithium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.2.0 Lithium")]),a("p",[a("em",[s._v("2017-02-22")])]),a("h4",{attrs:{id:"xin-te-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Cascader、ColorPicker 组件")]),a("li",[s._v("Tabs 新增 "),a("code",[s._v("editable")]),s._v(" 和 "),a("code",[s._v("addable")]),s._v(" 属性以及 "),a("code",[s._v("tab-add")]),s._v(" 和 "),a("code",[s._v("edit")]),s._v(" 事件")]),a("li",[s._v("新增 UMD 格式的语言包文件")]),a("li",[s._v("Tree 新增 "),a("code",[s._v("node-expand")]),s._v(" 和 "),a("code",[s._v("node-collapse")]),s._v(" 事件，#2507（by @masterzhang）")]),a("li",[s._v("Tree 新增 "),a("code",[s._v("indent")]),s._v(" 属性，#2713")]),a("li",[s._v("Dialog 的标题支持以具名 slot 的方式传入，#2657")]),a("li",[s._v("Slider 新增 "),a("code",[s._v("range")]),s._v(" 属性，支持范围选择，#2751")]),a("li",[s._v("Upload\n"),a("ul",[a("li",[s._v("新增 "),a("code",[s._v("auto-upload")]),s._v(" 属性，用以控制是否在选择图片后自动上传，默认为开启")]),a("li",[s._v("新增 "),a("code",[s._v("on-change")]),s._v(" 钩子函数在文件状态改变时会调用")]),a("li",[s._v("新增 "),a("code",[s._v("list-type")]),s._v(" 设置文件列表展示外观")])])]),a("li",[s._v("Autocomplete 滚动条使用 el-scrollbar")])]),a("h4",{attrs:{id:"xiu-fu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("Carousel 不响应内容动态更新的问题，#2775")]),a("li",[s._v("TimePicker 在某些情况下数字位置不居中的问题，#2948")]),a("li",[s._v("TimePicker 在某些情况下范围选择时仅响应偶数次点击的问题，#2884（by @k55k32）")]),a("li",[s._v("Tab 修复 tab-pane 动态显示时插入顺序问题, #2898")]),a("li",[s._v("Menu 修复将 "),a("code",[s._v("default-active")]),s._v(" 设置为不存在的 index 时 menu-item 还会高亮的问题")]),a("li",[s._v("Collapse 修复嵌套使用时的样式问题")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新:")]),a("ul",[a("li",[s._v("重构 Tooltip，不再生成额外的 HTML 标签，确保被 tooltip 包裹的组件的结构不变，#2459")]),a("li",[s._v("Dialog 的遮罩层现在默认插入至 body 元素上，#2556")]),a("li",[s._v("Tabs 现在内部不再维护 tab 实例，需要在外部通过相关事件去处理, #2567")]),a("li",[s._v("Upload 重构升级\n"),a("ul",[a("li",[a("code",[s._v("default-file-list")]),s._v(" 属性更名为 "),a("code",[s._v("file-list")]),s._v(", "),a("code",[s._v("show-upload-list")]),s._v(" 属性更名为 "),a("code",[s._v("show-file-list")])]),a("li",[a("code",[s._v("thumbnail-mode")]),s._v(" 属性被移除")])])])]),a("h3",{attrs:{id:"1-1-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.6")]),a("p",[a("em",[s._v("2017-01-23")])]),a("ul",[a("li",[s._v("修复 MessageBox 的 "),a("code",[s._v("customClass")]),s._v(" 会影响后续实例的问题，#2472")]),a("li",[s._v("修复位于 Tabs 非默认激活页中的 Select 在激活后样式不正确的问题，#2466")]),a("li",[s._v("修复一些组件在单独引入时样式缺失的问题")]),a("li",[s._v("修复被禁用的可搜索多选 Select 点击特定区域仍能打开下拉框的问题，#2540")]),a("li",[s._v("修复 Table 排序支持返回原始顺序，#2491")]),a("li",[s._v("新增 "),a("code",[s._v("reset.css")]),s._v(" 在 "),a("code",[s._v("theme-default")]),s._v(" 内，#2378")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("range-separator")]),s._v(" 属性，#2579")]),a("li",[s._v("发布单独组件包：Table，DatePicker，Loading，Upload，Carousel")]),a("li",[s._v("新增芬兰语（@groenroos）")])]),a("h3",{attrs:{id:"1-1-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.5")]),a("p",[a("em",[s._v("2017-01-17")])]),a("ul",[a("li",[s._v("修复 Menu 在启用 router 模式下点击菜单跳转后没有激活对应菜单项的问题，#2451")]),a("li",[s._v("新增 Collapse "),a("code",[s._v("value")]),s._v(" 属性增加对 "),a("code",[s._v("Number")]),s._v(" 类型的支持，#2455")])]),a("h3",{attrs:{id:"1-1-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.4")]),a("p",[a("em",[s._v("2017-01-16")])]),a("ul",[a("li",[s._v("修复 Input Number 在主动改变绑定值时也会触发 change 事件的问题，#2329")]),a("li",[s._v("修复 Menu 在启用 router 模式后没有对 "),a("code",[s._v("$route")]),s._v(" 变化进行响应的问题，#2391")]),a("li",[s._v("修复 Menu、Tree 在快速点击时出现展开状态错误的问题，#2354")]),a("li",[s._v("修复 Input Number 和 Checkbox Group 的 change 事件触发时机，现在主动改变绑定值时不触发该事件。")]),a("li",[s._v("新增 Input 增加点击图标后的钩子函数属性，#2414")]),a("li",[s._v("新增 Radio Group 的 "),a("code",[s._v("disabled")]),s._v(" 属性，#2411")]),a("li",[s._v("新增 Tree 增加 "),a("code",[s._v("accordion")]),s._v(" 属性，#2408")]),a("li",[s._v("新增 Form 增加 "),a("code",[s._v("show-message")]),s._v(" 属性，#2356")]),a("li",[s._v("修复 Table 排序点击区域，调整默认排序的 API，#2309 #2405（by @njleonzhang）")]),a("li",[s._v("修复 DatePicker firstDayOfWeek 在范围类型中无法使用，#2353")]),a("li",[s._v("修复 DatePicker 初始值为 null 显示 1970，#2388")]),a("li",[s._v("修复 Table 缺少 filteredValue 属性，#2348")]),a("li",[s._v("修复 Table 空数据时且存在滚动条时的样式，#2396")]),a("li",[s._v("新增 MessageBox 的 "),a("code",[s._v("beforeClose")]),s._v(" 属性，#2204")]),a("li",[s._v("修复可过滤的 Select 点击三角图标不显示下拉框的问题，#2389")])]),a("p",[s._v("非兼容性更新")]),a("ul",[a("li",[s._v("1.1.3 新增的 "),a("code",[s._v("default-sort-prop")]),s._v(" 和 "),a("code",[s._v("default-sort-order")]),s._v(" 属性现在合并为一个对象类型属性")])]),a("h3",{attrs:{id:"1-1-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.3")]),a("p",[a("em",[s._v("2017-01-09")])]),a("ul",[a("li",[s._v("修复 DatePicker 页面加载后首次清空不会触发 "),a("code",[s._v("change")]),s._v(" 事件，#2167")]),a("li",[s._v("修复 DatePicker 选择下一年时，年份计算错误，#2152")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("default-sort-prop")]),s._v(" 和 "),a("code",[s._v("default-sort-order")]),s._v(" 属性，#2182（by @njleonzhang）")]),a("li",[s._v("修复有默认值的可搜索 Select 其他数据被过滤的问题，#2196")]),a("li",[s._v("新增自定义 i18n 处理方法，方便和除了 "),a("code",[s._v("vue-i18n")]),s._v(" 之外的插件使用，#2129")]),a("li",[s._v("新增 Input "),a("code",[s._v("resize")]),s._v(" 属性，#2263（by @Kingwl）")]),a("li",[s._v("修复 Autocomplete 在 blur 事件触发时没有隐藏下拉列表的问题，#2247")]),a("li",[s._v("修复 Tabs 嵌套使用时的样式问题，#2212（by @Kingwl）")]),a("li",[s._v("修复 Tabs 默认激活非第一项时 tabBar 的显示位置不正确的问题，#2192")])]),a("h3",{attrs:{id:"1-1-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.2")]),a("p",[a("em",[s._v("2016-12-30")])]),a("ul",[a("li",[s._v("修复 Vue 2.1.7 升级导致的 Table "),a("code",[s._v("sortable")]),s._v(" 和 "),a("code",[s._v("fixed")]),s._v(" 无法使用的问题")]),a("li",[s._v("修正 Input Number 在手动输入越界值时，blur 触发时没有重置为原来的值的问题，#2098")]),a("li",[s._v("移除 Collapse 的 "),a("code",[s._v("title")]),s._v(" scoped slot, 并新增 "),a("code",[s._v("title")]),s._v(" named slot，#2100")]),a("li",[s._v("修复 TimePicker 范围选择无法使用的问题")]),a("li",[s._v("修复 Tabs 删除非当前激活的 tab 后，当前激活的 tab 变化的问题，#2106")]),a("li",[s._v("修复 Select 在使用方向键导航时控制台报错的问题，#2120")]),a("li",[s._v("修复 Form 中可搜索的 Select 验证时机错误的问题，#2120")])]),a("h3",{attrs:{id:"1-1-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.1")]),a("p",[a("em",[s._v("2016-12-29")])]),a("ul",[a("li",[s._v("修复由于编译而出现的不兼容新版 Vue 的问题")])]),a("h3",{attrs:{id:"1-1-0-helium"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-1-0-helium","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.1.0 Helium")]),a("p",[a("em",[s._v("2016-12-29")])]),a("h4",{attrs:{id:"xin-te-xing-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xin-te-xing-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 新特性：")]),a("ul",[a("li",[s._v("新增 Carousel、Collapse 组件")]),a("li",[s._v("支持 SSR")]),a("li",[s._v("组件内的滚动条样式优化")]),a("li",[s._v("Table 支持通过 "),a("a",{attrs:{href:"http://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped Slots")]),s._v(" 传入模板；原来的 "),a("code",[s._v("inline-template")]),s._v(" 仍然兼容，但是不再推荐使用，未来可能会被移除")]),a("li",[s._v("Table 支持展开行功能(Expandable rows)")]),a("li",[s._v("DatePicker 支持指定周起始日(first day of week)")]),a("li",[s._v("TimeSelect 支持设置 "),a("code",[s._v("maxTime")])]),a("li",[s._v("Autocomplete 新增 "),a("code",[s._v("popper-class")]),s._v("属性")]),a("li",[s._v("Tab-Pane 新增 name 为 label 的具名 "),a("code",[s._v("slot")]),s._v("，用于实现自定义标签内容")])]),a("h4",{attrs:{id:"xiu-fu-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-fu-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修复：")]),a("ul",[a("li",[s._v("DatePicker 的 "),a("code",[s._v("change")]),s._v(" 事件错误地触发多次的问题，#2070")]),a("li",[s._v("Tabs 组件内 tab-pane 初始化时宽度抖动的问题，#1883")])]),a("h4",{
-attrs:{id:"fei-jian-rong-xing-geng-xin-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新：")]),a("ul",[a("li",[s._v("最低兼容 Vue 2.1.6")]),a("li",[s._v("Form validateField() 方法回调的参数更新")]),a("li",[s._v("Alert 取消了 render-content 属性，现在自定义模板需要通过默认 slot 传入")]),a("li",[s._v("Input 和 Select 盒模型从 "),a("code",[s._v("block")]),s._v(" 修改为 "),a("code",[s._v("inline-block")])]),a("li",[s._v("Tabs 盒模型从 "),a("code",[s._v("inline-block")]),s._v(" 修改为 "),a("code",[s._v("block")]),s._v("，Tab-Pane 移除 "),a("code",[s._v("label-content")]),s._v(" 属性")]),a("li",[s._v("Autocomplete 下拉列表现在直接插入到 "),a("code",[s._v("<body>")]),s._v(" 标签下，而不是 "),a("code",[s._v("<el-autocomplete>")]),s._v(" 下")])]),a("h3",{attrs:{id:"1-0-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.9")]),a("p",[a("em",[s._v("2016-12-27")])]),a("ul",[a("li",[s._v("修复 DatePicker 不能正确触发 input 事件的问题，现在只有当日期改变时才触发，#1834")]),a("li",[s._v("修复 Tree 在 Firefox 下会提示 event is undefined 的问题，#1945")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("change")]),s._v(" 事件，返回和输入框一致的格式化后的值，#1841")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("header-align")]),s._v(" 属性，#1424")]),a("li",[s._v("修复单选的 Table 在数据移除时，高亮状态仍然存在的问题，#1890")]),a("li",[s._v("修复可搜索的 Select 在选项较多时的卡顿问题，#1933")]),a("li",[s._v("修复多选的 Select 在禁用状态下仍然能够手动删除选中项的问题，#2001")]),a("li",[s._v("修复 Col "),a("code",[s._v("xs")]),s._v(" 分辨率下样式无效的问题，#2011")]),a("li",[s._v("新增 Tab 组件的 "),a("code",[s._v("value")]),s._v(" 属性并支持 "),a("code",[s._v("v-model")]),s._v(" 用法，#2008")]),a("li",[s._v("修复 Input Number 在某些条件下 change 事件被触发多次的问题，#1999")]),a("li",[s._v("新增 DatePicker 的 "),a("code",[s._v("clearable")]),s._v(" 属性，#1994")]),a("li",[s._v("修复 Form 异步验证时某些条件下总是验证通过的问题，#1936")])]),a("h3",{attrs:{id:"1-0-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.8")]),a("p",[a("em",[s._v("2016-12-20")])]),a("ul",[a("li",[s._v("修复 Popup 在叠加使用时阻止事件冒泡，#1677")]),a("li",[s._v("修复 DatePicker 类型为 datetimerange 时无法选择时间的问题，#1758")]),a("li",[s._v("修复 Slider 的 "),a("code",[s._v("change")]),s._v(" 事件不能正确触发的问题，#1809")]),a("li",[s._v("修复 Loading 的 spinner 在某些情况下转动时出现碎片的问题，#1786")]),a("li",[s._v("新增 Select 的 "),a("code",[s._v("loading-text")]),s._v("、"),a("code",[s._v("no-data-text")]),s._v("、"),a("code",[s._v("no-match-text")]),s._v(" 属性和 "),a("code",[s._v("visible-change")]),s._v(" 事件，#1849")]),a("li",[s._v("新增 DatePicker、Select 和 Tooltip 的 "),a("code",[s._v("popper-class")]),s._v(" 属性，#1806")]),a("li",[s._v("新增 Tree 的 "),a("code",[s._v("expand-on-click-node")]),s._v("、"),a("code",[s._v("current-node-key")]),s._v(" 属性和 "),a("code",[s._v("current-change")]),s._v(" 事件，#1805 #1807")]),a("li",[s._v("新增 Table "),a("code",[s._v("row-click")]),s._v(" 事件的第三个参数 "),a("code",[s._v("column")]),s._v("，#1808")]),a("li",[s._v("修复 Checkbox 的在路由切换时因为 computed 属性被缓存导致的bug，#1860")]),a("li",[s._v("新增 TabPanel "),a("code",[s._v("label-content")]),s._v(" 渲染钩子方法中增加 tab 实例的参数，#1857")]),a("li",[s._v("新增 NavMenu 组件增加无限级子菜单（vertical模式）的支持，#1851")]),a("li",[s._v("新增 Checkbox 现在支持不绑定 value 也可以正常使用，#1818")]),a("li",[s._v("新增 Progress 的 "),a("code",[s._v("onProgress")]),s._v(" 钩子函数，#1782")]),a("li",[s._v("修复 Tab 组件 active bar 在动态 label 下没有更新的问题，#1761")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("filter-change")]),s._v(" 事件和 TableColumn 的 "),a("code",[s._v("column-key")]),s._v(" 属性，#1876")]),a("li",[s._v("新增 Dropdown "),a("code",[s._v("hide-on-click")]),s._v(" 属性，#1879")])]),a("h3",{attrs:{id:"1-0-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.7")]),a("p",[a("em",[s._v("2016-12-14")])]),a("ul",[a("li",[s._v("修复 DatePicker 在有值的情况下 hover 清空按钮时会错误地显示弹框")]),a("li",[s._v("修复 DatePicker 设置默认值为 null 会错误地显示时间值")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("row-contextmenu")]),s._v(" 事件和 "),a("code",[s._v("max-height")]),s._v(" 属性，#1663 #1674")]),a("li",[s._v("新增 MessageBox 的 "),a("code",[s._v("customClass")]),s._v(" 属性，#1707")]),a("li",[s._v("新增 Message 和 Notification 的 "),a("code",[s._v("iconClass")]),s._v(" 和 "),a("code",[s._v("customClass")]),s._v(" 属性，#1671")]),a("li",[s._v("新增 Table 支持 empty slot，#1737")]),a("li",[s._v("改进 InputNumber change 事件增加 old value 的参数")])]),a("h3",{attrs:{id:"1-0-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.6")]),a("p",[a("em",[s._v("2016-12-09")])]),a("ul",[a("li",[s._v("新增 Tabs 组件的 "),a("code",[s._v("disabled")]),s._v(" 属性，#1620")]),a("li",[s._v("新增 DatePicker 的 input 支持 "),a("code",[s._v("size")]),s._v("，#1440")]),a("li",[s._v("修复 DatePicker 为 "),a("code",[s._v("datetimerange")]),s._v(" 类型并设置初始值时，面板未显示正确日期的问题，#1129")]),a("li",[s._v("修复 DatePicker 切换年份时显示异常的问题，#1607")]),a("li",[s._v("修复 DatePicker 点击 icon 未触发 clickoutside 的问题，#1604")]),a("li",[s._v("修复 TimePicker 点击清空按钮后再次点击不会更新初始值的问题，#1583")]),a("li",[s._v("修复 Select 远程搜索且 value 为对象类型时的显示问题，#1593")]),a("li",[s._v("修复 Select 为 "),a("code",[s._v("disabled")]),s._v(" 时，"),a("code",[s._v("clearable")]),s._v(" 仍然可以工作的问题，#1619")]),a("li",[s._v("修复 自定义背景颜色的 Switch 在动态切换 "),a("code",[s._v("disabled")]),s._v(" 时，背景颜色错误的问题，#1627")]),a("li",[s._v("修复 Table 的一些样式问题")])]),a("h3",{attrs:{id:"1-0-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.5")]),a("p",[a("em",[s._v("2016-12-06")])]),a("ul",[a("li",[s._v("修复 Select 异步获取选项和绑定值时，输入框中显示 value 而不是 label 的问题，#1537")]),a("li",[s._v("修复 Select 的初始值为一个空对象时会报错的问题，#1533")]),a("li",[s._v("修复 Select 远程搜索有时不显示下拉框的问题，#1531")]),a("li",[s._v("修复 Slider 拖动释放后，滑块有几率产生一小段位移的问题，#1546")]),a("li",[s._v("修复 IE9 下 Steps 的样式问题，#1543")]),a("li",[s._v("新增 Upload 对所有文件类型生成 URL 的功能，#1530")]),a("li",[s._v("修复 TimeSelect 的样式，移除 flexbox, #1335")])]),a("h3",{attrs:{id:"1-0-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.4")]),a("p",[a("em",[s._v("2016-12-02")])]),a("ul",[a("li",[s._v("新增 Input Number 的 "),a("code",[s._v("controls")]),s._v(" 属性，#1473")]),a("li",[s._v("修复 Checkbox Group、Radio Group 在异步赋值时出现的问题，#1511 #1514")]),a("li",[s._v("增加 Notification 的 "),a("code",[s._v("offset")]),s._v(" 属性，#1419")]),a("li",[s._v("修复 Slider 在快速拖动时取值不准确的问题，#1458")]),a("li",[s._v("修复 Slider 在某些情况下绑定值为多位小数的问题，#1450")]),a("li",[s._v("修复 Select 在某些情况下绑定值和显示值不同步的问题")]),a("li",[s._v("新增 Select 的 "),a("code",[s._v("multiple-limit")]),s._v(" 和 "),a("code",[s._v("allow-create")]),s._v(" 属性")]),a("li",[s._v("修复 Tree 的叶子节点在点击展开后三角图标不消失的问题，#1438")]),a("li",[s._v("修复 Tree 有时在获取子级数据后视图不更新的问题，#1439")]),a("li",[s._v("修复 Table 在 windows 系统下的若干样式问题，#1464 #1507")]),a("li",[s._v("修复 Table 多级表头与固定列同时使用时，多级表头第一列 label 不显示的问题，#1451")]),a("li",[s._v("新增 Table 的 "),a("code",[s._v("row-dblclick")]),s._v(" 事件，#1362")])]),a("h3",{attrs:{id:"1-0-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.3")]),a("p",[a("em",[s._v("2016-11-28")])]),a("ul",[a("li",[s._v("修复 Pagination 的 "),a("code",[s._v("currentPage")]),s._v(" 在某些情况下设置无效的情况，#1336")]),a("li",[s._v("修复 DatePicker 为 "),a("code",[s._v("month")]),s._v(" 且设置了 "),a("code",[s._v("disabledDate")]),s._v(" 的情况下切换年份时界面未更新的问题，#1158")]),a("li",[s._v("修复 DatePicker readonly 时未禁用清除按钮的问题，#1238")]),a("li",[s._v("修复 Slider 绑定值为 "),a("code",[s._v("NaN")]),s._v(" 以及 "),a("code",[s._v("step")]),s._v(" 小于 1 时无法正常工作的问题，#1239 #1282")]),a("li",[s._v("增加 Table 的多表头功能，#1312")]),a("li",[s._v("增加 Table 的 "),a("code",[s._v("rowStyle")]),s._v(" 属性，#1348")]),a("li",[s._v("修复 TableColumn 的某些属性无法动态设置的问题，#1314")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("filter-node-method")]),s._v(" 属性和 "),a("code",[s._v("filter")]),s._v(" 方法，#1257")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("getCheckedKeys")]),s._v(" 和 "),a("code",[s._v("setCheckedKeys")]),s._v(" 方法，#1254")]),a("li",[s._v("重构 Checkbox/Radio 支持嵌套 Group 绑定值，#1152")]),a("li",[s._v("修复 Popper 在 keep-alive 下无法触发销毁的问题，#1359")]),a("li",[s._v("增加 Form 中深对象验证的支持，#1363")]),a("li",[s._v("增加 Autocomplete 里的 "),a("code",[s._v("append")]),s._v(" 和 "),a("code",[s._v("prepend")]),s._v(" API，#1369")]),a("li",[s._v("增加 Pagination "),a("code",[s._v("pageSizes")]),s._v(" 属性的动态支持，#1372")]),a("li",[s._v("增加 Radio Button 自定义选中按钮样式的 API，#1380")]),a("li",[s._v("增加 Menu Group 支持通过 slot 来设置 title，#1382")]),a("li",[s._v("修复 DatePicker 选择年的 bug，#1385")]),a("li",[s._v("新增 Upload 默认已上传的文件列表 API，#1393")]),a("li",[s._v("增加 Checkbox "),a("code",[s._v("label")]),s._v(" 属性绑定的多类型支持，#1400")]),a("li",[s._v("增加 Tree 的 "),a("code",[s._v("setChecked")]),s._v(" 方法，#1422")])]),a("h3",{attrs:{id:"1-0-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.2")]),a("p",[a("em",[s._v("2016-11-18")])]),a("ul",[a("li",[s._v("新增 Table "),a("code",[s._v("context")]),s._v(" 属性，可以指定自定义 column 内部可获取的上下文，#1161")]),a("li",[s._v("新增 多种语言支持")]),a("li",[s._v("修复 没有正确动态渲染语言的问题，#1160")]),a("li",[s._v("新增 Alert 的 "),a("code",[s._v("render-content")]),s._v(" 属性，#568")]),a("li",[s._v("新增 Button 的 focus 样式，#982")]),a("li",[s._v("修复 Switch 的 "),a("code",[s._v("change")]),s._v(" 事件触发时机错误的问题，#1162")]),a("li",[s._v("修复 TimeSelect 开始时间设置 "),a("code",[s._v("00:00")]),s._v(" 后会被禁用的问题，#676")]),a("li",[s._v("新增 Table "),a("code",[s._v("show-header")]),s._v(" 属性，"),a("code",[s._v("header-click")]),s._v(" 事件。#1195")]),a("li",[s._v("完善 Table 的 "),a("code",[s._v("height")]),s._v(" 属性，当 "),a("code",[s._v("height")]),s._v(" 属性为字符串的时候，表示 Table 的高度受外部样式控制，#1195")]),a("li",[s._v("修复 Table 的 "),a("code",[s._v("selection-change")]),s._v(" 在某些情况下不触发的问题，#1198")]),a("li",[s._v("修复 Table 动态修改 "),a("code",[s._v("fixed")]),s._v(" 属性可能会造成锁定列不消失的问题，#1182")])]),a("h3",{attrs:{id:"1-0-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.1")]),a("p",[a("em",[s._v("2016-11-16")])]),a("ul",[a("li",[s._v("修复 Pagination 错误地多次触发 "),a("code",[s._v("current-change")]),s._v(" 事件的问题")]),a("li",[s._v("修复 Switch 在 Form 中的样式错误，#967")]),a("li",[s._v("修复 Loading 在某些情况下错误地锁定 "),a("code",[s._v("body")]),s._v(" 滚动的问题，#968")]),a("li",[s._v("Col 组件的 "),a("code",[s._v("span")]),s._v(" 属性不再是必填属性，在省略的情况下其默认值为 "),a("code",[s._v("24")])]),a("li",[s._v("新增 DatePicker "),a("code",[s._v("disabled")]),s._v(" 和 "),a("code",[s._v("editable")]),s._v(" 属性，#976")]),a("li",[s._v("修复 DatePicker 的 "),a("code",[s._v("readonly")]),s._v(" 与原生行为一致，现在通过设置 editable=false 禁止输入但是可通过弹框选日期，#976")]),a("li",[s._v("新增 Message 和 Notification 的 "),a("code",[s._v("close")]),s._v(" 方法，用于手动关闭实例")]),a("li",[s._v("新增 DatePicker 清除功能，#759")]),a("li",[s._v("修复 Form 重置日期报错，#937")]),a("li",[s._v("修复 Tab 设置active-name不是首个tab时的样式问题，#1034")]),a("li",[s._v("修复 Table 的 inline-template 在 vue-loader 9.9.0 渲染报错")]),a("li",[s._v("新增 Step 支持内容居中对齐，#994")]),a("li",[s._v("修复 Upload 单独引入时提示 Progress 组件不存在，#1013")]),a("li",[s._v("Layout 支持响应式布局")]),a("li",[s._v("新增 Dialog "),a("code",[s._v("show-close")]),s._v(" 属性")]),a("li",[s._v("修复 和 "),a("code",[s._v("vue-i18n")]),s._v(" 一起使用时，未初始化 i18n 会报错，#973")]),a("li",[s._v("修复 DatePicker 设置初始值后界面未更新 #1050")]),a("li",[s._v("修复 DatePicker 月份选择器直接切换年份并未更新年份数据 #1070")]),a("li",[s._v("新增 $loading 服务，用以调用 Loading")]),a("li",[s._v("新增 Popover 可手动控制显示隐藏，将 trigger 设置为 "),a("code",[s._v("manual")])]),a("li",[s._v("新增 Tree 的 "),a("code",[s._v("nodeKey")]),s._v("、"),a("code",[s._v("emptyText")]),s._v("、"),a("code",[s._v("checkStrictly")]),s._v("、"),a("code",[s._v("defaultExpandAll")]),s._v("、"),a("code",[s._v("autoExpandParent")]),s._v("、"),a("code",[s._v("defaultCheckedKeys")]),s._v("、"),a("code",[s._v("defaultExpandedKeys")]),s._v(" 属性，"),a("code",[s._v("setCheckedNodes")]),s._v(" 方法。")])]),a("h3",{attrs:{id:"1-0-0"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0")]),a("p",[a("em",[s._v("2016-11-9")])]),a("ul",[a("li",[s._v("修复 TimePicker 选择范围时结束时间小于开始时间会重置开始时间, #894")]),a("li",[s._v("修复结合 "),a("code",[s._v("vue-i18n")]),s._v(" 使用时会提示不能覆盖 "),a("code",[s._v("$t")]),s._v(" 方法的问题")]),a("li",[s._v("新增 Loading 自定义加载文案的功能，并优化了视觉表现")]),a("li",[s._v("修复 Input blur 事件的参数不是 event 对象的问题")]),a("li",[a("code",[s._v("window.ELEMENT.locale.use")]),s._v(" 改成 "),a("code",[s._v("window.ELEMENT.locale")])])]),a("h3",{attrs:{id:"1-0-0-rc-9"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-9","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.9")]),a("p",[a("em",[s._v("2016-11-07")])]),a("ul",[a("li",[s._v("新增 MessageBox 确定按钮自动获取焦点, #721")]),a("li",[s._v("修复 Popover focus 失效, #734")]),a("li",[s._v("修复 Clickoutside 报错, #729")]),a("li",[s._v("修复 DatePicker 选择日期范围时当选中同一天再调整时间会出错")]),a("li",[s._v("更新 TimePicker 滚动条在 IE10+ 下隐藏")]),a("li",[s._v("新增 Dropdown 的 command api #432")]),a("li",[s._v("修复 Slider 在 Form 中的显示问题")]),a("li",[s._v("修复 Upload 在 onSuccess、onError 钩子无法拿到服务端返回信息的问题")]),a("li",[s._v("改善 tabs 现在支持动态更新")]),a("li",[s._v("Table 新增 highlightCurrentRow 属性、新增 current-change 事件")]),a("li",[s._v("TableColumn 的 showTooltipWhenOverflow 更名为 showOverflowTooltip（两个属性均可用）")]),a("li",[s._v("TableColumn 新增属性 render-header")]),a("li",[s._v("Pagination 新增属性 pageCount")]),a("li",[s._v("DatePicker 修复重置 value 后默认选中日期没有重置, #878")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Upload on-error 钩子函数参数变更为 function(err, response, file), on-success 钩子函数参数变更为 function(response, file, fileList)")])]),a("h3",{attrs:{id:"1-0-0-rc-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.8")]),a("p",[a("em",[s._v("2016-10-28")])]),a("ul",[a("li",[s._v("修复 Form reset method 对日期控件不起效的问题")]),a("li",[s._v("修复 Dialog/Message Box/Tooltip/Popover/... 等若干组件的样式错误")]),a("li",[s._v("修复 Message Box 的 prompt 在打开时会携带之前的验证状态的问题")]),a("li",[s._v("修复 Autocomplete 的弹出框不会消失 #439")]),a("li",[s._v("新增 Input 图标的点击事件 #444")]),a("li",[s._v("修复 Loading 关闭后有几率滚动失效的问题")]),a("li",[s._v("修复 远程搜索的 Select 不能正确渲染默认初始值的问题")]),a("li",[s._v("修复 Switch 的 width 属性无效的问题")]),a("li",[s._v("Table 增加 rowClassName 属性")]),a("li",[s._v("TableColumn 增加 fixed 属性，可选值：true, false, left, right")]),a("li",[s._v("TableColumn 增加属性：filters、filterMultiple、filterMethod、filteredValue")]),a("li",[s._v('TableColumn[type="selection"] 增加 selectable 属性')]),a("li",[s._v("修复 Input textarea 在动态赋值时 autosize 没有触发的问题")]),a("li",[s._v("修复 Input Number min max 属性设置后点击加减出现的崩溃的bug")]),a("li",[s._v("优化 TimePicker/DatePicker 输入日期行为")]),a("li",[s._v("修复 DatePicker 输入禁用状态的日期却生效的问题 #484")]),a("li",[s._v("新增 Slider 的 disabled 属性")]),a("li",[s._v("新增 Menu 的 menu-trigger 属性")]),a("li",[s._v("新增 i18n 的支持")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Tabs 组件的 click 和 remove 事件回调参数从 name 改为事件对应的 tab 组件实例")]),a("li",[s._v("全屏 Loading 现在默认不再锁定屏幕滚动。如果需要的话，可添加 "),a("code",[s._v("lock")]),s._v(" 修饰符")]),a("li",[s._v("Table 删除属性 fixedColumnCount、customCriteria、customBackgroundColors、selectionMode")]),a("li",[s._v("Table 的 selectionchange、cellmouseenter、cellmouseleave、cellclick 事件更名为 selection-change、cell-mouse-enter、cell-mouse-leave、cell-click。")]),a("li",[s._v("Pagination 的 currentchange、sizechange 事件更名为 current-change、size-change")])]),a("h3",{attrs:{id:"1-0-0-rc-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.7")]),a("p",[a("em",[s._v("2016-10-13")])]),a("ul",[a("li",[s._v("Upload 新增 Data 属性支持额外数据的传输")]),a("li",[s._v("DatePicker 修复 "),a("code",[s._v("$t")]),s._v(" 报错")]),a("li",[s._v("Popper 重构 vue-popper")]),a("li",[s._v("Pagination 修复输入后再点击切换，输入框的值不更新")]),a("li",[s._v("Step: 修复自定义 icon 的样式")]),a("li",[s._v("修复 Tree 组件 checkbox 点击失效的问题")]),a("li",[s._v("Breadcrumb 增加路由跳转的功能")]),a("li",[s._v("修复 可清空的 Select 中清空按钮的不恰当动画")]),a("li",[s._v("DatePicker 修复使用 Tab 键切换时弹出框未隐藏")])]),a("h3",{attrs:{id:"1-0-0-rc-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.6")]),a("p",[a("em",[s._v("2016-10-11")])]),a("ul",[a("li",[s._v("修复 Tabs 切换后 Tab-panel 被销毁的问题")]),a("li",[s._v("修复 TimePicker 错误的隐藏面板")]),a("li",[s._v("修复 Table Cell 的样式, #204")]),a("li",[s._v("修复 Menu default-active 属性不能为空的问题, #200")]),a("li",[s._v("修复 Menu unique-opened 开启后无法展开子菜单的问题, #200")]),a("li",[s._v("为 Notification 和 Message 的不同 type 添加独立的调用方法")]),a("li",[s._v("为 Message Box 和 Dialog 添加 lockScroll 属性，用于定义是否在弹框出现时将 body 滚动锁定")]),a("li",[s._v("新增 Input textarea 类型的 rows, autosize 属性")]),a("li",[s._v("为 Tree 添加 getCheckedNodes 方法和 node-click、check-change 回调")]),a("li",[s._v("新增 DatePicker 禁用日期功能 #253")]),a("li",[s._v("修复 多选可搜索的 Select 下拉选项自动展开的问题")]),a("li",[s._v("为 Dialog 添加 top 属性")]),a("li",[s._v("修复 Menu 组件垂直模式下开启 router 属性会立刻跳转的问题 #295")]),a("li",[s._v("Checkbox change 事件现在只能被人为的交互操作所触发")]),a("li",[s._v("新增 Checkbox checked 属性")]),a("li",[s._v("修复 Select 远程搜索时使用键盘选择选项无法更新 v-model 的问题")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Dropdown 组件重构，现在可以以更加的灵活方便的形式来自定义触发下拉的元素，以及可以定义下菜单的样式")])]),a("h3",{attrs:{id:"1-0-0-rc-5"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-5","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.5")]),a("p",[a("em",[s._v("2016-09-30")])]),a("ul",[a("li",[s._v("修复 Table 头部不同步的问题")]),a("li",[s._v("修复 Menu 组件 default-active 绑定动态值无法更新的问题")]),a("li",[s._v("新增特性 Menu 组件中若选中子菜单项现在会自动展开所有父级菜单")]),a("li",[s._v("修复 vue-popper 引入 popper 路径错误")]),a("li",[s._v("修复 DatePicker 初始值是合法时间类型但无法设置成功的问题")]),a("li",[s._v("修复 Pagination 的图标没有正确切换样式, #163")]),a("li",[s._v("修复 Row 组件 align 属性不生效的问题")]),a("li",[s._v("修复 Tabs 关闭标签页时对应 Tab-panel 没有移除的问题")]),a("li",[s._v("新增 Menu 组件中 MenuItem 的 route 属性")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-6"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-6","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Menu 组件的 "),a("code",[s._v("unique-opend")]),s._v(" 属性修正为 "),a("code",[s._v("unique-opened")])])]),a("h3",{attrs:{id:"1-0-0-rc-4"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-4","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.4")]),a("p",[a("em",[s._v("2016-09-21")])]),a("ul",[a("li",[s._v("修复 Select 多选时选项变为空数组后 placeholder 不出现的问题")]),a("li",[s._v("修复 Time Picker 时间选择可滚动")]),a("li",[s._v("修复 Tooltip 有时会错位的问题")]),a("li",[s._v("修复 丢失的组件 css 文件")]),a("li",[s._v("修复 Table 在 Safari 下边框没对齐")]),a("li",[s._v("修复 TimePicker 图标样式被默认图标样式覆盖")]),a("li",[s._v("修复 在 mounted 钩子函数中改变 Select 绑定值不生效的问题")]),a("li",[s._v("修复 在多个依次出现的 Dialog 或 Message Box 全部关闭后页面有几率不可滚动的问题")]),a("li",[s._v("修复 Table 初次渲染时宽度重新计算 #78")]),a("li",[s._v("新增 时间、日期选择器增加 align 属性，可设置对齐方式")]),a("li",[s._v("新增 TableColumn 的 align 属性")]),a("li",[s._v("新增 autocomplete 的 select 事件")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-7"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-7","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Select 组件样式的 "),a("code",[s._v("display")]),s._v(" 属性默认值修改为 "),a("code",[s._v("block")])])]),a("h3",{attrs:{id:"1-0-0-rc-3"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-3","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.3")]),a("p",[a("em",[s._v("2016-09-09")])]),a("ul",[a("li",[s._v("修复 Slider 存在输入框时，输入框与 Slider 的值不同步的问题")]),a("li",[s._v("修复 Steps 样式")]),a("li",[s._v("修复 无法安装的问题")])]),a("h3",{attrs:{id:"1-0-0-rc-2"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-2","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.2")]),a("p",[a("em",[s._v("2016-09-09")])]),a("ul",[a("li",[s._v("修复 Upload 上传的问题，并增加上传成功和失败的钩子函数")]),a("li",[s._v("Button 组件增加 "),a("code",[s._v("nativeType")]),s._v(" 属性，用于组件内 "),a("code",[s._v("<button>")]),s._v(" 标签的原生 "),a("code",[s._v("type")]),s._v(" 属性，默认值为 "),a("code",[s._v("button")])]),a("li",[s._v("修复 Table 自定义模板中渲染静态数据错误")]),a("li",[s._v("修复 Table 中被固定列的高度不与其他列的高度协调的问题")]),a("li",[s._v("修复 Time Picker 的 "),a("code",[s._v("picker-options")]),s._v(" 属性")]),a("li",[s._v("修复一些组件图标丢失的问题")]),a("li",[s._v("修复 远程搜索的 Select 在 Form 中的显示问题")]),a("li",[s._v("修复 Input Number 输入小数和非数字值时的问题")]),a("li",[s._v("修复 Select 选中 value 为 0 的值时绑定值不更新的问题")]),a("li",[s._v("修复 Tree 取消选择某节点后，其同级节点均被取消的问题")]),a("li",[s._v("修复 Upload 的 headers 属性设置无效")]),a("li",[s._v("修复 Pagination 包含 sizes 子组件时 page-size 无效的问题")]),a("li",[s._v("优化 增加打包成 commonjs 且不压缩的文件，默认引入 commonjs")])]),a("h4",{attrs:{id:"fei-jian-rong-xing-geng-xin-8"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fei-jian-rong-xing-geng-xin-8","aria-hidden":"true"}},[s._v("¶")]),s._v(" 非兼容性更新")]),a("ul",[a("li",[s._v("Menu 组件 "),a("code",[s._v("mode")]),s._v(" 属性默认值修改为 "),a("code",[s._v("vertical")])]),a("li",[s._v("Progress 组件升级，增加环形进度条的类型，以及增加了诸多属性，详细请查阅文档")]),a("li",[s._v("Popover 现在可以通过 slot 指定 reference")])]),a("h3",{attrs:{id:"1-0-0-rc-1"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#1-0-0-rc-1","aria-hidden":"true"}},[s._v("¶")]),s._v(" 1.0.0-rc.1")]),a("p",[a("em",[s._v("2016-08-30")])]),a("p",[s._v("Element 1.0.0-rc.1 发布")])])}]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-changelog"},[a("div",{staticClass:"heading"},[a("el-button",{staticClass:"fr"},[a("a",{attrs:{href:"https://github.com/ElemeFE/element/releases",target:"_blank"}},[s._v("Github Releases")])]),s._v("\n    更新日志\n  ")],1),a("ul",{ref:"timeline",staticClass:"timeline"}),a("change-log",{ref:"changeLog"})],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/alert.md":56,"./en-US/badge.md":60,"./en-US/breadcrumb.md":65,"./en-US/button.md":68,"./en-US/card.md":73,"./en-US/carousel.md":81,"./en-US/cascader.md":85,"./en-US/checkbox.md":89,"./en-US/collapse.md":93,"./en-US/color-picker.md":97,"./en-US/color.md":101,"./en-US/custom-theme.md":104,"./en-US/date-picker.md":107,"./en-US/datetime-picker.md":111,"./en-US/dialog.md":115,"./en-US/dropdown.md":119,"./en-US/form.md":123,"./en-US/home.md":129,"./en-US/i18n.md":134,"./en-US/icon.md":137,"./en-US/input-number.md":142,"./en-US/input.md":146,"./en-US/installation.md":152,"./en-US/layout.md":155,"./en-US/loading.md":158,"./en-US/menu.md":162,"./en-US/message-box.md":166,"./en-US/message.md":170,"./en-US/notification.md":174,"./en-US/pagination.md":178,"./en-US/popover.md":182,"./en-US/progress.md":186,"./en-US/quickstart.md":189,"./en-US/radio.md":192,"./en-US/rate.md":196,"./en-US/select.md":200,"./en-US/slider.md":204,"./en-US/steps.md":208,"./en-US/switch.md":212,"./en-US/table.md":216,"./en-US/tabs.md":220,"./en-US/tag.md":224,"./en-US/time-picker.md":228,"./en-US/tooltip.md":232,"./en-US/tree.md":238,"./en-US/typography.md":242,"./en-US/upload.md":245,"./zh-CN/alert.md":249,"./zh-CN/badge.md":255,"./zh-CN/breadcrumb.md":262,"./zh-CN/button.md":265,"./zh-CN/card.md":271,"./zh-CN/carousel.md":277,"./zh-CN/cascader.md":283,"./zh-CN/checkbox.md":289,"./zh-CN/collapse.md":295,"./zh-CN/color-picker.md":301,"./zh-CN/color.md":307,"./zh-CN/custom-theme.md":312,"./zh-CN/date-picker.md":315,"./zh-CN/datetime-picker.md":321,"./zh-CN/dialog.md":327,"./zh-CN/dropdown.md":333,"./zh-CN/form.md":339,"./zh-CN/home.md":345,"./zh-CN/i18n.md":349,"./zh-CN/icon.md":354,"./zh-CN/input-number.md":360,"./zh-CN/input.md":366,"./zh-CN/installation.md":372,"./zh-CN/layout.md":375,"./zh-CN/loading.md":380,"./zh-CN/menu.md":386,"./zh-CN/message-box.md":392,"./zh-CN/message.md":396,"./zh-CN/notification.md":400,"./zh-CN/pagination.md":404,"./zh-CN/popover.md":410,"./zh-CN/progress.md":416,"./zh-CN/quickstart.md":421,"./zh-CN/radio.md":424,"./zh-CN/rate.md":428,"./zh-CN/select.md":434,"./zh-CN/slider.md":440,"./zh-CN/steps.md":446,"./zh-CN/switch.md":450,"./zh-CN/table.md":456,"./zh-CN/tabs.md":462,"./zh-CN/tag.md":466,"./zh-CN/time-picker.md":472,"./zh-CN/tooltip.md":478,"./zh-CN/tree.md":484,"./zh-CN/typography.md":490,"./zh-CN/upload.md":495};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=55},function(s,t,a){s.exports=a(57)},function(s,t,a){var l=a(13)(a(58),a(59),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays important alert messages.")]),s._m(1),a("p",[s._v("Alert components are non-overlay elements in the page that does not disappear automatically.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success"}}),a("el-alert",{attrs:{title:"info alert",type:"info"}}),a("el-alert",{attrs:{title:"warning alert",type:"warning"}}),a("el-alert",{attrs:{title:"error alert",type:"error"}})]],2),a("p",[s._v("Alert provides 4 types of themes defined by "),a("code",[s._v("type")]),s._v(", whose default value is "),a("code",[s._v("info")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Customize the close button as texts or other symbols.")]),a("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() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"unclosable alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"customized close-text",type:"info","close-text":"Gotcha"}}),a("el-alert",{attrs:{title:"alert with callback",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("Alert allows you to configure if it's closable. The close button text and closing callbacks are also customizable. "),a("code",[s._v("closable")]),s._v(" attribute decides if the component can be closed or not. It accepts "),a("code",[s._v("boolean")]),s._v(", and the default is "),a("code",[s._v("true")]),s._v(". You can set "),a("code",[s._v("close-text")]),s._v(" attribute to replace the default cross symbol as the close button. Be careful that "),a("code",[s._v("close-text")]),s._v(" must be a string. "),a("code",[s._v("close")]),s._v(" event fires when the component is closed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"unclosable alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"customized close-text"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Gotcha"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"alert with callback"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{
-staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      hello() {\n        alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displaying an icon improves readability.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error","show-icon":""}})]],2),a("p",[s._v("Setting the "),a("code",[s._v("show-icon")]),s._v(" attribute displays an icon that corresponds with the current Alert type.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Description includes a message with more detailed information.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"with description",type:"success",description:"This is a description."}})]],2),a("p",[s._v("Besides the required "),a("code",[s._v("title")]),s._v(" attribute, you can add a "),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"with description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"This is a description."')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"success alert",type:"success",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"info alert",type:"info",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"warning alert",type:"warning",description:"more text description","show-icon":""}}),a("el-alert",{attrs:{title:"error alert",type:"error",description:"more text description","show-icon":""}})]],2),a("p",[s._v("At last, this is an example with both icon and description.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"more text description"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizable-close-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizable-close-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizable close button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-icon-and-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-icon-and-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" With icon and description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("title "),a("strong",[s._v("REQUIRED")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("component type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("descriptive text. Can also be passed with the default slot")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("if closable or not")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("customized close button text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("if a type icon is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("fires when alert is closed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(61)},function(s,t,a){a(62);var l=a(13)(null,a(64),"data-v-01da8809",null);s.exports=l.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A number or status mark on buttons and icons.")]),s._m(1),a("p",[s._v("Displays the amount of new messages.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Click Me"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      comments\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      replies\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("The amount is defined with "),a("code",[s._v("value")]),s._v(" which accepts "),a("code",[s._v("Number")]),s._v(" or "),a("code",[s._v("String")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Click Me"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      comments\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      replies\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize the max value.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("The max value is defined by property "),a("code",[s._v("max")]),s._v(" which is a "),a("code",[s._v("Number")]),s._v(". Note that it only works when "),a("code",[s._v("value")]),s._v(" is also a "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Displays text content other than numbers.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("comments")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("replies")])],1)],1),a("p",[s._v("When "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("String")]),s._v(", it can display customized text.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("comments"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("replies"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Use a red dot to mark content that needs to be noticed.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("query")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("is-dot")]),s._v(". It is a "),a("code",[s._v("Boolean")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("query"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){
-var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"max-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#max-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" Max value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"little-red-dot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#little-red-dot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Little red dot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("display value")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value, shows '{max}+' when exceeded. Only works if "),a("code",[s._v("value")]),s._v(" is a "),a("code",[s._v("Number")])]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("if a little dot is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("hidden badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(66)},function(s,t,a){var l=a(13)(null,a(67),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays the location of the current page, making it easier to browser back.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("homepage")]),a("el-breadcrumb-item",[s._v("promotion management")]),a("el-breadcrumb-item",[s._v("promotion list")]),a("el-breadcrumb-item",[s._v("promotion detail")])],1)],1),a("p",[s._v("In "),a("code",[s._v("el-breadcrumb")]),s._v(", each "),a("code",[s._v("el-breadcrumb-item")]),s._v(" is a tag that stands for every level starting from homepage. This component has a "),a("code",[s._v("String")]),s._v(" attribute "),a("code",[s._v("separator")]),s._v(", and it determines the separator. Its default value is '/'.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("homepage"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion management"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion list"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("promotion detail"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("separator character")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("/")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("target route of the link, same as "),a("code",[s._v("to")]),s._v(" of "),a("code",[s._v("vue-router")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("if "),a("code",[s._v("true")]),s._v(", the navigation will not leave a history record")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(69)},function(s,t,a){var l=a(13)(a(70),a(72),null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={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"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Commonly used button.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("Default Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text"}},[s._v("Text Button")])],1),a("p",[s._v("Button provides 7 themes defined by the "),a("code",[s._v("type")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",disabled:""}},[s._v("Primary Button")]),a("el-button",{attrs:{type:"text",disabled:""}},[s._v("Text Button")])],1),a("p",[s._v("Use "),a("code",[s._v("disabled")]),s._v(" attribute to determine whether a button is disabled. It accepts a "),a("code",[s._v("Boolean")]),s._v(" value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Primary Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Text Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Different colors represent different meanings.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("Success")]),a("el-button",{attrs:{type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{type:"info"}},[s._v("Info")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hover to display color")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("Success")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("Warning")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("Danger")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("Info")])],1)])]),a("p",[s._v("Use "),a("code",[s._v("plain")]),s._v(" attribute to create a plain button, and it accepts a "),a("code",[s._v("Boolean")]),s._v(" value. You can assign different "),a("code",[s._v("type")]),s._v(" to a plain button as mentioned above. "),a("strong",[s._v("Note")]),s._v(": When using the plain button, you still can set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("text")]),s._v(", but it makes no difference. A plain button will be styled like a "),a("code",[s._v("text button")]),s._v(" by default.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hover to display color"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Danger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("Info"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use icons to add more meaning to Button. You can use icon alone to save some space, or with text together.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("Search")]),a("el-button",{attrs:{type:"primary"}},[s._v("Upload"),a("i",{staticClass:"el-icon-upload el-icon-right"})])],1),a("p",[s._v("Use the "),a("code",[s._v("icon")]),s._v(" attribute to add icon. You can find the icon list in Element icon component. Adding icons to the right side of the text is achievable with an "),a("code",[s._v("<i>")]),s._v(" tag. Custom icons can be used as well.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Upload"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Displayed as a button group, can be used to group a series of similar operations.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("Previous Page")]),a("el-button",{attrs:{type:"primary"}},[s._v("Next Page"),a("i",{staticClass:"el-icon-arrow-right el-icon-right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("Use tag "),a("code",[s._v("<el-button-group>")]),s._v(" to group your buttons.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("Previous Page"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Next Page"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon-right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Click the button to load data, then the button displays a loading state.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">Loading</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("Loading")])],1),a("p",[s._v("Set "),a("code",[s._v("loading")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" to display loading state.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("Loading"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Besides default size, Button component provides three additional sizes for you to choose among different scenarios.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("Large Button")]),a("el-button",{attrs:{type:"primary"}},[s._v("Default Button")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("Small Button")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("Mini Button")])],1),a("p",[s._v("Use attribute "),a("code",[s._v("size")]),s._v(" to set additional sizes with "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" or "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("Large Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Default Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"
-},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Small Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("Mini Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("disableds")]),s._v(" attribute determines if the button is disabled.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"color-indication"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-indication","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color Indication")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icon-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button Group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-button"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-button","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading Button")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("button size")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("button type")]),a("td",[s._v("string")]),a("td",[s._v("primary/success/warning/danger/info/text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("determine whether it's a plain button")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("determine whether it's loading")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("disable the button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("button icon, accepts an icon name of Element icon component")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as native button's "),a("code",[s._v("autofocus")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("same as native button's "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("button/submit/reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(74)},function(s,t,a){a(75);var l=a(13)(a(77),a(79),"data-v-11476eae",null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(78),e=l(n);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("Integrate information in a card container.")]),s._m(1),l("p",[s._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" 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",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("Card name")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("Operation button")])],1),s._l(4,function(t){return l("div",{staticClass:"text item"},[s._v("\n    "+s._s("List item "+t)+"\n  ")])})],2)],1),l("p",[s._v("Card is made up of "),l("code",[s._v("header")]),s._v(" and "),l("code",[s._v("body")]),s._v(". "),l("code",[s._v("header")]),s._v(" is optional, and its content distribution depends on a named slot.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("Card name"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Operation button"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._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" 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",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{staticClass:"text item"},[s._v("\n    "+s._s("List item "+t)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'List item ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._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" :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() {\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",slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(80)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("Yummy hamburger")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("Operating button")])],1)])])],1)}))],1),l("p",[s._v("The "),l("code",[s._v("body-style")]),s._v(" attribute defines CSS style of custom "),l("code",[s._v("body")]),s._v(". This example also uses "),l("code",[s._v("el-col")]),s._v(" for layout.")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("Yummy hamburger"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("Operating button"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"simple-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#simple-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Simple card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-images"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-images","aria-hidden":"true"}},[s._v("¶")]),s._v(" With images")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("Title of the card. Also accepts a DOM passed by "),a("code",[s._v("slot#header")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("CSS style of body")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a.p+"static/hamburger.50e4091.png"},function(s,t,a){s.exports=a(82)},function(s,t,a){var l=a(13)(a(83),a(84),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Loop a series of images or texts in a limited space")]),s._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">\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">\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",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is hovered (default)")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Switch when indicator is clicked")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("Combine "),a("code",[s._v("el-carousel")]),s._v(" with "),a("code",[s._v("el-carousel-item")]),s._v(", and you'll get a carousel. Content of each slide is completely customizable, and you just need to place it inside  "),a("code",[s._v("el-carousel-item")]),s._v(" tag. By default the carousel switches when mouse hovers over an indicator. Set "),a("code",[s._v("trigger")]),s._v(" to "),a("code",[s._v("click")]),s._v(", and the carousel switches only when an indicator is clicked.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is hovered (default)"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Switch when indicator is clicked"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"
-},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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">\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",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("indicator-position")]),s._v(" attribute determines where the indicators are located. By default they are inside the carousel, and setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("outside")]),s._v(" moves them outside; setting "),a("code",[s._v("indicator-position")]),s._v(" to "),a("code",[s._v("none")]),s._v(" hides the indicators.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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">\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",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("The "),a("code",[s._v("arrow")]),s._v(" attribute determines when arrows are displayed. By default they appear when mouse hovers over the carousel. Setting "),a("code",[s._v("arrow")]),s._v(" to "),a("code",[s._v("always")]),s._v(" or "),a("code",[s._v("never")]),s._v(" shows/hides the arrows permanently.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._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">\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",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("Setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indicators"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indicators","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indicators")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arrows"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arrows","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arrows")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-mode"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-mode","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card mode")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("height of the carousel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("index of the initially active slide (starting from 0)")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how indicators are triggered")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("whether automatically loop the slides")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("interval of the auto loop, in milliseconds")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("position of the indicators")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("when arrows are shown")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the Carousel")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the active slide switches")]),a("td",[s._v("index of the new active slide, index of the old active slide")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("manually switch slide")]),a("td",[s._v("index of the slide to be switched to, starting from 0; or the "),a("code",[s._v("name")]),s._v(" of corresponding "),a("code",[s._v("el-carousel-item")])])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("switch to the previous slide")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("switch to the next slide")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("name of the item, can be used in "),a("code",[s._v("setActiveItem")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(86)},function(s,t,a){var l=a(13)(a(87),a(88),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(a){s.indexOf("California")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"Los Angeles"}]:s.indexOf("Florida")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"Orlando"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If the options have a clear hierarchical structure, Cascader can be used to view and select them.")]),s._m(1),a("p",[s._v("There are two ways to expand child option items.")]),a("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() {\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(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when clicked (default)")]),a("el-cascader",{directives:[{name:"model",rawName:"v-model",value:s.selectedOptions,expression:"selectedOptions"}],attrs:{options:s.options},domProps:{value:s.selectedOptions},on:{change:s.handleChange,input:function(t){s.selectedOptions=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Child options expand when hovered")]),a("el-cascader",{directives:[{name:"model",rawName:"v-model",value:s.selectedOptions2,expression:"selectedOptions2"}],attrs:{"expand-trigger":"hover",options:s.options},domProps:{value:s.selectedOptions2},on:{change:s.handleChange,input:function(t){s.selectedOptions2=t}}})],1)]),a("p",[s._v("Assigning the "),a("code",[s._v("options")]),s._v(" attribute to an array of options renders a Cascader. The "),a("code",[s._v("expand-trigger")]),s._v(" attribute defines how child options are expanded. This example also demonstrates the "),a("code",[s._v("change")]),s._v(" event, whose parameter is the value of Cascader, an array made up of the values of each selected level.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when clicked (default)"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"
-},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Child options expand when hovered"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n  export default {\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("In this example, the first item in "),a("code",[s._v("options")]),s._v(" array has a "),a("code",[s._v("disabled: true")]),s._v(" field, so it is disabled. By default, Cascader checks the "),a("code",[s._v("disabled")]),s._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 "),a("code",[s._v("props")]),s._v(" attribute (see the API table below for details). And of course, field name "),a("code",[s._v("value")]),s._v(", "),a("code",[s._v("label")]),s._v(" and "),a("code",[s._v("children")]),s._v(" can also be customized in the same way.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{
-staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("The input can display only the last level instead of all levels.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("The "),a("code",[s._v("show-all-levels")]),s._v(" attribute defines if all levels are displayed. If it is "),a("code",[s._v("false")]),s._v(", only the last level is displayed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{
-staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{directives:[{name:"model",rawName:"v-model",value:s.selectedOptions3,expression:"selectedOptions3"}],attrs:{options:s.options},domProps:{value:s.selectedOptions3},on:{input:function(t){s.selectedOptions3=t}}})],1),a("p",[s._v("The default value can be defined with an array.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{
-staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Parent options can also be selected.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("By default only the options in the last level can be selected. By assigning "),a("code",[s._v("change-on-select")]),s._v(" to "),a("code",[s._v("true")]),s._v(", options in parent levels can also be selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"
-},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Load child options when their parent option is clicked or hovered over.")]),a("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() {\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(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("In this example, the options array does not have data of cities when initialized. With the "),a("code",[s._v("active-item-change")]),s._v(" event, you can load the cities of a specific state dynamically. Besides, this example also demonstrates how "),a("code",[s._v("props")]),s._v(" is used.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n        }\n      };\n    },\n    \n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleItemChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v("\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'Florida'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Orlando'")]),s._v("\n            }];\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Search and select options with a keyword.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Only options of the last level can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Options of all levels can be selected")]),a("el-cascader",{attrs:{placeholder:"Try searching: Guide",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-cascader")]),s._v(" enables filtering")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Only options of the last level can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Options of all levels can be selected"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Try searching: Guide"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guide'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Disciplines'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'consistency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Consistency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'feedback'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Feedback'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'efficiency'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Efficiency'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'controllability'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Controllability'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'side nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Side Navigation'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'top nav'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Top Navigation'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Component'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"
-},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Resource'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'docs'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Design Documentation'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Disable an option by setting a "),a("code",[s._v("disabled")]),s._v(" field in the option object.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"display-only-the-last-level"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#display-only-the-last-level","aria-hidden":"true"}},[s._v("¶")]),s._v(" Display only the last level")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-default-value"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-default-value","aria-hidden":"true"}},[s._v("¶")]),s._v(" With default value")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"change-on-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#change-on-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Change on select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dynamically-load-child-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dynamically-load-child-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dynamically load child options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filterable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filterable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filterable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("data of the options")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("selected value")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Cascader's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("input placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Cascader is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether selected value can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("trigger mode of expanding current item")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("whether to display all levels of the selected value in the input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether the options can be searched")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("debounce delay when typing filter keyword, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("whether selecting an option of any level is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of option object is used as the option's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("specify which key of option object is used as the option's value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of option object is used as the option's child options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("specify which key of option object indicates if the option is disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("value")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("triggers when active option changes, only works when "),a("code",[s._v("change-on-select")]),s._v(" is "),a("code",[s._v("false")])]),a("td",[s._v("an array of active options")])])])])}]}},function(s,t,a){s.exports=a(90)},function(s,t,a){var l=a(13)(a(91),a(92),null,null);s.exports=l.exports},function(s,t){"use strict";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}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s.target.checked?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t<this.cities.length}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("A group of options for multiple choices.")]),s._m(1),a("p",[s._v("Checkbox can be used alone to switch between two states.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <!-- `checked` should be true or false -->\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",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked,expression:"checked"}],domProps:{value:s.checked},on:{input:function(t){s.checked=t}}},[s._v("Option")])]],2),a("p",[s._v("Define "),a("code",[s._v("v-model")]),s._v("(bind variable) in "),a("code",[s._v("el-checkbox")]),s._v(". The default value is a "),a("code",[s._v("Boolean")]),s._v(" for single "),a("code",[s._v("checkbox")]),s._v(", and it becomes "),a("code",[s._v("true")]),s._v(" when selected. Content inside the "),a("code",[s._v("el-checkbox")]),s._v(" tag will become the description following the button of the checkbox.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` should be true or false -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked1,expression:"checked1"}],attrs:{disabled:""},domProps:{value:s.checked1},on:{input:function(t){s.checked1=t}}},[s._v("Option")]),a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked2,expression:"checked2"}],attrs:{disabled:""},domProps:{value:s.checked2},on:{input:function(t){s.checked2=t}}},[s._v("Option")])]],2),a("p",[s._v("Set the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Option"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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",slot:"source"},[[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkList,expression:"checkList"}],domProps:{value:s.checkList},on:{input:function(t){s.checkList=t}}},[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",[s._v("checkbox-group")]),s._v(" element can manage multiple checkboxes in one group by using "),a("code",[s._v("v-model")]),s._v(" which is bound as an "),a("code",[s._v("Array")]),s._v(". Inside the "),a("code",[s._v("el-checkbox")]),s._v(" element, "),a("code",[s._v("label")]),s._v(" is the value of the checkbox. If no content is nested in that tag, "),a("code",[s._v("label")]),s._v(" will be rendered as the description following the button of the checkbox. "),a("code",[s._v("label")]),s._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",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option B"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Option C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'Option A'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._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">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n\n',script:"\n  const 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(event) {\n        this.checkedCities = event.target.checked ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let 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",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checkAll,expression:"checkAll"}],attrs:{indeterminate:s.isIndeterminate},domProps:{value:s.checkAll},on:{change:s.handleCheckAllChange,input:function(t){s.checkAll=t}}},[s._v("Check all")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkedCities,expression:"checkedCities"}],domProps:{value:s.checkedCities},on:{change:s.handleCheckedCitiesChange,input:function(t){s.checkedCities=t}}},s._l(s.cities,function(t){return a("el-checkbox",{attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("Check all"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n        "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckAllChange(event) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{
-staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      handleCheckedCitiesChange(value) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._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">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n\n',script:"\n  const cityOptions = ['Shanghai', 'Beijing', 'Guangzhou', 'Shenzhen'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['Shanghai', 'Beijing'],\n        cities: cityOptions\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkedCities1,expression:"checkedCities1"}],attrs:{min:1,max:2},domProps:{value:s.checkedCities1},on:{input:function(t){s.checkedCities1=t}}},s._l(s.cities,function(t){return a("el-checkbox",{attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-state"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-state","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled State")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Indeterminate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("indeterminate")]),s._v(" property can help you to achieve a 'check all' effect.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"minimum-maximum-items-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#minimum-maximum-items-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Minimum / Maximum items checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The "),a("code",[s._v("min")]),s._v(" and "),a("code",[s._v("max")]),s._v(" properties can help you to limit the number of checked items.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("value of the checkbox when used inside a "),a("code",[s._v("checkbox-group")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("value of the checkbox if it's checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("value of the checkbox if it's not checked")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("if the checkbox is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("if the checkbox is checked")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("same as "),a("code",[s._v("indeterminate")]),s._v(" in native checkbox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum number of checkbox checked")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the binding value changes")]),a("td",[s._v("Event object")])])])])}]}},function(s,t,a){s.exports=a(94)},function(s,t,a){var l=a(13)(a(95),a(96),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Collapse to store contents.")]),s._m(1),a("p",[s._v("You can expand multiple panels")]),a("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() {\n      return {\n        activeNames: ['1']\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{directives:[{name:"model",rawName:"v-model",value:s.activeNames,expression:"activeNames"}],domProps:{value:s.activeNames},on:{change:s.handleChange,input:function(t){s.activeNames=t}}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In accordion mode, only one panel can be expanded at once")]),a("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() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],attrs:{accordion:""},domProps:{value:s.activeName},on:{input:function(t){s.activeName=t}}},[a("el-collapse-item",{attrs:{title:"Consistency",name:"1"}},[a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])]),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("p",[s._v("Activate accordion mode using the "),a("code",[s._v("accordion")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",{
-attrs:{name:"1"}},[a("template",{slot:"title"},[s._v("\n      Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._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;")]),a("div",[s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc.")])],2),a("el-collapse-item",{attrs:{title:"Feedback",name:"2"}},[a("div",[s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;")]),a("div",[s._v("Visual feedback: reflect current state by updating or rearranging elements of the page.")])]),a("el-collapse-item",{attrs:{title:"Efficiency",name:"3"}},[a("div",[s._v("Simplify the process: keep operating process simple and intuitive;")]),a("div",[s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;")]),a("div",[s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling.")])]),a("el-collapse-item",{attrs:{title:"Controllability",name:"4"}},[a("div",[s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;")]),a("div",[s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n      Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._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;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Consistent within interface: all elements should be consistent, such as: design style, icons and texts, position of elements, etc."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Operation feedback: enable the users to clearly perceive their operations by style updates and interactive effects;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Visual feedback: reflect current state by updating or rearranging elements of the page."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Simplify the process: keep operating process simple and intuitive;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Definite and clear: enunciate your intentions clearly so that the users can quickly understand and make decisions;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Easy to identify: the interface should be straightforward, which helps the users to identify and frees them from memorizing and recalling."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Decision making: giving advices about operations is acceptable, but do not make decisions for the users;"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("Controlled consequences: users should be granted the freedom to operate, including canceling, aborting or terminating current operation."),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-title"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-title","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom title")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Besides using the "),a("code",[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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether to activate accordion mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("currently active panel")]),a("td",[s._v("string (accordion mode)/array (non-accordion mode)")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when active panels change")]),a("td",[s._v("activeNames: array (non-accordion mode)/string (accordion mode)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("unique identification of the panel")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the panel")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(98)},function(s,t,a){var l=a(13)(a(99),a(100),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("ColorPicker is a color selector supporting multiple color formats.")]),s._m(1),a("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() {\n      return {\n        color1: '#20a0ff',\n        color2: null\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With default value")]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.color1,expression:"color1"}],domProps:{value:s.color1},on:{input:function(t){s.color1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With no default value")]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.color2,expression:"color2"}],domProps:{value:s.color2},on:{input:function(t){s.color2=t}}})],1)]),a("p",[s._v("ColorPicker requires a string typed variable to be bound to v-model.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With no default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.color3,expression:"color3"}],attrs:{"show-alpha":""},domProps:{value:s.color3},on:{input:function(t){s.color3=t}}})],1),a("p",[s._v("ColorPicker supports alpha channel selecting. To activate alpha selecting, just add the "),a("code",[s._v("show-alpha")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alpha"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alpha","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alpha")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("whether to display the alpha slider")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("color format of v-model")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex (when show-alpha is false)/ rgb (when show-alpha is true)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("color value")])])])])}]}},function(s,t,a){s.exports=a(102)},function(s,t,a){var l=a(13)(null,a(103),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element uses a specific set of palettes to specify colors to provide a consistent look and feel for the products you build.")]),s._m(1),a("p",[s._v("The main color of Element is bright and friendly blue.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._v("Besides the main color, you need to use different scene colors in different scenarios (for example, dangerous color indicates dangerous operation)")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._v("Neutral colors are for text, background and border colors. You can use different neutral colors to represent the hierarchical structure.")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"main-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#main-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Main Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"secondary-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#secondary-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Secondary Color")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"neutral-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#neutral-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Neutral Color")])}]}},function(s,t,a){s.exports=a(105)},function(s,t,a){var l=a(13)(null,a(106),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom theme")]),a("p",[s._v("Element 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.")]),a("h2",{attrs:{id:"changing-theme-color"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#changing-theme-color","aria-hidden":"true"}},[s._v("¶")]),s._v(" Changing theme color")]),a("p",[s._v("If you just want to change the theme color of Element, the "),a("a",{attrs:{href:"https://elementui.github.io/theme-preview/#/en-US"}},[s._v("theme preview website")]),s._v(" is recommended.")]),a("p",[s._v("The main color of Element is bright and friendly blue. By changing it, you can make Element more visually connected to specific projects.")]),a("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).")]),a("h2",{attrs:{id:"more-customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" More customizations")]),a("p",[s._v("If you need more customization than just changing the theme color, please follow these steps:")]),a("h3",{attrs:{id:"install-related-tool"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#install-related-tool","aria-hidden":"true"}},[s._v("¶")]),s._v(" Install related tool")]),a("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.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("Then install the default theme from npm or GitHub.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# from npm\nnpm i element-theme-default -D\n\n# from GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"initialize-variable-file"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#initialize-variable-file","aria-hidden":"true"}},[s._v("¶")]),s._v(" Initialize variable file")]),a("p",[s._v("After successfully installing the above packages, a command named "),a("code",[s._v("et")]),s._v(" is available in CLI (if the packages are installed locally, use "),a("code",[s._v("node_modules/.bin/et")]),s._v(" instead). Run "),a("code",[s._v("-i")]),s._v(" to initialize the variable file which outputs to "),a("code",[s._v("element-variables.css")]),s._v(" by default. And you can specify its output directory as you will.")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [custom output file]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("In "),a("code",[s._v("element-variables.css")]),s._v(" you can find all the variables we used to style Element and they are defined in CSS4 style:")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n  "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n  -------------------------- */")]),s._v("\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"modify-variables"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#modify-variables","aria-hidden":"true"}},[s._v("¶")]),s._v(" Modify variables")]),a("p",[s._v("Just edit "),a("code",[s._v("element-variables.css")]),s._v(", e.g. changing the theme color to red:")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"build-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#build-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Build theme")]),a("p",[s._v("After saving the variable file, use "),a("code",[s._v("et")]),s._v(" to build your theme. You can activate "),a("code",[s._v("watch")]),s._v(" mode by adding a parameter "),a("code",[s._v("-w")]),s._v(". And if you customized the variable file's output, you need to add a parameter "),a("code",[s._v("-c")]),s._v(" and variable file's name:")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"import-custom-theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-custom-theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import custom theme")]),a("p",[s._v("By default the build theme file is placed inside "),a("code",[s._v("./theme")]),s._v(". You can specify its output directory with parameter "),a("code",[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:")]),a("pre",[a("code",{
-staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"import-component-theme-on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-component-theme-on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import component theme on demand")]),a("p",[s._v("If you are using "),a("code",[s._v("babel-plugin-component")]),s._v(" for on-demand import, just modify "),a("code",[s._v(".babelrc")]),s._v(" and specify "),a("code",[s._v("styleLibraryName")]),s._v(" to the path where your custom theme is located relative to "),a("code",[s._v(".babelrc")]),s._v(". Note that "),a("code",[s._v("~")]),s._v(" is required:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("If you are unfamiliar with "),a("code",[s._v("babel-plugin-component")]),s._v(", please refer to "),a("a",{attrs:{href:"./#/en-US/component/quickstart"}},[s._v("Quick Start")]),s._v(". For more details, check out the "),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("project repository")]),s._v(" of "),a("code",[s._v("element-theme")]),s._v(".")])])}]}},function(s,t,a){s.exports=a(108)},function(s,t,a){var l=a(13)(a(109),a(110),null,null);s.exports=l.exports},function(s,t){"use strict";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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Date Picker for date input.")]),s._m(1),a("p",[s._v("Basic date picker measured by 'day'.")]),a("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() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const 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(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{type:"date",placeholder:"Pick a day"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Picker with quick options")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{type:"date",placeholder:"Pick a day","picker-options":s.pickerOptions1},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)]],2),a("p",[s._v("The measurement is determined by the "),a("code",[s._v("type")]),s._v(" attribute. You can enable quick options by creating a "),a("code",[s._v("picker-options")]),s._v(" object with "),a("code",[s._v("shortcuts")]),s._v(" property. The disabled date is set by "),a("code",[s._v("disabledDate")]),s._v(", which is a function.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Picker with quick options"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a day"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can choose week, month or year by extending the standard date picker component.")]),a("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() {\n      return {\n        value3: '',\n        value4: '',\n        value5: ''\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Week")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"week",format:"Week WW",placeholder:"Pick a week"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Month")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"month",placeholder:"Pick a month"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Year")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{type:"year",placeholder:"Pick a year"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Week"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Week WW"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a week"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Month"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a month"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Year"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a year"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Picking a date range is supported.")]),a("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() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{type:"daterange",placeholder:"Pick a range"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With quick options")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{type:"daterange",align:"right",placeholder:"Pick a range","picker-options":s.pickerOptions2},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With quick options"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a range"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"enter-date"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#enter-date","aria-hidden":"true"}},[s._v("¶")]),s._v(" Enter Date")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"other-measurements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#other-measurements","aria-hidden":"true"}},[s._v("¶")]),s._v(" Other measurements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date Range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DatePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])]);
-},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("first day of week")]),a("td",[s._v("Number")]),a("td",[s._v("1 to 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("a callback that triggers when the seleted date is changed. Only for "),a("code",[s._v("daterange")]),s._v(" and "),a("code",[s._v("datetimerange")]),s._v(".")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(112)},function(s,t,a){var l=a(13)(a(113),a(114),null,null);s.exports=l.exports},function(s,t){"use strict";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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Select date and time in one picker.")]),s._m(1),a("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() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: 'Today',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: 'Yesterday',\n            onClick(picker) {\n              const 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(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{type:"datetime",placeholder:"Select date and time"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{type:"datetime",placeholder:"Select date and time","picker-options":s.pickerOptions1},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)]],2),a("p",[s._v("You can select date and time in one picker at the same time by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetime")]),s._v(". The way to use shortcuts is the same as Date Picker.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select date and time"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Today'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Yesterday'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'A week ago'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: 'Last week',\n            onClick(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"datetimerange",placeholder:"Select time range"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("With shortcuts")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"Select time range",align:"right"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1)]],2),a("p",[s._v("You can select date and time range by setting "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("datetimerange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("With shortcuts"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time range"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last week'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last month'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Last 3 months'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"date-and-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#date-and-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Date and time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/datetime/ week/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("year "),a("code",[s._v("yyyy")]),s._v(" month "),a("code",[s._v("MM")]),s._v(" day "),a("code",[s._v("dd")]),s._v(", hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for DateTimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("range separator")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("a { text, onClick } object array to set shortcut options, check the table below")]),a("td",[s._v("object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("a function determining if a date is disabled with that date as its parameter. Should return a Boolean")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("title of the shortcut")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function, triggers when the shortcut is clicked, with the "),a("code",[s._v("vm")]),s._v(" as its parameter. You can change the picker value by emitting the "),a("code",[s._v("pick")]),s._v(" event. Example: "),a("code",[s._v("vm.$emit('pick', new Date())")])]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(116)},function(s,t,a){var l=a(13)(a(117),a(118),null,null);s.exports=l.exports},function(s,t){"use strict";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:{openDialog:function(){this.$refs.dialogBind.open()}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Informs users while preserving the current page state.")]),s._m(1),a("p",[s._v("Dialog pops up a dialog box, and it's quite customizable.")]),a("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" v-model="dialogVisible" size="tiny">\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() {\n      return {\n        dialogVisible: false\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("click to open the Dialog")]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogVisible,expression:"dialogVisible"}],attrs:{title:"Tips",size:"tiny"},domProps:{value:s.dialogVisible},on:{input:function(t){s.dialogVisible=t}}},[a("span",[s._v("This is a message")]),a("span",{staticClass:"dialog-footer",
-slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("Confirm")])],1)])],1),a("p",[s._v("Set the "),a("code",[s._v("v-model")]),s._v(" attribute with a "),a("code",[s._v("Boolean")]),s._v(", and Dialog shows when it is "),a("code",[s._v("true")]),s._v(". The Dialog has two parts: "),a("code",[s._v("body")]),s._v(" and "),a("code",[s._v("footer")]),s._v(", and the latter requires a "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("footer")]),s._v(". The optional "),a("code",[s._v("title")]),s._v(" attribute (empty by default) is for defining a title. This example explicitly changes the value of "),a("code",[s._v("v-model")]),s._v(" to toggle Dialog. In addition, we also provide "),a("code",[s._v("open")]),s._v(" and "),a("code",[s._v("close")]),s._v(" method, which you can call to open/close the Dialog.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("click to open the Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tips"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("This is a message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The content of Dialog can be anything, even a table or a form. This example shows how to use Element Table and Form with Dialog。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">open a Table nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="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<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">open a Form nested Dialog</el-button>\n\n<el-dialog title="Shipping address" v-model="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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("open a Table nested Dialog")]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogTableVisible,expression:"dialogTableVisible"}],attrs:{title:"Shipping address"},domProps:{value:s.dialogTableVisible},on:{input:function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("open a Form nested Dialog")]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogFormVisible,expression:"dialogFormVisible"}],attrs:{title:"Shipping address"},domProps:{value:s.dialogFormVisible},on:{input:function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"Promotion name","label-width":s.formLabelWidth}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.name,expression:"form.name"}],attrs:{"auto-complete":"off"},domProps:{value:s.form.name},on:{input:function(t){s.form.name=t}}})],1),a("el-form-item",{attrs:{label:"Zones","label-width":s.formLabelWidth}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.form.region,expression:"form.region"}],attrs:{placeholder:"Please select a zone"},domProps:{value:s.form.region},on:{input:function(t){s.form.region=t}}},[a("el-option",{attrs:{label:"Zone No.1",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone No.2",value:"beijing"}})],1)],1)],1),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Cancel")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("Confirm")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- Table -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("open a Table nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- Form -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("open a Form nested Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Shipping address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zones"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please select a zone"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone No.2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("Confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customizations"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customizations","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customizations")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of Dialog. Can also be passed with a named slot (see the following table)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Dialog")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("value for "),a("code",[s._v("top")]),s._v(" of Dialog CSS, works when "),a("code",[s._v("size")]),s._v(" is not "),a("code",[s._v("full")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("whether a mask is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("whether to append modal to body element. If false, the modal will be appended to Dialog's parent element")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("whether scroll of body is disabled while Dialog is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("custom class names for Dialog")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("whether the Dialog can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("whether the Dialog can be closed by pressing ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("content of Dialog")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("content of the Dialog title")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("content of the Dialog footer")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Each "),a("code",[s._v("el-dialog")]),s._v(" instance has the following methods that can be used to open/close the instance without explicitly changing the value of "),a("code",[s._v("v-model")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("open the current instance")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the current instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("triggers when the Dialog opens")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when the Dialog closes")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(120)},function(s,t,a){var l=a(13)(a(121),a(122),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Toggleable menu for displaying lists of links and actions.")]),s._m(1),a("p",[s._v("Hover on the dropdown menu to unfold it for more actions.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("p",[s._v("The triggering element is rendered by the default "),a("code",[s._v("slot")]),s._v(", and the dropdown part is rendered by the "),a("code",[s._v("slot")]),s._v(" named "),a("code",[s._v("dropdown")]),s._v(". By default, dropdown list shows when you hover on the triggering element without having to click it.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{
-staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use the button to trigger the dropdown list.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n  Dropdown List\n  "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("p",[s._v("Use "),a("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 "),a("code",[s._v("divider")]),s._v(" to item four.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n  Dropdown List\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Click the triggering element or hover on it.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover to trigger")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click to trigger")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",[s._v("Action 4")]),a("el-dropdown-item",[s._v("Action 5")])],1)],1)],1)],1)],1),a("p",[s._v("Use the attribute "),a("code",[s._v("trigger")]),s._v(". By default, it is "),a("code",[s._v("hover")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click to trigger"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("Action 1")]),a("el-dropdown-item",[s._v("Action 2")]),a("el-dropdown-item",[s._v("Action 3")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("Action 5")])],1)],1)],1),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Clicking each dropdown item fires an event whose parameter is assigned by each item.")]),a("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(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    Dropdown List"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("Action 1")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("Action 2")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("Action 3")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("Action 4")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("Action 5")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    Dropdown List"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("Action 1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("Action 2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("Action 3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("Action 4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("Action 5"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"triggering-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#triggering-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Triggering element")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"how-to-trigger"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#how-to-trigger","aria-hidden":"true"}},[s._v("¶")]),s._v(" How to trigger")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-hiding-behavior"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-hiding-behavior","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu hiding behavior")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("hide-on-click")]),s._v(" to define if menu closes on clicking.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"command-event"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#command-event","aria-hidden":"true"}},[s._v("¶")]),s._v(" Command event")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("menu button type, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("menu button size, refer to "),a("code",[s._v("Button")]),s._v(" Component, only works when "),a("code",[s._v("split-button")]),s._v(" is true")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("whether a button group is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("component size, refer to "),a("code",[s._v("Button")]),s._v(" component")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("horizontal alignment")]),a("td",[s._v("string")]),a("td",[s._v("start/end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how to trigger")]),a("td",[s._v("string")]),a("td",[s._v("hover/click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("whether to hide menu after clicking menu-item")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])]);
-},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("if "),a("code",[s._v("split-button")]),s._v(" is "),a("code",[s._v("true")]),s._v(", triggers when left button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("triggers when a dropdown item is clicked")]),a("td",[s._v("the command dispatched from the dropdown item")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("a command to be dispatched to Dropdown's "),a("code",[s._v("command")]),s._v(" callback")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the item is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("whether a divider is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(124)},function(s,t,a){a(125);var l=a(13)(a(127),a(128),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("Age must be greater than 18")):a():a(new Error("Please input digits"))},1e3):a(new Error("Please input the age"))},a=function(t,a,l){""===a?l(new Error("Please input the password")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("Please input the password again")):a!==s.ruleForm2.pass?l(new Error("Two inputs don't match!")):l()};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:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,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){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({key:Date.now(),value:""})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),s._m(3),a("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() {\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() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.name,expression:"form.name"}],domProps:{value:s.form.name},on:{input:function(t){s.form.name=t}}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.form.region,expression:"form.region"}],attrs:{placeholder:"please select your zone"},domProps:{value:s.form.region},on:{input:function(t){s.form.region=t}}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date1,expression:"form.date1"}],staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},domProps:{value:s.form.date1},on:{input:function(t){s.form.date1=t}}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date2,expression:"form.date2"}],staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},domProps:{value:s.form.date2},on:{input:function(t){s.form.date2=t}}})],1)],1),a("el-form-item",{attrs:{label:"Instant delivery"}},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.form.delivery,expression:"form.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.form.delivery},on:{input:function(t){s.form.delivery=t}}})],1),a("el-form-item",{attrs:{label:"Activity type"}},[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.form.type,expression:"form.type"}],domProps:{value:s.form.type},on:{input:function(t){s.form.type=t}}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources"}},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.form.resource,expression:"form.resource"}],domProps:{value:s.form.resource},on:{input:function(t){s.form.resource=t}}},[a("el-radio",{attrs:{label:"Sponsor"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.desc,expression:"form.desc"}],attrs:{type:"textarea"},domProps:{value:s.form.desc},on:{input:function(t){s.form.desc=t}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Create")]),a("el-button",[s._v("Cancel")])],1)],1)],1),a("p",[s._v("In each "),a("code",[s._v("form")]),s._v(" component, you need a "),a("code",[s._v("form-item")]),s._v(" field to be the container of your input item.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"please select your zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsor"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("When the vertical space is limited and the form is relatively simple, you can put it in one line.")]),a("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() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"Approved by"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formInline.user,expression:"formInline.user"}],attrs:{placeholder:"Approved by"},domProps:{value:s.formInline.user},on:{input:function(t){s.formInline.user=t}}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.formInline.region,expression:"formInline.region"}],attrs:{placeholder:"Activity zone"},domProps:{value:s.formInline.region},on:{input:function(t){s.formInline.region=t}}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("Query")])],1)],1)],1),a("p",[s._v("Set the "),a("code",[s._v("inline")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the form will be inline.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Approved by"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("Query"),a("span",{
-staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Depending on your design, there are several different ways to align your label element.")]),a("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() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.labelPosition,expression:"labelPosition"}],attrs:{size:"small"},domProps:{value:s.labelPosition},on:{input:function(t){s.labelPosition=t}}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("Left")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("Right")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("Top")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"100px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"Name"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.name,expression:"formLabelAlign.name"}],domProps:{value:s.formLabelAlign.name},on:{input:function(t){s.formLabelAlign.name=t}}})],1),a("el-form-item",{attrs:{label:"Activity zone"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.region,expression:"formLabelAlign.region"}],domProps:{value:s.formLabelAlign.region},on:{input:function(t){s.formLabelAlign.region=t}}})],1),a("el-form-item",{attrs:{label:"Activity form"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.type,expression:"formLabelAlign.type"}],domProps:{value:s.formLabelAlign.type},on:{input:function(t){s.formLabelAlign.type=t}}})],1)],1)],1),a("p",[s._v("The "),a("code",[s._v("label-position")]),s._v(" attribute decides how labels align, it can be "),a("code",[s._v("top")]),s._v(" or "),a("code",[s._v("left")]),s._v(". When set to "),a("code",[s._v("top")]),s._v(", labels will be placed at the top of the form field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("Left"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("Right"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("Top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Form component allows you to verify your data, helping you find and correct errors.")]),a("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() {\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(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Activity name",prop:"name"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.name,expression:"ruleForm.name"}],domProps:{value:s.ruleForm.name},on:{input:function(t){s.ruleForm.name=t}}})],1),a("el-form-item",{attrs:{label:"Activity zone",prop:"region"}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.region,expression:"ruleForm.region"}],attrs:{placeholder:"Activity zone"},domProps:{value:s.ruleForm.region},on:{input:function(t){s.ruleForm.region=t}}},[a("el-option",{attrs:{label:"Zone one",value:"shanghai"}}),a("el-option",{attrs:{label:"Zone two",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"Activity time",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date1,expression:"ruleForm.date1"}],staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"Pick a date"},domProps:{value:s.ruleForm.date1},on:{input:function(t){s.ruleForm.date1=t}}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date2,expression:"ruleForm.date2"}],staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"Pick a time"},domProps:{value:s.ruleForm.date2},on:{input:function(t){s.ruleForm.date2=t}}})],1)],1)],1),a("el-form-item",{attrs:{label:"Instant delivery",prop:"delivery"}},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.delivery,expression:"ruleForm.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.ruleForm.delivery},on:{input:function(t){s.ruleForm.delivery=t}}})],1),a("el-form-item",{attrs:{label:"Activity type",prop:"type"}},[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.type,expression:"ruleForm.type"}],domProps:{value:s.ruleForm.type},on:{input:function(t){s.ruleForm.type=t}}},[a("el-checkbox",{attrs:{label:"Online activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Promotion activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Offline activities",name:"type"}}),a("el-checkbox",{attrs:{label:"Simple brand exposure",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"Resources",prop:"resource"}},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.resource,expression:"ruleForm.resource"}],domProps:{value:s.ruleForm.resource},on:{input:function(t){s.ruleForm.resource=t}}},[a("el-radio",{attrs:{label:"Sponsorship"}}),a("el-radio",{attrs:{label:"Venue"}})],1)],1),a("el-form-item",{attrs:{label:"Activity form",prop:"desc"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.desc,expression:"ruleForm.desc"}],attrs:{type:"textarea"},domProps:{value:s.ruleForm.desc},on:{input:function(t){s.ruleForm.desc=t}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("Create")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Just add the "),a("code",[s._v("rule")]),s._v(" attribute for "),a("code",[s._v("Form")]),s._v(" component, pass validation rules, and set "),a("code",[s._v("prop")]),s._v(" attribute for "),a("code",[s._v("Form-Item")]),s._v(" as a specific key that needs to be validated. See more information at "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity zone"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone one"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zone two"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Instant delivery"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity type"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Online activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Promotion activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Offline activities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Simple brand exposure"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Resources"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Sponsorship"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Venue"')]),s._v(">")]),a("span",{
-staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Activity form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("Create"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input Activity name'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Length should be 3 to 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select Activity zone'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please pick a time'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select at least one activity type'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please select activity resource'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Please input activity form'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('Please input the age'));\n        }\n        setTimeout(() => {\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 validaePass = (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 validaePass2 = (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: validaePass, trigger: 'blur' }\n          ],\n          checkPass: [\n            { validator: validaePass2, trigger: 'blur' }\n          ],\n          age: [\n            { validator: checkAge, trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"120px"}},[a("el-form-item",{attrs:{label:"Password",prop:"pass"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.pass,expression:"ruleForm2.pass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.pass},on:{input:function(t){s.ruleForm2.pass=t}}})],1),a("el-form-item",{attrs:{label:"Confirm",prop:"checkPass"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.checkPass,expression:"ruleForm2.checkPass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.checkPass},on:{input:function(t){s.ruleForm2.checkPass=t}}})],1),a("el-form-item",{attrs:{label:"Age",prop:"age"}},[a("el-input",{directives:[{name:"model",rawName:"v-model.number",value:s.ruleForm2.age,expression:"ruleForm2.age",modifiers:{number:!0}}],domProps:{value:s.ruleForm2.age},on:{input:function(t){s.ruleForm2.age=s._n(t)},blur:function(t){s.$forceUpdate()}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("This example shows how to customize your own validation rules to finish a two-factor password verification.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Confirm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the age'")]),s._v("));\n        }\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input digits'")]),s._v("));\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Age must be greater than 18'")]),s._v("));\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validaePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Please input the password again'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'Two inputs don\\'t match!'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validaePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("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() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            key: 1,\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item);\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1);\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          key: Date.now(),\n          value: ''\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"120px"}},[a("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"}]}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.dynamicValidateForm.email,expression:"dynamicValidateForm.email"}],domProps:{value:s.dynamicValidateForm.email},on:{input:function(t){s.dynamicValidateForm.email=t}}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"Domain"+l,prop:"domains."+l+".value",rules:{required:!0,message:"domain can not be null",trigger:"blur"}}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"domain.value"}],domProps:{value:t.value},on:{input:function(s){t.value=s}}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("Delete")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:s.addDomain}},[s._v("New domain")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("Reset")])],1)],2)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"
-},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: 'Please input email address', trigger: 'blur' },\n      { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'Domain' + index\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      required: true, message: 'domain can not be null', trigger: 'blur'\n    }\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("New domain"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n          }],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n        }\n      },\n      addDomain() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now(),\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("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() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"age",prop:"age",rules:[{required:!0,message:"age is required"},{type:"number",message:"age must be a number"}]}},[a("el-input",{directives:[{name:"model",rawName:"v-model.number",value:s.numberValidateForm.age,expression:"numberValidateForm.age",modifiers:{number:!0}}],attrs:{type:"age","auto-complete":"off"},domProps:{value:s.numberValidateForm.age},on:{input:function(t){s.numberValidateForm.age=s._n(t)},blur:function(t){s.$forceUpdate()}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("Submit")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("Reset")])],1)],1)],1),a("p",[s._v("Number Validate need a "),a("code",[s._v(".number")]),s._v(" modifier added on the input "),a("code",[s._v("v-model")]),s._v(" binding，it's used to transform the string value to the number which is provided by Vuejs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: 'age is required'},\n      { type: 'number', message: 'age must be a number'}\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("Submit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("Reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Form consists of "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("radio")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("checkbox")]),s._v(" and so on. With form, you can collect, verify and submit data.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("It includes all kinds of input items, such as "),a("code",[s._v("input")]),s._v(", "),a("code",[s._v("select")]),s._v(", "),a("code",[s._v("radio")]),s._v(" and "),a("code",[s._v("checkbox")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"inline-form"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inline-form","aria-hidden":"true"}},[s._v("¶")]),s._v(" Inline form")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"validation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#validation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Validation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-validation-rules"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-validation-rules","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom validation rules")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"delete-or-add-form-items-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#delete-or-add-form-items-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Delete or add form items dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"number-validate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#number-validate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Number Validate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("data of form component")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("whether the form is inline")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("position of label")]),a("td",[s._v("string")]),a("td",[s._v("left/right/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, and all form items will inherit from "),a("code",[s._v("Form")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("suffix of the label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("the method to validate the whole form")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("the method to validate a certain form item")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("reset all the fields and remove validation result")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("a key of "),a("code",[s._v("model")])]),a("td",[s._v("string")]),a("td",[s._v("keys of model that passed to "),a("code",[s._v("form")])]),a("td")]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("width of label, e.g. '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("whether the field is required or not, will be determined by validation rules if omitted")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("validation rules of form")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("field error message, set its value and the field will validate error and show this message immediately")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("whether to show the error message")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(130)},function(s,t,a){var l=a(13)(a(131),a(133),null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(132);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){"use strict";t.__esModule=!0;var a=t.hasClass=function(s,t){return s.className.match(new RegExp("(\\s|^)"+t+"(\\s|$)"))},l=t.addClass=function(s,t){a(s,t)||(s.className+=" "+t)},n=t.removeClass=function(s,t){if(a(s,t)){var l=new RegExp("(\\s|^)"+t+"(\\s|$)");s.className=s.className.replace(l," ")}};t.toggleClass=function(s,t){a(s,t)?n(s,t):l(s,t)}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("Components Document")])])}]}},function(s,t,a){s.exports=a(135)},function(s,t,a){var l=a(13)(null,a(136),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"internationalization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#internationalization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Internationalization")]),a("p",[s._v("The default language of Element 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 Element entirely:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("Or if you are importing Element on demand:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// configure language")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// import components")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("The Chinese language pack is imported by default, even if you're using another language. But with "),a("code",[s._v("NormalModuleReplacementPlugin")]),s._v(" provided by webpack you can replace default locale:")]),a("p",[s._v("webpack.config.js")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),a("h2",{attrs:{id:"compatible-with"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatible-with","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatible with "),a("code",[s._v("vue-i18n")])]),a("p",[s._v("Element is compatible with "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n")]),s._v(", which makes multilingual switching even easier.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"compatibility-with-other-i18n-plugins"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#compatibility-with-other-i18n-plugins","aria-hidden":"true"}},[s._v("¶")]),s._v(" Compatibility with other i18n plugins")]),a("p",[s._v("Element may not be compatible with i18n plugins other than vue-i18n, but you can customize how Element processes i18n.")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n  }\n})\n")])]),a("h2",{attrs:{id:"import-via-cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-via-cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import via CDN")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("Compatible with "),a("code",[s._v("vue-i18n")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{
-staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("Currently Element ships with the following languages:")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("Simplified Chinese (zh-CN)")]),a("li",[s._v("English (en)")]),a("li",[s._v("German (de)")]),a("li",[s._v("Portuguese (pt)")]),a("li",[s._v("Spanish (es)")]),a("li",[s._v("Danish (da)")]),a("li",[s._v("French (fr)")]),a("li",[s._v("Norwegian (nb-NO)")]),a("li",[s._v("Traditional Chinese (zh-TW)")]),a("li",[s._v("Italian (it)")]),a("li",[s._v("Korean (ko)")]),a("li",[s._v("Japanese (ja)")]),a("li",[s._v("Dutch (nl)")]),a("li",[s._v("Vietnamese (vi)")]),a("li",[s._v("Russian (ru-RU)")]),a("li",[s._v("Turkish (tr-TR)")]),a("li",[s._v("Brazilian Portuguese (pt-br)")]),a("li",[s._v("Farsi (fa)")]),a("li",[s._v("Thai (th)")]),a("li",[s._v("Indonesian (id)")]),a("li",[s._v("Bulgarian (bg)")]),a("li",[s._v("Polish (pl)")]),a("li",[s._v("Finnish (fi)")]),a("li",[s._v("Swedish (sv-SE)")]),a("li",[s._v("Greek (el)")]),a("li",[s._v("Slovak (sk)")]),a("li",[s._v("Catalunya (ca)")]),a("li",[s._v("Czech (cz)")]),a("li",[s._v("Ukrainian (ua)")]),a("li",[s._v("Turkmen (tk)")])]),a("p",[s._v("If your target language is not included, you are more than welcome to contribute: just add another language config "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("here")]),s._v(" and create a pull request.")])])}]}},function(s,t,a){s.exports=a(138)},function(s,t,a){var l=a(13)(a(139),a(141),null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(140);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports=["arrow-down","arrow-left","arrow-right","arrow-up","caret-bottom","caret-left","caret-right","caret-top","check","circle-check","circle-close","circle-cross","close","upload","d-arrow-left","d-arrow-right","d-caret","date","delete","document","edit","information","loading","menu","message","minus","more","picture","plus","search","setting","share","star-off","star-on","time","warning","delete2","upload2","view"]},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element provides a set of common icons.")]),s._m(1),s._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",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"}},[s._v("Search")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("Search"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n      "+s._s("el-icon-"+t)+"\n    ")])])}))],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Just assign the class name to "),a("code",[s._v("el-icon-iconName")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icons")])}]}},function(s,t,a){s.exports=a(143)},function(s,t,a){var l=a(13)(a(144),a(145),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input numerical values with a customizable range.")]),s._m(1),a("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() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value)\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num1,expression:"num1"}],attrs:{min:1,max:10},domProps:{value:s.num1},on:{change:s.handleChange,input:function(t){s.num1=t}}})]],2),a("p",[s._v("Bind a variable to "),a("code",[s._v("v-model")]),s._v(" in "),a("code",[s._v("<el-input-number>")]),s._v(" element and you are set.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value)\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        num2: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num2,expression:"num2"}],attrs:{disabled:!0},domProps:{value:s.num2},on:{input:function(t){s.num2=t}}})]],2),a("p",[s._v("The "),a("code",[s._v("disabled")]),s._v(" attribute accepts a "),a("code",[s._v("boolean")]),s._v(", and if the value is "),a("code",[s._v("true")]),s._v(", the component is disabled. If you just need to control the value within a range, you can add "),a("code",[s._v("min")]),s._v(" attribute to set the minimum value and "),a("code",[s._v("max")]),s._v(" to set the maximum value. By default, the minimum value is "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Allows you to define incremental steps.")]),a("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() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num3,expression:"num3"}],attrs:{step:2},domProps:{value:s.num3},on:{input:function(t){s.num3=t}}})]],2),a("p",[s._v("Add "),a("code",[s._v("step")]),s._v(" attribute to set the step.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num4,expression:"num4"}],attrs:{size:"large"},domProps:{value:s.num4},on:{input:function(t){s.num4=t}}}),a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num5,expression:"num5"}],domProps:{value:s.num5},on:{input:function(t){s.num5=t}}}),a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num6,expression:"num6"}],attrs:{size:"small"},domProps:{value:s.num6},on:{input:function(t){s.num6=t}}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"size"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#size","aria-hidden":"true"}},[s._v("¶")]),s._v(" Size")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Additional "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(" sizes of the input box are available")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("the minimum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("the maximum allowed value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("Infinity")])])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("incremental step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of the component")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether the component is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("whether to enable the control buttons")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes")]),a("td",[s._v("value after change")])])])])}]}},function(s,t,a){s.exports=a(147)},function(s,t,a){a(148);var l=a(13)(a(150),a(151),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(2);l.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}}}),t.default={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,l=s?a.filter(this.createStateFilter(s)):a;t(l)},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(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.links=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Input data using mouse or keyboard.")]),s._m(1),a("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() {\n    return {\n      input: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input,expression:"input"}],attrs:{placeholder:"Please input"},domProps:{value:s.input},on:{input:function(t){s.input=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n    return {\n      input1: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input1,expression:"input1"}],attrs:{placeholder:"Please input",disabled:!0},domProps:{value:s.input1},on:{input:function(t){s.input1=t}}})],1),a("p",[s._v("Disable the Input with the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add an icon to indicate input type.")]),a("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() {\n    return {\n      input2: ''\n    }\n  },\n  methods: {\n    handleIconClick(ev) {\n      console.log(ev);\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input2,expression:"input2"}],attrs:{placeholder:"Pick a date",icon:"search","on-icon-click":s.handleIconClick},domProps:{value:s.input2},on:{input:function(t){s.input2=t}}})],1),a("p",[s._v("You can add an icon at the end of Input by setting the "),a("code",[s._v("icon")]),s._v(" attribute and use "),a("code",[s._v("on-icon-click")]),s._v(" hook to complete some work after clicking the icon.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a date"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n    handleIconClick(ev) {\n      "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n    return {\n      textarea: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea,expression:"textarea"}],attrs:{type:"textarea",rows:2,placeholder:"Please input"},domProps:{value:s.textarea},on:{input:function(t){s.textarea=t}}})],1),a("p",[s._v("Control the height by setting the "),a("code",[s._v("rows")]),s._v(" prop.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{
-staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("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() {\n    return {\n      textarea2: '',\n      textarea3: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea2,expression:"textarea2"}],attrs:{type:"textarea",autosize:"",placeholder:"Please input"},domProps:{value:s.textarea2},on:{input:function(t){s.textarea2=t}}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea3,expression:"textarea3"}],attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"Please input"},domProps:{value:s.textarea3},on:{input:function(t){s.textarea3=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("Prepend or append an element, generally a label or a button.")]),a("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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input3,expression:"input3"}],attrs:{placeholder:"Please input"},domProps:{value:s.input3},on:{input:function(t){s.input3=t}}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input4,expression:"input4"}],attrs:{placeholder:"Please input"},domProps:{value:s.input4},on:{input:function(t){s.input4=t}}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input5,expression:"input5"}],attrs:{placeholder:"Please input"},domProps:{value:s.input5},on:{input:function(t){s.input5=t}}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.select,expression:"select"}],attrs:{placeholder:"Select"},domProps:{value:s.select},on:{input:function(t){s.select=t}},slot:"prepend"},[a("el-option",{attrs:{label:"Restaurant",value:"1"}}),a("el-option",{attrs:{label:"Order No.",value:"2"}}),a("el-option",{attrs:{label:"Tel",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("Use "),a("code",[s._v("slot")]),s._v(" to distribute elements that prepend or append to Input.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Restaurant"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Order No."')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tel"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("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() {\n    return {\n      input6: '',\n      input7: '',\n      input8: '',\n      input9: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input6,expression:"input6"}],attrs:{size:"large",placeholder:"Please Input"},domProps:{value:s.input6},on:{input:function(t){s.input6=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input7,expression:"input7"}],attrs:{placeholder:"Please Input"},domProps:{value:s.input7},on:{input:function(t){s.input7=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input8,expression:"input8"}],attrs:{size:"small",placeholder:"Please Input"},domProps:{value:s.input8},on:{input:function(t){s.input8=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input9,expression:"input9"}],attrs:{size:"mini",placeholder:"Please Input"},domProps:{value:s.input9},on:{input:function(t){s.input9=t}}})],1)]),a("p",[s._v("Add "),a("code",[s._v("size")]),s._v(" attribute to change the size of Input. In addition to the default size, there are three other options: "),a("code",[s._v("large")]),s._v(", "),a("code",[s._v("small")]),s._v(" and "),a("code",[s._v("mini")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("You can get some recommended tips based on the current input.")]),a("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() {\n      return {\n        links: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(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(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\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(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  }\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions when activated")]),a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state1,expression:"state1"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input"},domProps:{value:s.state1},on:{select:s.handleSelect,input:function(t){s.state1=t}}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("list suggestions on input")]),a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state2,expression:"state2"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"Please Input","trigger-on-focus":!1},domProps:{value:s.state2},on:{select:s.handleSelect,input:function(t){s.state2=t}}})],1)],1)],1),a("p",[s._v("Autocomplete component provides input suggestions. The "),a("code",[s._v("fetch-suggestions")]),s._v(" attribute is a method that returns suggested input. In this example, "),a("code",[s._v("querySearch(queryString, cb)")]),s._v(" returns suggestions to Autocomplete via "),a("code",[s._v("cb(data)")]),s._v(" when suggestions are ready.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions when activated"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("list suggestions on input"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please Input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return suggestions")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{
-staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("Customize how suggestions are displayed.")]),a("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() {\n      return {\n        links: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(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(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\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(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state3,expression:"state3"}],attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-en",placeholder:"Please input",icon:"edit","on-icon-click":s.handleIconClick},domProps:{value:s.state3},on:{select:s.handleSelect,input:function(t){s.state3=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-en"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-en'")]),s._v(", {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'value'")]),s._v(" } }, [item.value]),\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'link'")]),s._v(" } }, [item.link])\n      ]);\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n    }\n  });\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? link.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// call callback function to return recommended data")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      },\n      handleIconClick(ev) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Search data from server-side.")]),a("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() {\n      return {\n        links: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\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(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(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createFilter(queryString) {\n        return (link) => {\n          return (link.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.links = this.loadAll();\n    }\n  };\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state4,expression:"state4"}],attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"Please input"},domProps:{value:s.state4},on:{select:s.handleSelect,input:function(t){s.state4=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please input"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("links")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/element"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cooking"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/cooking"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"mint-ui"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/ElemeFE/mint-ui"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vuex"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vuex"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"vue-router"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/vuejs/vue-router"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"babel"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"link"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"https://github.com/babel/babel"')]),s._v(" }\n         ];\n      },\n      querySearchAsync(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? links.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : links;\n\n        clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("link")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (link.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".links = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Resizable for entering multiple lines of text information. Add attribute "),a("code",[s._v('type="textarea"')]),s._v(" to change "),a("code",[s._v("input")]),s._v(" into native "),a("code",[s._v("textarea")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autosize-textarea"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autosize-textarea","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autosize Textarea")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Setting the "),a("code",[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 "),a("code",[s._v("autosize")]),s._v(" to specify the minimum and maximum number of lines the textarea can automatically adjust.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mixed-input"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mixed-input","aria-hidden":"true"}},[s._v("¶")]),s._v(" Mixed input")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sizes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sizes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sizes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("Same as the "),a("code",[s._v("type")]),s._v(" attribute of native input, except that it can be "),a("code",[s._v("textarea")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("maximum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("minimum Input text length")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder of Input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Input is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input, works when "),a("code",[s._v("type")]),s._v(" is not 'textarea'")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("number of rows of textarea, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("whether textarea has an adaptive height, only works when "),a("code",[s._v("type")]),s._v(" is 'textarea'. Can accept an object, e.g. { minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("same as "),a("code",[s._v("auto-complete")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("on/off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("same as "),a("code",[s._v("name")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("same as "),a("code",[s._v("readonly")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("same as "),a("code",[s._v("max")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("same as "),a("code",[s._v("min")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("same as "),a("code",[s._v("step")]),s._v(" in native input")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("control the resizability")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("same as "),a("code",[s._v("autofocus")]),s._v(" in native input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("same as "),a("code",[s._v("form")]),s._v(" in native input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("triggers when the icon inside Input is clicked")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("triggers when the icon inside Input is blur")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("triggers when the icon inside Input is focus")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the icon inside Input value change")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Options")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("the placeholder of Autocomplete")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Autocomplete is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("icon name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("binding value")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("custom-item")]),a("td",[s._v("component name of your customized suggestion list item")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("a method to fetch input suggestions. When suggestions are ready, invoke "),a("code",[s._v("callback(data:[])")]),s._v(" to return them to Autocomplete")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for autocomplete's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("whether show suggestions when input focus")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("hook function when clicking on the input icon")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when a suggestion is clicked")]),a("td",[s._v("suggestion being clicked")])])])])}]}},function(s,t,a){s.exports=a(153)},function(s,t,a){var l=a(13)(null,a(154),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"installation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#installation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Installation")]),a("h3",{attrs:{id:"npm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm")]),a("p",[s._v("Installing with npm is recommended and it works seamlessly with "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(".")]),a("pre",[a("code",{staticClass:"hljs language-shell"
-},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("Get the latest version from "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" , and import JavaScript and CSS file in your page.")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- import CSS -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import JavaScript -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("If you are using CDN, a hello-world page is easy with Element. "),a("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},[s._v("Online Demo")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("<!DOCTYPE html>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import CSS -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("Button"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Try Element"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import Vue before Element -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- import JavaScript -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n      el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n      data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")])]),s._v("{\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n      }\n    })\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("If you are using npm and wish to apply webpack, please continue to the next page: Quick Start.")])])}]}},function(s,t,a){s.exports=a(156)},function(s,t,a){var l=a(13)(null,a(157),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Quickly and easily create layouts with the basic 24-column.")]),s._m(1),a("p",[s._v("Create basic grid layout using columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("With "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("col")]),s._v(", we can easily manipulate the layout using the "),a("code",[s._v("span")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Column spacing is supported.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row provides "),a("code",[s._v("gutter")]),s._v(" attribute to specify spacings between columns, and its default value is 0.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Form a more complex hybrid layout by combining the basic 1/24 columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4
-}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can specify column offsets.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can specify the number of column offset by setting the value of "),a("code",[s._v("offset")]),s._v(" attribute of Col.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Use the flex layout to make flexible alignment of columns.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("You can enable flex layout by setting "),a("code",[s._v("type")]),s._v(" attribute to 'flex', and define the layout of child elements by setting "),a("code",[s._v("justify")]),s._v(" attribute with start, center, end, space-between or space-around.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"
-},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Taking example by Bootstrap's responsive design, four breakpoints are preset: xs, sm, md and lg.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-spacing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-spacing","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column spacing")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hybrid-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hybrid-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hybrid layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"column-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#column-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" Column offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alignment"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alignment","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alignment")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"responsive-layout"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#responsive-layout","aria-hidden":"true"}},[s._v("¶")]),s._v(" Responsive Layout")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("grid spacing")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("layout mode, you can use flex, works in modern browsers")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("horizontal alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("vertical alignment of flex layout")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("number of column the grid spans")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("number of spacing on the left side of the grid")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("number of columns that grid moves to the right")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("number of columns that grid moves to the left")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" Responsive columns or column props object")]),a("td",[s._v("number/object (i.e： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(159)},function(s,t,a){var l=a(13)(a(160),a(161),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Show animation while loading data.")]),s._m(1),a("p",[s._v("Displays animation in a container (such as a table) while loading data.")]),a("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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Element provides two ways to invoke Loading: directive and service. For the custom directive "),a("code",[s._v("v-loading")]),s._v(", you just need to bind a "),a("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 "),a("code",[s._v("body")]),s._v(" modifier makes the mask append to the body element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("You can customize a text message.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"Loading...",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Add attribute "),a("code",[s._v("element-loading-text")]),s._v(" to the element on which "),a("code",[s._v("v-loading")]),s._v(" is bound, and its value will be displayed under the spinner.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Loading..."')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'John Smith'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No.1518,  Jinshajiang Road, Putuo District'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Show a full screen animation while loading data.")]),a("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() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 3000);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("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),a("p",[s._v("Add the "),a("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 "),a("code",[s._v("lock")]),s._v(".")]),a("div",{
-staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n    Full screen loading for 3 seconds\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      openFullScreen() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can also invoke Loading with a service. Import Loading service:")]),s._m(5),a("p",[s._v("Invoke it:")]),s._m(6),s._m(7),s._m(8),a("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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-inside-a-container"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-inside-a-container","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading inside a container")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"loading-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"full-screen-loading"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#full-screen-loading","aria-hidden":"true"}},[s._v("¶")]),s._v(" Full screen loading")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"service"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#service","aria-hidden":"true"}},[s._v("¶")]),s._v(" Service")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The parameter "),a("code",[s._v("options")]),s._v(" is the configuration of Loading, and its details can be found in the following table. "),a("code",[s._v("LoadingService")]),s._v(" returns a Loading instance, and you can close it by invoking its "),a("code",[s._v("close")]),s._v(" method:")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Calling the "),a("code",[s._v("close")]),s._v(" method on any one of them can close this full screen Loading.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("If Element is imported entirely, a globally method "),a("code",[s._v("$loading")]),s._v(" will be registered to Vue.prototype. You can invoke it like this: "),a("code",[s._v("this.$loading(options)")]),s._v(", and it also returns a Loading instance.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("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 "),a("code",[s._v("document.querySelector")]),s._v(" to get the corresponding DOM node")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("same as the "),a("code",[s._v("body")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("same as the "),a("code",[s._v("fullscreen")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("same as the "),a("code",[s._v("lock")]),s._v(" modifier of "),a("code",[s._v("v-loading")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("loading text that displays under the spinner")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Loading")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(163)},function(s,t,a){var l=a(13)(a(164),a(165),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1"}},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)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Menu that provides navigation for your website.")]),s._m(1),a("p",[s._v("Top bar NavMenu can be used in a variety of scenarios.")]),a("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() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("Processing Center")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("Workspace")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("item two")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("item three")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("Orders")])])],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("Processing Center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Workspace"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("Orders"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelect(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Vertical NavMenu with sub-menus.")]),a("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(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("With icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item one")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Without icons")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("Navigator One")]),a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("item one")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("item two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("item three")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("item four")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("item one")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("Navigator Two")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("Navigator Three")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("Groups")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"Group One"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator One")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Two")])],1),a("el-menu-item-group",{attrs:{title:"Group Two"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Three")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("Navigator Four")])],1)],1)],1)],1)],1),a("p",[s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("With icons"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{
-staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Without icons"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("item two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("item three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("item four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("item one"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("Groups"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group One"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Group Two"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("Navigator Four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"top-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#top-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Top bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"side-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#side-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Side bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("menu display mode")]),a("td",[s._v("string")]),a("td",[s._v("horizontal/vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("theme color")]),a("td",[s._v("string")]),a("td",[s._v("light/dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("index of currently active menu")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("array that contains keys of currently active sub-menus")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("whether only one sub-menu can be active")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("how sub-menus are triggered, only works when "),a("code",[s._v("mode")]),s._v(" is 'horizontal'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("whether "),a("code",[s._v("vue-router")]),s._v(" mode is activated. If true, index will be used as 'path' to activate the route action")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("callback function when menu is activated")]),a("td",[s._v("index: index of activated menu, indexPath: index path of activated menu")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("callback function when sub-menu expands")]),a("td",[s._v("index: index of expanded sub-menu, indexPath: index path of expanded sub-menu")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("callback function when sub-menu collapses")]),a("td",[s._v("index: index of collapsed sub-menu, indexPath: index path of collapsed sub-menu")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("callback function when menu-item is clicked")]),a("td",[s._v("el: menu-item instance")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("unique identification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router object")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("group title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(167)},function(s,t,a){var l=a(13)(a(168),a(169),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("This is a message","Title",{confirmButtonText:"OK",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("This will permanently delete the file. Continue?","Warning",{confirmButtonText:"OK",cancelButtonText:"Cancel",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"Delete completed",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"Delete canceled",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("Please input your email","Tips",{confirmButtonText:"OK",cancelButtonText:"Cancel",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"Invalid Email"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"Your email is:"+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"Input canceled"})},200)})},open4:function(){var s=this;this.$msgbox({title:"Message",message:"This is a message",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()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Alert interrupts user operation until the user confirms.")]),a("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() {\n        this.$alert('This is a message', 'Title', {\n          confirmButtonText: 'OK',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Open an alert by calling the "),a("code",[s._v("$alert")]),s._v(" method. It simulates the system's "),a("code",[s._v("alert")]),s._v(", and cannot be closed by pressing ESC or clicking outside the box. In this example, two parameters "),a("code",[s._v("message")]),s._v(" and "),a("code",[s._v("title")]),s._v(" are received. It is worth mentioning that when the box is closed, it returns a "),a("code",[s._v("Promise")]),s._v(" object for further processing. If you are not sure if your target browsers support "),a("code",[s._v("Promise")]),s._v(", you should import a third party polyfill or use callbacks instead like this example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Confirm is used to ask users' confirmation.")]),a("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() {\n        this.$confirm('This will permanently delete the file. Continue?', 'Warning', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: 'Delete completed'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Delete canceled'\n          });          \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("Click to open the Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$confirm")]),s._v(" method to open a confirm, and it simulates the system's "),a("code",[s._v("confirm")]),s._v(". We can also highly customize Message Box by passing a third attribute "),a("code",[s._v("options")]),s._v(" which is a literal object. The attribute "),a("code",[s._v("type")]),s._v(" indicates the message type, and it's value can be "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("error")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("warning")]),s._v(". Note that the second attribute "),a("code",[s._v("title")]),s._v(" must be a "),a("code",[s._v("string")]),s._v(", and if it is an "),a("code",[s._v("object")]),s._v(", it will be handled as the attribute "),a("code",[s._v("options")]),s._v(". Here we use "),a("code",[s._v("Promise")]),s._v(" to handle further processing.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("Click to open the Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'This will permanently delete the file. Continue?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Delete completed'")]),s._v("\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{
-staticClass:"hljs-string"},[s._v("'Delete canceled'")]),s._v("\n          });          \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Prompt is used when user input is required.")]),a("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() {\n        this.$prompt('Please input your e-mail', 'Tip', {\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: 'Invalid Email'\n        }).then(value => {\n          this.$message({\n            type: 'success',\n            message: 'Your email is:' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: 'Input canceled'\n          });       \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("Call "),a("code",[s._v("$prompt")]),s._v(" method to open a prompt, and it simulates the system's "),a("code",[s._v("prompt")]),s._v(". You can use "),a("code",[s._v("inputPattern")]),s._v(" parameter to specify your own RegExp pattern. Use "),a("code",[s._v("inputValidator")]),s._v(" to specify validation method, and it should return "),a("code",[s._v("Boolean")]),s._v(" or "),a("code",[s._v("String")]),s._v(". Returning "),a("code",[s._v("false")]),s._v(" or "),a("code",[s._v("String")]),s._v(" means the validation has failed, and the string returned will be used as the "),a("code",[s._v("inputErrorMessage")]),s._v(". In addition, you can customize the placeholder of the input box with "),a("code",[s._v("inputPlaceholder")]),s._v(" parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'Please input your e-mail'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tip'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Invalid Email'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("value")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Your email is:'")]),s._v(" + value\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input canceled'")]),s._v("\n          });       \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can be customized to show various content.")]),a("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() {\n        this.$msgbox({\n          title: 'Message',\n          message: 'This is a message',\n          showCancelButton: true,\n          confirmButtonText: 'OK',\n          cancelButtonText: 'Cancel',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = 'Loading...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("Click to open Message Box")])]],2),a("p",[s._v("The three methods mentioned above are repackagings of the "),a("code",[s._v("$msgbox")]),s._v(" method. This example calls "),a("code",[s._v("$msgbox")]),s._v(" method directly using the "),a("code",[s._v("showCancelButton")]),s._v(" attribute, which is used to indicate if a cancel button is displayed. Besides we can use "),a("code",[s._v("cancelButtonClass")]),s._v(" to add a custom style and "),a("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 "),a("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: "),a("code",[s._v("action")]),s._v(", "),a("code",[s._v("instance")]),s._v(" and "),a("code",[s._v("done")]),s._v(". Using it enables you to manipulate the instance before it closes, e.g. activating "),a("code",[s._v("loading")]),s._v(" for confirm button; you can invoke the "),a("code",[s._v("done")]),s._v(" method to close the MessageBox instance (if "),a("code",[s._v("done")]),s._v(" is not called inside "),a("code",[s._v("beforeClose")]),s._v(", the instance will not be closed).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("Click to open Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'OK'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cancel'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n              instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n              instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'Loading...'")]),s._v(";\n              setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                done();\n                setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                  instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n                }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n              }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              done();\n            }\n          }\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n          });\n        });\n      },\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"alert"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"confirm"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#confirm","aria-hidden":"true"}},[s._v("¶")]),s._v(" Confirm")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"prompt"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#prompt","aria-hidden":"true"}},[s._v("¶")]),s._v(" Prompt")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customization"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customization","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customization")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added the following global methods for Vue.prototype: "),a("code",[s._v("$msgbox")]),s._v(", "),a("code",[s._v("$alert")]),s._v(", "),a("code",[s._v("$confirm")]),s._v(" and "),a("code",[s._v("$prompt")]),s._v(". So in a vue instance you can call "),a("code",[s._v("MessageBox")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("MessageBox")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("The corresponding methods are: "),a("code",[s._v("MessageBox")]),s._v(", "),a("code",[s._v("MessageBox.alert")]),s._v(", "),a("code",[s._v("MessageBox.confirm")]),s._v(" and "),a("code",[s._v("MessageBox.prompt")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("content of the MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type, used for icon display")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for MessageBox")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("MessageBox closing callback if you don't prefer Promise")]),a("td",[s._v("function(action), where action can be 'confirm' or 'cancel', and "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance. You can access to that instance's attributes and methods")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("callback before MessageBox closes, and it will prevent MessageBox from closing")]),a("td",[s._v("function(action, instance, done), where "),a("code",[s._v("action")]),s._v(" can be 'confirm' or 'cancel'; "),a("code",[s._v("instance")]),s._v(" is the MessageBox instance, and you can access to that instance's attributes and methods; "),a("code",[s._v("done")]),s._v(" is for closing the instance")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("whether to lock body scroll when MessageBox prompts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("whether to show a cancel button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with confirm and prompt)")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("whether to show a confirm button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("text content of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Cancel")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("text content of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OK")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("custom class name of cancel button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("custom class name of confirm button")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("whether MessageBox can be closed by clicking the mask")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("whether MessageBox can be closed by pressing the ESC")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true (false when called with alert)")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("whether to show an input")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false (true when called with prompt)")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("placeholder of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("initial value of input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("regexp for the input")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("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")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("error message when validation fails")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Illegal input")])])])])}]}},function(s,t,a){s.exports=a(171)},function(s,t,a){var l=a(13)(a(172),a(173),null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("This is a message.")},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"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Displays at the top, and disappears after 3 seconds.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">Show message</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('This is a message.');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("Show message")])]],2),a("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. Element has registered a "),a("code",[s._v("$message")]),s._v(" method for invoking. Message can take a string as parameter, and it will be shown as the main body.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("Show message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Used to show the feedback of Success, Warning, Message and Error activities.")]),a("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() {\n        this.$message('This is a message.');\n      },\n      open2() {\n        this.$message({\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('Oops, this is a error message.');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("error")])]],2),a("p",[s._v("When you need more customizations, Message component can also take an object as parameter. For example, setting value of "),a("code",[s._v("type")]),s._v(" can define different types, and its default is "),a("code",[s._v("info")]),s._v(". In such cases the main body is passed in as the value of "),a("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 "),a("code",[s._v("open4")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v(");\n      },\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("A close button can be added.")]),a("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() {\n        this.$message({\n          showClose: true,\n          message: 'This is a message.'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: 'Congrats, this is a success message.',\n          type: 'success'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: 'Warning, this is a warning message.',\n          type: 'warning'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: 'Oops, this is a error message.',\n          type: 'error'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("message")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("success")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("warning")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("error")])]],2),a("p",[s._v("A default Message cannot be closed manually. If you need a closable message, you can set "),a("code",[s._v("showClose")]),s._v(" field. Besides, same as notification, message has a controllable "),a("code",[s._v("duration")]),s._v(". Default duration is 3000 ms, and it won't disappear when set to "),a("code",[s._v("0")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("message"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{
-staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("success"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("warning"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("error"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message.'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Congrats, this is a success message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning, this is a warning message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Oops, this is a error message.'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#types","aria-hidden":"true"}},[s._v("¶")]),s._v(" Types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"closable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#closable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Closable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$message")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Message")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Message")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Message(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Message.success(options)")]),s._v(".\nYou can call "),a("code",[s._v("Message.closeAll()")]),s._v(" to manually close all the instances.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("message text")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("message type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class, overrides "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Message")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("display duration, millisecond. If set to 0, it will not turn off automatically")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("whether to show a close button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed with the message instance as the parameter")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Message")]),s._v(" and "),a("code",[s._v("this.$message")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Message")])])])])}]}},function(s,t,a){s.exports=a(175)},function(s,t,a){var l=a(13)(a(176),a(177),null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"Title",message:s("p",{style:"color: red"},"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")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Displays a global notification message at the upper right corner of the page.")]),s._m(1),a("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() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: 'Title',\n          message: h('p', { style: 'color: red' }, 'This is a reminder')\n        });\n      },\n\n      open2() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n    Closes automatically\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n    Won't close automatically\n    ")])]],2),a("p",[s._v("Element has registered the "),a("code",[s._v("$notify")]),s._v(" method and it receives an object as its parameter. In the simplest case, you can set the "),a("code",[s._v("title")]),s._v(" field and the"),a("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 "),a("code",[s._v("duration")]),s._v(" you can control its duration. Specifically, if set to "),a("code",[s._v("0")]),s._v(", it will not close automatically. Note that "),a("code",[s._v("duration")]),s._v(" receives a "),a("code",[s._v("Number")]),s._v(" in milliseconds.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("\n    Closes automatically\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n    Won't close automatically\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Title'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: red'")]),s._v(" }, "),a("span",{staticClass:"hljs-string"},[s._v("'This is a reminder'")]),s._v(")\n        });\n      },\n\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Prompt'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a message that does not automatically close'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("We provide four types: success, warning, info and error.")]),a("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() {\n        this.$notify({\n          title: 'Success',\n          message: 'This is a success message',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: 'Warning',\n          message: 'This is a warning message',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: 'Info',\n          message: 'This is an info message'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: 'Error',\n          message: 'This is an error message'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n    Success\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n    Warning\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n    Info\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n    Error\n  ")])]],2),a("p",[s._v("Element provides four notification types: "),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(" and "),a("code",[s._v("error")]),s._v(". They are set by the "),a("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 "),a("code",[s._v("open5")]),s._v(" and "),a("code",[s._v("open6")]),s._v(" without passing a "),a("code",[s._v("type")]),s._v(" field.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n    Success\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n    Warning\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n    Info\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n    Error\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Warning'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a warning message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Info'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an info message'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Error'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is an error message'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Customize Notification's offset from the top edge of the screen")]),a("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() {\n        this.$notify.success({\n          title: 'Success',\n          message: 'This is a success message',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    Notification with offset\n  ")])]],2),a("p",[s._v("Set the "),a("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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    Notification with offset\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Success'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'This is a success message'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-types"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-types","aria-hidden":"true"}},[s._v("¶")]),s._v(" With types")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-offset"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-offset","aria-hidden":"true"}},[s._v("¶")]),s._v(" With offset")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"global-method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#global-method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Global method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element has added a global method "),a("code",[s._v("$notify")]),s._v(" for Vue.prototype. So in a vue instance you can call "),a("code",[s._v("Notification")]),s._v(" like what we did in this page.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"local-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#local-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Local import")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Import "),a("code",[s._v("Notification")]),s._v(":")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In this case you should call "),a("code",[s._v("Notification(options)")]),s._v(". We have also registered methods for different types, e.g. "),a("code",[s._v("Notification.success(options)")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("description text")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("notification type")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("custom icon's class. It will be overridden by "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("custom class name for Notification")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("duration before close. It will not automatically close if set 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("callback function when closed")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("callback function when notification clicked")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset from the top edge of the screen. Every Notification instance of the same moment should have the same offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Notification")]),s._v(" and "),a("code",[s._v("this.$notify")]),s._v(" returns the current Message instance. To manually close the instance, you can call "),a("code",[s._v("close")]),s._v(" on it.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("close the Notification")])])])])}]}},function(s,t,a){s.exports=a(179)},function(s,t,a){var l=a(13)(a(180),a(181),null,null);s.exports=l.exports},function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},methods:{handleSizeChange:function(s){console.log(s+" items per page")},handleCurrentChange:function(s){this.currentPage=s,console.log("current page: "+s)}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("If you have too much data to display in one page, use pagination.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have few pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("When you have more than 7 pages")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("Set "),a("code",[s._v("layout")]),s._v(" with different pagination elements you wish to display separated with a comma. Pagination elements are: "),a("code",[s._v("prev")]),s._v(" (a button navigating to the previous page), "),a("code",[s._v("next")]),s._v(" (a button navigating to the next page), "),a("code",[s._v("pager")]),s._v(" (page list), "),a("code",[s._v("jumper")]),s._v(" (a jump-to input), "),a("code",[s._v("total")]),s._v(" (total item count), "),a("code",[s._v("size")]),s._v(" (a select to determine page size) and "),a("code",[s._v("->")]),s._v("(every element after this symbol will be pulled to the right).")]),a("div",{
-staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have few pages"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("When you have more than 7 pages"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Use small pagination in the case of limited space.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("Just set the "),a("code",[s._v("small")]),s._v(" attribute to "),a("code",[s._v("true")]),s._v(" and the Pagination becomes smaller.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Add more modules based on your scenario.")]),a("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="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="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="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="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(val) {\n        console.log(`${val} items per page`);\n      },\n      handleCurrentChange(val) {\n        this.currentPage = val;\n        console.log(`current page: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Total item count")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Change page size")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Jump to")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("All combined")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("This example is a complete use case. It uses "),a("code",[s._v("size-change")]),s._v(" and "),a("code",[s._v("current-change")]),s._v(" event to handle page size changes and current page changes. "),a("code",[s._v("page-sizes")]),s._v(" accepts an array of integers, each of which represents a different page size in the "),a("code",[s._v("sizes")]),s._v(" select options, e.g. "),a("code",[s._v("[100, 200, 300, 400]")]),s._v(" indicates that the select will have four options: 100, 200, 300 or 400 items per page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Total item count"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Change page size"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Jump to"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("All combined"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSizeChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`"),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" items per page`")]),s._v(");\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentPage = val;\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`current page: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"small-pagination"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#small-pagination","aria-hidden":"true"}},[s._v("¶")]),s._v(" Small Pagination")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-elements"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-elements","aria-hidden":"true"}},[s._v("¶")]),s._v(" More elements")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("whether to use small pagination")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("item count of each page")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("total item count")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("total page count. Set either "),a("code",[s._v("total")]),s._v(" or "),a("code",[s._v("page-count")]),s._v(" and pages will be displayed; if you need "),a("code",[s._v("page-sizes")]),s._v(", "),a("code",[s._v("total")]),s._v(" is required")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("current page number")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("layout of Pagination, elements separated with a comma")]),a("td",[s._v("string")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("options of item count per page")]),a("td",[s._v("number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("triggers when "),a("code",[s._v("page-size")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("page-size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when "),a("code",[s._v("current-page")]),s._v(" changes")]),a("td",[s._v("the new "),a("code",[s._v("current-page")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("custom content. To use this, you need to declare "),a("code",[s._v("slot")]),s._v(" in "),a("code",[s._v("layout")])])])])])}]}},function(s,t,a){s.exports=a(183)},function(s,t,a){var l=a(13)(a(184),a(185),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"Title",width:"200",trigger:"hover",content:"this is content, this is content, this is content"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"Title",width:"200",trigger:"click",content:"this is content, this is content, this is content"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("Hover to activate")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("Click to activate")]),a("el-popover",{attrs:{placement:"right",title:"Title",width:"200",trigger:"focus",content:"this is content, this is content, this is content"}},[a("el-button",{slot:"reference"},[s._v("Focus to activate")])],1)],1),a("p",[s._v("Add "),a("code",[s._v("ref")]),s._v(" in your popover, then in your button, use "),a("code",[s._v("v-popover")]),s._v(" directive to link the button and the popover. The attribute "),a("code",[s._v("trigger")]),s._v(" is used to define how popover is triggered: "),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" or "),a("code",[s._v("focus")]),s._v(". Alternatively, you can specify reference using a named "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("Hover to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Title"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"this is content, this is content, this is content"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("Focus to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Other components can be nested in popover. Following is an example of nested table.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"date"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"name"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"address"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("Click to activate")])],1),a("p",[s._v("replace the "),a("code",[s._v("content")]),s._v(" attribute with a default "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{
-staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("Click to activate"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Jack'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York City'")]),s._v("\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Of course, you can nest other operations. It's more light-weight than using a dialog.")]),a("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() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{directives:[{name:"model",rawName:"v-model",value:s.visible2,expression:"visible2"}],ref:"popover5",attrs:{placement:"top",width:"160"},domProps:{value:s.visible2},on:{input:function(t){s.visible2=t}}},[a("p",[s._v("Are you sure to delete this?")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("cancel")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("confirm")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("Delete")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Are you sure to delete this?"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("cancel"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("confirm"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Similar to Tooltip, Popover is also built with "),a("code",[s._v("Vue-popper")]),s._v(". So for some duplicated attributes, please refer to the documentation of Tooltip.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-information"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-information","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested information")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"nested-operation"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#nested-operation","aria-hidden":"true"}},[s._v("¶")]),s._v(" Nested operation")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("how the popover is triggered")]),a("td",[s._v("string")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("popover title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("popover content, can be replaced with a default "),a("code",[s._v("slot")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("popover width")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("Min width 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("popover placement")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Popover is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("whether popover is visible")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("popover offset")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("popover transition animation")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether a tooltip arrow is displayed or not. For more info, please refer to "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[s._v("parameters for "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[s._v("object")]),a("td",[s._v("please refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")])]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for popover")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("text content of popover")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("HTML element that triggers popover")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("triggers when popover shows")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("triggers when popover hides")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(187)},function(s,t,a){var l=a(13)(null,a(188),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Progress is used to show the progress of current operation, and inform the user the current status.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Use "),a("code",[s._v("percentage")]),s._v(" attribute to set the percentage. It's "),a("strong",[s._v("required")]),s._v(" and must be between "),a("code",[s._v("0-100")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("In this case the percentage takes no additional space.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[a("code",[s._v("stroke-width")]),s._v(" attribute decides the "),a("code",[s._v("width")]),s._v(" of progress bar, and use "),a("code",[s._v("text-inside")]),s._v(" attribute to put description inside the progress bar.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("You can specify "),a("code",[s._v("type")]),s._v(" attribute to "),a("code",[s._v("circle")]),s._v(" to use circular progress bar, and use "),a("code",[s._v("width")]),s._v(" attribute to change the size of circle.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-external-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-external-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (external percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"linear-progress-bar-internal-percentage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#linear-progress-bar-internal-percentage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Linear progress bar (internal percentage)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"circular-progress-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#circular-progress-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Circular progress bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[s._v("percentage, "),a("strong",[s._v("required")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("the type of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("the width of progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("whether to place the percentage inside progress bar, only works when "),a("code",[s._v("type")]),s._v(" is 'line'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("the current status of progress bar")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("the canvas width of circle progress bar")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to show percentage")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(190)},function(s,t,a){var l=a(13)(null,a(191),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"quick-start"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quick-start","aria-hidden":"true"}},[s._v("¶")]),s._v(" Quick start")]),a("p",[s._v("This part walks you through the process of using Element in a webpack project.")]),a("h3",{attrs:{id:"use-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#use-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" Use Starter Kit")]),a("p",[s._v("We provide a general "),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("project template")]),s._v(" for you. For those who are familiar with "),a("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" or "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("Laravel")]),s._v(", we also provide corresponding templates, and you can download and use them as well.")]),a("p",[s._v("If you prefer not to use them, please read the following.")]),a("h3",{attrs:{id:"config-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#config-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Config files")]),a("p",[s._v("Create a new project, and its structure should be")]),a("pre",[a("code",{staticClass:"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")])]),a("p",[s._v("Typical configurations for these config files are:")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"
-},[s._v('"element-starter"')]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^2.1.6"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-es2015"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.13.2"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n  }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n    "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n        }\n      }\n    ]\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n      "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n      }\n    }),\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    })\n  ])\n}\n")])]),a("h3",{attrs:{id:"import-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#import-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" Import Element")]),a("p",[s._v("You can import Element entirely, or just import what you need. Let's start with fully import.")]),a("h4",{attrs:{id:"fully-import"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fully-import","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fully import")]),a("p",[s._v("In main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("The above imports Element entirely. Note that CSS file needs to be imported separately.")]),a("h4",{attrs:{id:"on-demand"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#on-demand","aria-hidden":"true"}},[s._v("¶")]),s._v(" On demand")]),a("p",[s._v("With the help of "),a("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.")]),a("p",[s._v("First, install babel-plugin-component:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("Then edit .babelrc:")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ],\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-default"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("Next, if you need Button and Select, edit main.js:")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* or\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("Full example (Component list reference "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(")")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"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} "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-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")])]),a("h3",{attrs:{id:"start-coding"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#start-coding","aria-hidden":"true"}},[s._v("¶")]),s._v(" Start coding")]),a("p",[s._v("Now you have implemented Vue and Element to your project, and it's time to write your code. Start development mode:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# visit localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("Build:")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("Please refer to each component's documentation to learn how to use them.")])])}]}},function(s,t,a){s.exports=a(193)},function(s,t,a){var l=a(13)(a(194),a(195),null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"selected and disabled",radio2:3,radio3:"New York",radio4:"New York",radio5:"New York"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Single selection among multiple options.")]),s._m(1),a("p",[s._v("Radio should not have too many options. Otherwise, use the Select component instead.")]),a("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 () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"1"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},[s._v("optionA")]),a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"2"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},[s._v("optionB")])]],2),a("p",[s._v("Creating a radio component is easy, you just need to bind a variable to Radio's "),a("code",[s._v("v-model")]),s._v(". It equals to the value of "),a("code",[s._v("label")]),s._v(" of the chosen radio. The type of "),a("code",[s._v("label")]),s._v(" is "),a("code",[s._v("String")]),s._v(" or "),a("code",[s._v("Number")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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 () {\n      return {\n        radio1: 'selected and disabled'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"disabled"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},[s._v("optionA")]),a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"selected and disabled"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},[s._v("optionB")])]],2),a("p",[s._v("You just need to add the "),a("code",[s._v("disabled")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selected and disabled"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'selected and disabled'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Suitable for choosing from some mutually exclusive options.")]),a("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 () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio2,expression:"radio2"}],domProps:{value:s.radio2},on:{input:function(t){s.radio2=t}}},[a("el-radio",{attrs:{label:3}},[s._v("optionA")]),a("el-radio",{attrs:{label:6}},[s._v("optionB")]),a("el-radio",{attrs:{label:9}},[s._v("optionC")])],1)],1),a("p",[s._v("Combine "),a("code",[s._v("<el-radio-group>")]),s._v(" with "),a("code",[s._v("<el-radio>")]),s._v(" to display a radio group. Bind a variable with "),a("code",[s._v("v-model")]),s._v(" of "),a("code",[s._v("<el-radio-group>")]),s._v(" element and set label value in "),a("code",[s._v("<el-radio>")]),s._v(". It also provides "),a("code",[s._v("change")]),s._v(" event with the current value as its parameter.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("optionA"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("optionB"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("optionC"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Radio with button styles.")]),a("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 () {\n      return {\n        radio3: 'New York',\n        radio4: 'New York',\n        radio5: 'New York'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio3,expression:"radio3"}],domProps:{value:s.radio3},on:{input:function(t){s.radio3=t}}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio4,expression:"radio4"}],domProps:{value:s.radio4},on:{input:function(t){s.radio4=t}}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington",disabled:!0}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio5,expression:"radio5"}],attrs:{disabled:!0},domProps:{value:s.radio5},on:{input:function(t){s.radio5=t}}},[a("el-radio-button",{attrs:{label:"New York"}}),a("el-radio-button",{attrs:{label:"Washington"}}),a("el-radio-button",{attrs:{label:"Los Angeles"}}),a("el-radio-button",{attrs:{label:"Chicago"}})],1)],1),a("p",[s._v("You just need to change "),a("code",[s._v("<el-radio>")]),s._v(" element into "),a("code",[s._v("<el-radio-button>")]),s._v(" element. We also provide "),a("code",[s._v("size")]),s._v(" attribute for these buttons: "),a("code",[s._v("large")]),s._v(" and "),a("code",[s._v("small")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n  "),a("span",{
-staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Los Angeles"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Chicago"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New York'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute is used to disable the radio.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-group"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-group","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio button group")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"button-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number/boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("native 'name' attribute")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("the size of radio buttons")]),a("td",[s._v("string")]),a("td",[s._v("large/small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("border and background color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("font color when button is active")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the bound value changes")]),a("td",[s._v("the label value of the chosen radio")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("the value of radio")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether radio is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(197)},function(s,t,a){var l=a(13)(a(198),a(199),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for rating")]),s._m(1),a("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() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default")]),a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Color for different levels")]),a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)]),a("p",[s._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 "),a("code",[s._v("colors")]),s._v(" attribute, and their two thresholds can be defined by "),a("code",[s._v("low-threshold")]),s._v(" and "),a("code",[s._v("high-threshold")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Color for different levels"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Using text to indicate rating score")]),a("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() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{texts:["oops","disappointed","normal","good","great"],"show-text":""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("p",[s._v("Add attribute "),a("code",[s._v("show-text")]),s._v(" to display text at the right of Rate. You can assign texts for different scores using "),a("code",[s._v("texts")]),s._v(". "),a("code",[s._v("texts")]),s._v(" is an array whose length should be equal to the max score "),a("code",[s._v("max")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":texts")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['oops', 'disappointed', 'normal', 'good', 'great']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("You can use different icons to distinguish different rate components.")]),a("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() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],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"]},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1),a("p",[s._v("You can customize icons for three different levels using "),a("code",[s._v("icon-classes")]),s._v(". In this example, we also use "),a("code",[s._v("void-icon-class")]),s._v(" to set the icon if it is unselected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Read-only Rate is for displaying rating score. Half star is supported.")]),a("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() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value} points"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})],1),a("p",[s._v("Use attribute "),a("code",[s._v("disabled")]),s._v(" to make the component read-only. Add "),a("code",[s._v("show-text")]),s._v(" to display the rating score at the right side. Additionally, you can use attribute "),a("code",[s._v("text-template")]),s._v(" to provide a text template. It must contain "),a("code",[s._v("{value}")]),s._v(", and "),a("code",[s._v("{value}")]),s._v(" will be replaced with the rating score.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value} points"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"with-text"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#with-text","aria-hidden":"true"}},[s._v("¶")]),s._v(" With text")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-icons"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-icons","aria-hidden":"true"}},[s._v("¶")]),s._v(" More icons")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"read-only"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#read-only","aria-hidden":"true"}},[s._v("¶")]),s._v(" Read-only")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("max rating score")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Rate is read-only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("whether picking half start is allowed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("threshold value between low and medium level. The value itself will be included in low level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("threshold value between medium and high level. The value itself will be included in high level")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("color array for icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("color of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("color of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("array of class names of icons. It should have 3 elements, each of which corresponds with a score level")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("class name of unselected icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("class name of unselected read-only icons")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("whether to display texts")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("color of texts")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("text array")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("text template when the component is read-only")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("Triggers when rate value is changed")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(201)},function(s,t,a){var l=a(13)(a(202),a(203),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("When there are plenty of options, use a drop-down menu to display and select desired ones.")]),s._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" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value,expression:"value"}],attrs:{placeholder:"Select"},domProps:{value:s.value},on:{input:function(t){s.value=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v(" is the value of "),a("code",[s._v("el-option")]),s._v(" that is currently selected.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"
-},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._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" :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() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{placeholder:"Select"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}},s._l(s.options2,function(s){return a("el-option",{attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("disabled")]),s._v(" in "),a("code",[s._v("el-option")]),s._v(" to "),a("code",[s._v("true")]),s._v(" to disable this option.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._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" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n  \n\n',script:"\n  export default {\n    data() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:"",placeholder:"Select"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("disabled")]),s._v(" of "),a("code",[s._v("el-select")]),s._v(" to make it disabled.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  \n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._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" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{clearable:"",placeholder:"Select"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("clearable")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" and a clear icon will appear. Note that "),a("code",[s._v("clearable")]),s._v(" is only for single select.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._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" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{multiple:"",placeholder:"Select"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set "),a("code",[s._v("multiple")]),s._v(" attribute for "),a("code",[s._v("el-select")]),s._v(" to enable multiple mode. In this case, the value of "),a("code",[s._v("v-model")]),s._v(" will be an array of selected options.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._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" :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() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{placeholder:"Select"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}},s._l(s.cities,function(t){return a("el-option",{attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("Insert customized HTML templates into the slot of "),a("code",[s._v("el-option")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._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" :label="group.label">\n      <el-option v-for="item in group.options" :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() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{placeholder:"Select"},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}},s._l(s.options3,function(t){return a("el-option-group",{attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("Use "),a("code",[s._v("el-option-group")]),s._v(" to group the options, and its "),a("code",[s._v("label")]),s._v(" attribute stands for the name of the group.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popular cities'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'City name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value8,expression:"value8"}],attrs:{filterable:"",placeholder:"Select"},domProps:{value:s.value8},on:{input:function(t){s.value8=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Adding "),a("code",[s._v("filterable")]),s._v(" to "),a("code",[s._v("el-select")]),s._v(" enables filtering. By default, Select will find all the options whose "),a("code",[s._v("label")]),s._v(" attribute contains the input value. If you prefer other filtering strategies, you can pass the "),a("code",[s._v("filter-method")]),s._v(". "),a("code",[s._v("filter-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option2'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option3'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option4'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Option5'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._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() {\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() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value9,expression:"value9"}],attrs:{multiple:"",filterable:"",remote:"",placeholder:"Please enter a keyword","remote-method":s.remoteMethod,loading:s.loading},domProps:{value:s.value9},on:{input:function(t){s.value9=t}}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("Set the value of "),a("code",[s._v("filterable")]),s._v(" and "),a("code",[s._v("remote")]),s._v(" with "),a("code",[s._v("true")]),s._v(" to enable remote search, and you should pass the "),a("code",[s._v("remote-method")]),s._v(". "),a("code",[s._v("remote-method")]),s._v(" is a "),a("code",[s._v("Function")]),s._v(" that gets called when the input value changes, and its parameter is the current input value. Note that if "),a("code",[s._v("el-option")]),s._v(" is rendered with the "),a("code",[s._v("v-for")]),s._v(" directive, you should add the "),a("code",[s._v("key")]),s._v(" attribute for "),a("code",[s._v("el-option")]),s._v(". Its value needs to be unique, such as "),a("code",[s._v("item.value")]),s._v(" in the following example.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Please enter a keyword"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n      });\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      remoteMethod(query) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n          setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n            });\n          }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._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" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value10,expression:"value10"}],attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"Choose tags for your article"},domProps:{value:s.value10},on:{input:function(t){s.value10=t}}},s._l(s.options5,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("By using the "),a("code",[s._v("allow-create")]),s._v(" attribute, users can create new items by typing in the input box. Note that for "),a("code",[s._v("allow-create")]),s._v(" to work, "),a("code",[s._v("filterable")]),s._v(" must be "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Choose tags for your article"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-option"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-option","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled option")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"clearable-single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#clearable-single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Clearable single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"remote-search"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#remote-search","aria-hidden":"true"}},[s._v("¶")]),s._v(" Remote Search")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"create-new-items"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#create-new-items","aria-hidden":"true"}},[s._v("¶")]),s._v(" Create new items")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether multiple-select is activated")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Select is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("whether single select can be cleared")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("maximum number of options user can select when "),a("code",[s._v("multiple")]),s._v(" is "),a("code",[s._v("true")]),s._v(". No limit when set to 0")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("the name attribute of select input")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Select")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("whether Select is filterable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("whether creating new items is allowed. To use this, "),a("code",[s._v("filterable")]),s._v(" must be true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("custom filter method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("whether options are loaded from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("custom remote search method")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("whether Select is loading data from server")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("displayed text while loading data from server")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("Loading")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("displayed text when no data matches the filtering query")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No matching data")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("displayed text when there is no options")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("No data")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Select's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])]);
-},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the selected value changes")]),a("td",[s._v("current selected value")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("triggers when the dropdown appears/disappears")]),a("td",[s._v("true when it appears, and false otherwise")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("triggers when a tag is removed in multiple mode")]),a("td",[s._v("removed tag value")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("name of the group")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether to disable all options in this group")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of option")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("label of option, same as "),a("code",[s._v("value")]),s._v(" if omitted")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether option is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(205)},function(s,t,a){var l=a(13)(a(206),a(207),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8]}},methods:{formatTooltip:function(s){return s/100}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Drag the slider within a fixed range.")]),s._m(1),a("p",[s._v("The current value is displayed when the slider is being dragged.")]),a("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() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Default value")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Customized initial value")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Hide Tooltip")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"show-tooltip":!1},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Format Tooltip")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{"format-tooltip":s.formatTooltip},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Disabled")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{disabled:""},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})],1)]],2),a("p",[s._v("Customize the initial value of the slider by setting the binding value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Default value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Customized initial value"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Hide Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Format Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Disabled"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatTooltip(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("The options can be discrete.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints not displayed")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{step:10},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Breakpoints displayed")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{step:10,"show-stops":""},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}})],1)]],2),a("p",[s._v("Set step size with the "),a("code",[s._v("step")]),s._v(" attribute. You can display breakpoints by setting the "),a("code",[s._v("show-stops")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints not displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Breakpoints displayed"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Set value via a input box.")]),a("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() {\n      return {\n        value8: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value8,expression:"value8"}],attrs:{"show-input":""},domProps:{value:s.value8},on:{input:function(t){s.value8=t}}})],1)]],2),a("p",[s._v("Set the "),a("code",[s._v("show-input")]),s._v(" attribute to display an input box on the right.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Selecting a range of values is supported.")]),a("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() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value9,expression:"value9"}],attrs:{range:"","show-stops":"",max:10},domProps:{value:s.value9},on:{input:function(t){s.value9=t}}})],1)]],2),a("p",[s._v("Setting the "),a("code",[s._v("range")]),s._v(" attribute activates range mode, where the binding value is an array made up of two boundary values.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"discrete-values"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#discrete-values","aria-hidden":"true"}},[s._v("¶")]),s._v(" Discrete values")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slider-with-input-box"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-with-input-box","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider with input box")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"range-selection"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#range-selection","aria-hidden":"true"}},[s._v("¶")]),s._v(" Range selection")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("minimum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("maximum value")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Slider is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("step size")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("whether to display an input box, works when "),a("code",[s._v("range")]),s._v(" is false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("whether to display control buttons when "),a("code",[s._v("show-input")]),s._v(" is true")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("whether to display breakpoints")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("whether to display tooltip value")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("format to display tooltip value")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("whether to select a range")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when the value changes (if the mouse is being dragged, this event only fires when the mouse is released)")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(209)},function(s,t,a){var l=a(13)(a(210),a(211),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("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),a("p",[s._v("Simple step bar.")]),a("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() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("Next step")])],1),a("p",[s._v("Set "),a("code",[s._v("active")]),s._v(" attribute with "),a("code",[s._v("Number")]),s._v(" type, which indicates the index of steps and starts from 0. You can set "),a("code",[s._v("space")]),s._v(" attribute when the width of the step needs to be fixed which accepts "),a("code",[s._v("Boolean")]),s._v(" type. The unit of the "),a("code",[s._v("space")]),s._v(" attribute is "),a("code",[s._v("px")]),s._v(". If not set, it is responsive. Setting the "),a("code",[s._v("finish-status")]),s._v(" attribute can change the state of the steps that have been completed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"
-},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("Next step"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      next() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Shows the status of the step for each step.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"Done"}}),a("el-step",{attrs:{title:"Processing"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("Use "),a("code",[s._v("title")]),s._v(" attribute to set the name of the step, or override the attribute by using a named "),a("code",[s._v("slot")]),s._v(". We have listed all the slot names for you at the end of this page.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Done"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Processing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("There is description for each step.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1}},[a("el-step",{attrs:{title:"Step 1",description:"Some description"}}),a("el-step",{attrs:{title:"Step 2",description:"Some description"}}),a("el-step",{attrs:{title:"Step 3",description:"Some description"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Some description"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("A variety of custom icons can be used in the step bar.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"Step 1",icon:"edit"}}),a("el-step",{attrs:{title:"Step 2",icon:"upload"}}),a("el-step",{attrs:{title:"Step 3",icon:"picture"}})],1)],1),a("p",[s._v("The icon is set by the "),a("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 "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Vertical step bars.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"Step 1"}}),a("el-step",{attrs:{title:"Step 2"}}),a("el-step",{attrs:{title:"Step 3"}})],1)],1),a("p",[s._v("You only need to set the "),a("code",[s._v("direction")]),s._v(" attribute to"),a("code",[s._v("vertical")]),s._v(" in the "),a("code",[s._v("el-steps")]),s._v(" element.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Step 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-that-contains-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-that-contains-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar that contains status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-description"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-description","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with description")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-bar-with-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-bar-with-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step bar with icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"vertical-step-bar"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#vertical-step-bar","aria-hidden":"true"}},[s._v("¶")]),s._v(" Vertical step bar")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("the spacing of each step, will be responsive if omitted. Support percentage.")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("display direction")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("current activation step")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("status of current step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("status of end step")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("whether step description is centered")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("center whole "),a("code",[s._v("Steps")]),s._v(" component")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("step icon")]),a("td",[s._v("icons provided by Element Icon. Can be overwritten by a named slot if you want to use  custom icons")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("current status. It will be automatically set by Steps if not configured.")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Name")]),a("th",[s._v("Description")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("custom icon")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("step title")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("step description")])])])])}]}},function(s,t,a){s.exports=a(213)},function(s,t,a){var l=a(13)(a(214),a(215),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Switch is used for switching between two opposing states.")]),s._m(1),a("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() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}}),a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"on-color":"#13ce66","off-color":"#ff4949"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1),a("p",[s._v("Bind "),a("code",[s._v("v-model")]),s._v(" to a "),a("code",[s._v("Boolean")]),s._v(" typed variable. You can add "),a("code",[s._v("on-text")]),s._v(" or "),a("code",[s._v("off-text")]),s._v(" attribute to show texts when the component is "),a("code",[s._v("on")]),s._v(" or "),a("code",[s._v("off")]),s._v(", respectively. The "),a("code",[s._v("on-color")]),s._v(" and "),a("code",[s._v("off-color")]),s._v(" attribute decides the background color in two states.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value3" on-text="" off-text disabled>\n</el-switch>\n<el-switch v-model="value3" disabled>\n</el-switch>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"on-text":"","off-text":"",disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}}),a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("p",[s._v("Adding the "),a("code",[s._v("disabled")]),s._v(" attribute disables Switch.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"disabled"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#disabled","aria-hidden":"true"}},[s._v("¶")]),s._v(" Disabled")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Switch is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("width of Switch")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58 (with text) / 46 (no text)")])]),a("tr",[a("td",[s._v("on-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("on")]),s._v(" state, overrides "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-close-icon")]),a("td",[s._v("class name of the icon displayed when in "),a("code",[s._v("off")]),s._v(" state, overrides "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("text displayed when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("background color when in "),a("code",[s._v("on")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("background color when in "),a("code",[s._v("off")]),s._v(" state")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("input name of Switch")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when value changes")]),a("td",[s._v("value after changing")])])])])}]}},function(s,t,a){s.exports=a(217)},function(s,t,a){var l=a(13)(a(218),a(219),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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"}],currentRow:null,multipleSelection:[]}},methods:{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)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;
-return a("section",[s._m(0),a("p",[s._v("Display multiple data with similar format. You can sort, filter, compare your data in a table.")]),s._m(1),a("p",[s._v("Basic table is just for data display.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("After setting attribute "),a("code",[s._v("data")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" with an object array, you can use "),a("code",[s._v("prop")]),s._v(" (corresponding to a key of the object in "),a("code",[s._v("data")]),s._v(" array) in "),a("code",[s._v("el-table-column")]),s._v(" to insert data to table columns, and set the attribute "),a("code",[s._v("label")]),s._v(" to define the column name. You can also use the attribute "),a("code",[s._v("width")]),s._v(" to define the width of columns.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v("  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n      data() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Striped table makes it easier to distinguish different rows.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("stripe")]),s._v(" accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._v(", table will be striped.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By default, Table has no vertical border. If you need it, you can set attribute "),a("code",[s._v("border")]),s._v(" to "),a("code",[s._v("true")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v('You can highlight your table content to distinguish between "success, information, warning, danger" and other states.')]),a("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(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() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("Use "),a("code",[s._v("row-class-name")]),s._v(" in "),a("code",[s._v("el-table")]),s._v(" to add custom classes to a certain row. Then you can style it with custom classes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      tableRowClassName(row, index) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(":  [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("When there are too many rows, you can use a fixed header.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address"}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header without any other codes.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("When there are too many columns, you can fix some of them.")]),a("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 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() {\n        console.log('click');\n      }\n    },\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:{default:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("Detail")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("Edit")])]}}})],1)]],2),a("p",[s._v("Attribute "),a("code",[s._v("fixed")]),s._v(" is used in "),a("code",[s._v("el-table-column")]),s._v(", it accepts a "),a("code",[s._v("Boolean")]),s._v(". If "),a("code",[s._v("true")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Detail"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'click'")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("When you have huge chunks of data to put in a table, you can fix the header and columns at the same time.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)]],2),a("p",[s._v("Fix columns and header at the same time by combining the above two examples.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"
-},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._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.")]),a("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 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(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"Operations",width:"120"},scopedSlots:{default:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n          Remove\n        ")])]}}})],1)]],2),a("p",[s._v("By setting the attribute "),a("code",[s._v("max-height")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(", you can fix the table header. The table body scrolls only if the height of the rows exceeds the max height value.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n          Remove\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      deleteRow(index, rows) {\n        rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("When the data structure is complex, you can use group header to show the data hierarchy.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",width:"150"}}),a("el-table-column",{attrs:{label:"Delivery Info"}},[a("el-table-column",{attrs:{prop:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{label:"Address Info"}},[a("el-table-column",{attrs:{prop:"state",label:"State",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"City",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"Zip",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("Only need to place el-table-column inside a el-table-column, you can achieve group header.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Delivery Info"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address Info"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"State"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"City"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{
-staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("Single row selection is supported.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :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</template>\n\n\n',script:"\n  export default {\n    data() {\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      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"Date",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address"}})],1)]],2),a("p",[s._v("Table supports single row selection. You can activate it by adding the "),a("code",[s._v("highlight-current-row")]),s._v(" attribute. An event called "),a("code",[s._v("current-change")]),s._v(" will be triggered when row selection changes, and its parameters are the rows after and before this change: "),a("code",[s._v("currentRow")]),s._v(" and "),a("code",[s._v("oldCurrentRow")]),s._v(". If you need to display row index, you can add a new "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" attribute assigned to "),a("code",[s._v("index")]),s._v(", and you will see the index starting from 1.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current-row")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"index"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("You can also select multiple rows.")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :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 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</template>\n\n\n',script:"\n  export default {\n    data() {\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      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"Date",width:"120"},scopedSlots:{default:function(t){return[s._v(s._s(t.row.date))]}}}),a("el-table-column",{attrs:{property:"name",label:"Name",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"Address","show-overflow-tooltip":""}})],1)]],2),a("p",[s._v("Activating multiple selection is easy: simply add an "),a("code",[s._v("el-table-column")]),s._v(" with its "),a("code",[s._v("type")]),s._v(" set to "),a("code",[s._v("selection")]),s._v(". Apart from multiple selection, this example also uses "),a("code",[s._v("show-overflow-tooltip")]),s._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 "),a("code",[s._v("show-overflow-tooltip")]),s._v(", which accepts a "),a("code",[s._v("Boolean")]),s._v(" value. When set "),a("code",[s._v("true")]),s._v(", the extra content will show in tooltip when hover on the cell.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selection"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"55"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelectionChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("Sort the data to find or compare data quickly.")]),a("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() {\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(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}})],1)]],2),a("p",[s._v("Set table attribute "),a("code",[s._v("default-sort")]),s._v(" to determine default sort column and order. Set attribute "),a("code",[s._v("sortable")]),s._v(" in a certain column to sort the data based on this column. It accepts "),a("code",[s._v("Boolean")]),s._v(" with a default value "),a("code",[s._v("false")]),s._v(". In this example we use another attribute named "),a("code",[s._v("formatter")]),s._v(" to format the value of certain columns. It accepts a function which has two parameters: "),a("code",[s._v("row")]),s._v(" and "),a("code",[s._v("column")]),s._v(". You can handle it according to your own needs.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"
-},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("Filter the table to find desired data.")]),a("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">\n      <template 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() {\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(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"Date",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"Name",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"Address",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"Tag",width:"100",filters:[{text:"Home",value:"Home"},{text:"Office",value:"Office"}],"filter-method":s.filterTag},scopedSlots:{default:function(t){return[a("el-tag",{attrs:{type:"Home"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}}})],1)]],2),a("p",[s._v("Set attribute "),a("code",[s._v("filters")]),s._v(" and "),a("code",[s._v("filter-method")]),s._v(" in "),a("code",[s._v("el-table-column")]),s._v(" makes this column filterable. "),a("code",[s._v("filters")]),s._v(" is an array, and "),a("code",[s._v("filter-method")]),s._v(" is a function deciding which rows are displayed. It has two parameters: "),a("code",[s._v("value")]),s._v(" and "),a("code",[s._v("row")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: 'Home', value: 'Home' }, { text: 'Office', value: 'Office' }]\"")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === 'Home' ? 'primary' : 'success'\"")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Home'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Office'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("Customize table column so it can be integrated with other components.")]),a("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 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 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 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() {\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(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"Date",width:"180"},scopedSlots:{default:function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}}}),a("el-table-column",{attrs:{label:"Name",width:"180"},scopedSlots:{default:function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("Name: "+s._s(t.row.name))]),a("p",[s._v("Addr: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}}}),a("el-table-column",{attrs:{label:"Operations"},scopedSlots:{default:function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("Edit")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("Delete")])]}}})],1)]],2),a("p",[s._v("You have access to the following data: row, column, $index and store (state management of Table) by "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(". (Scoped slots is supported from "),a("code",[s._v("1.1")]),s._v(", "),a("code",[s._v("inline-template")]),s._v(" still works, but it's not recommended).")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Name: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Addr: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Operations"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("Edit"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("Delete"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._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.")]),a("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 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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:{default:function(t){return[a("p",[s._v("State: "+s._s(t.row.state))]),a("p",[s._v("City: "+s._s(t.row.city))]),a("p",[s._v("Address: "+s._s(t.row.address))]),a("p",[s._v("Zip: "+s._s(t.row.zip))])]}}}),a("el-table-column",{attrs:{label:"Date",prop:"date"}}),a("el-table-column",{attrs:{label:"Name",prop:"name"}})],1)]],2),a("p",[s._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 '),a("code",[s._v("Scoped slot")]),s._v(" in custom column templates.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("State: "),a("span",[s._v("{{")]),s._v(" props.row.state "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("City: "),a("span",[s._v("{{")]),s._v(" props.row.city "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Address: "),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("Zip: "),a("span",[s._v("{{")]),s._v(" props.row.zip "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tom'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("state")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'California'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'No. 189, Grove St, Los Angeles'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CA 90036'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"striped-table"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#striped-table","aria-hidden":"true"}},[s._v("¶")]),s._v(" Striped Table")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-border"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-border","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with border")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-status"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-status","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with status")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-column"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-column","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed column")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-with-fixed-columns-and-header"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-with-fixed-columns-and-header","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table with fixed columns and header")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fluid-height-table-with-fixed-header-and-columns"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fluid-height-table-with-fixed-header-and-columns","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fluid-height Table with fixed header (and columns)")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"grouping-table-head"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#grouping-table-head","aria-hidden":"true"}},[s._v("¶")]),s._v(" Grouping table head")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"single-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#single-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Single select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"multiple-select"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#multiple-select","aria-hidden":"true"}},[s._v("¶")]),s._v(" Multiple select")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"sorting"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#sorting","aria-hidden":"true"}},[s._v("¶")]),s._v(" Sorting")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filter"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filter","aria-hidden":"true"}},[s._v("¶")]),s._v(" Filter")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-column-template"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-column-template","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom column template")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"expandable-row"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#expandable-row","aria-hidden":"true"}},[s._v("¶")]),s._v(" Expandable row")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("table data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table's height. By default it has an "),a("code",[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")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table's max-height. The height of the table starts from "),a("code",[s._v("auto")]),s._v(" until it reaches the maxHeight limit. The "),a("code",[s._v("maxHeight")]),s._v(" is measured in pixels, same as "),a("code",[s._v("height")])]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("whether table is striped")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("whether table has vertical border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("whether width of column automatically fits its container")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("whether table header is visible")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("whether current row is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("key of current row, a set only prop")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("function that returns custom class names for a row, or a string assigning class names for every row")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("function that returns custom style for a row,  or a string assigning custom style for every row")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("key of row data, used for optimizing rendering. Required if "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("Displayed text when data is empty. You can customize this area with "),a("code",[s._v('slot="empty"')])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("No Data")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('whether expand all rows by default, only works when the table has a column type="expand"')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("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")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("set the default sort column and order. property "),a("code",[s._v("prop")]),s._v(" is used to set default sort column, property "),a("code",[s._v("order")]),s._v(" is used to set default sort order")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("if "),a("code",[s._v("prop")]),s._v(" is set, and "),a("code",[s._v("order")]),s._v(" is not set, then "),a("code",[s._v("order")]),s._v(" is default to ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" property")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("triggers when user clicks the checkbox in a row")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("triggers when user clicks the checkbox in table header")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("triggers when selection changes")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("triggers when hovering into a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("triggers when hovering out of a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("triggers when clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("triggers when double clicking a cell")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("triggers when clicking a row")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("triggers when user right clicks on a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("triggers when double clicking a row")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("triggers when clicking a column header")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("triggers when Table's sorting changes")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("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")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current row changes")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("triggers when finish dragging header")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("triggers when user expands or collapses a row")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("clear selection, might be useful when "),a("code",[s._v("reserve-selection")]),s._v(" is on")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("toggle if a certain row is selected. With the second parameter, you can directly set if this row is selected")]),a("td",[s._v("row, selected")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of the column. If set to "),a("code",[s._v("selection")]),s._v(", the column will display checkbox. If set to "),a("code",[s._v("index")]),s._v(", the column will display index of the row (staring from 1). If set to "),a("code",[s._v("expand")]),s._v(", the column will display expand icon.")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("column label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("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")]),a("td",[s._v("string")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("field name. You can also use its alias: "),a("code",[s._v("property")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("column width")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("column minimum width. Columns with "),a("code",[s._v("width")]),s._v(" has a fixed width, while columns with "),a("code",[s._v("min-width")]),s._v(" has a width that is distributed in proportion")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("whether column is fixed at left/right. Will be fixed at left if "),a("code",[s._v("true")])]),a("td",[s._v("string/boolean")]),a("td",[s._v("true/left/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("render function for table header of this column")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("whether column can be sorted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("sorting method, works when "),a("code",[s._v("sortable")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("whether column width can be resized, works when "),a("code",[s._v("border")]),s._v(" of "),a("code",[s._v("el-table")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("function that formats content")]),a("td",[s._v("Function(row, column)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("whether to hide extra content and show them in a tooltip when hovering on the cell")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("string")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("alignment of the table header. If omitted, the value of the above "),a("code",[s._v("align")]),s._v(" attribute will be applied")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("class name of cells in the column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("class name of the label of this column")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("function that determines if a certain row can be selected, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("whether to reserve selection after data refreshing, works when "),a("code",[s._v("type")]),s._v(" is 'selection'")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("an array of data filtering options. For each element in this array, "),a("code",[s._v("text")]),s._v(" and "),a("code",[s._v("value")]),s._v(" are required")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("whether data filtering supports multiple options")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("data filtering method. If "),a("code",[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 "),a("code",[s._v("true")])]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("filter value for selected data, might be useful when table header is rendered with "),a("code",[s._v("render-header")])]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(221)},function(s,t,a){var l=a(13)(a(222),a(223),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Divide data collections which are related yet belong to different types.")]),s._m(1),a("p",[s._v("Basic and concise tabs.")]),a("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() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],domProps:{value:s.activeName},on:{"tab-click":s.handleClick,input:function(t){s.activeName=t}}},[a("el-tab-pane",{attrs:{label:"User",name:"first"}},[s._v("User")]),a("el-tab-pane",{
-attrs:{label:"Config",name:"second"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role",name:"third"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task",name:"fourth"}},[s._v("Task")])],1)]],2),a("p",[s._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 "),a("code",[s._v("value")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Tabs styled as cards.")]),a("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() {\n      return {\n        activeName: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{attrs:{type:"card"},on:{"tab-click":s.handleClick}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)]],2),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("card")]),s._v(" can get a card-styled tab.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Border card tabs.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"User"}},[s._v("User")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("type")]),s._v(" to "),a("code",[s._v("border-card")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"User"')]),s._v(">")]),s._v("User"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("You can use named slot to customize the tab label content.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" Route")]),s._v("\n    Route\n  ")]),a("el-tab-pane",{attrs:{label:"Config"}},[s._v("Config")]),a("el-tab-pane",{attrs:{label:"Role"}},[s._v("Role")]),a("el-tab-pane",{attrs:{label:"Task"}},[s._v("Task")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" Route"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    Route\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Config"')]),s._v(">")]),s._v("Config"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Role"')]),s._v(">")]),s._v("Role"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Task"')]),s._v(">")]),s._v("Task"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("Only card type Tabs support addable & closeable.")]),a("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" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\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(targetName, action) {\n        if (action === 'add') {\n          let 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          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let 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(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.editableTabsValue,expression:"editableTabsValue"}],attrs:{type:"card",editable:""},domProps:{value:s.editableTabsValue},on:{edit:s.handleTabsEdit,input:function(t){s.editableTabsValue=t}}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleTabsEdit(targetName, action) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n          });\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n            tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\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(targetName) {\n        let 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(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let 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(tab => tab.name !== targetName);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n    add tab\n  ")])],1),a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.editableTabsValue2,expression:"editableTabsValue2"}],attrs:{type:"card",closable:""},domProps:{value:s.editableTabsValue2},on:{"tab-remove":s.removeTab,input:function(t){s.editableTabsValue2=t}}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n  >")]),s._v("\n    add tab\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),a("span",{
-staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"card-style"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-style","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card Style")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"border-card"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#border-card","aria-hidden":"true"}},[s._v("¶")]),s._v(" Border card")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom Tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"add-close-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#add-close-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Add & close tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"customized-trigger-button-of-new-tab"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#customized-trigger-button-of-new-tab","aria-hidden":"true"}},[s._v("¶")]),s._v(" Customized trigger button of new tab")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("type of Tab")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("whether Tab is addable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether Tab is addable and closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("name of the selected tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("name of first tab")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("triggers when a tab is clicked")]),a("td",[s._v("clicked tab")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("triggers when tab-remove button is clicked")]),a("td",[s._v("name of the removed tab")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("triggers when tab-add button is clicked")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("triggers when tab-add button or tab-remove is clicked")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("title of the tab")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tab is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("identifier corresponding to the activeName of Tabs, representing the alias of the tab-pane")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ordinal number of the tab-pane in the sequence, i.e. the first tab-pane is '1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab is closable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(225)},function(s,t,a){var l=a(13)(a(226),a(227),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Used for marking and selection.")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("Tag One")]),a("el-tag",{attrs:{type:"gray"}},[s._v("Tag Two")]),a("el-tag",{attrs:{type:"primary"}},[s._v("Tag Three")]),a("el-tag",{attrs:{type:"success"}},[s._v("Tag Four")]),a("el-tag",{attrs:{type:"warning"}},[s._v("Tag Five")]),a("el-tag",{attrs:{type:"danger"}},[s._v("Tag Six")])],1),a("p",[s._v("Use the "),a("code",[s._v("type")]),s._v(" attribute to define Tag's type. In addition, the "),a("code",[s._v("color")]),s._v(" attribute can be used to set the background color of the Tag.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("Tag One"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("Tag Two"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Tag Three"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("Tag Four"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("Tag Five"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("Tag Six"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :closable="true" :type="tag.type">\n{{tag.name}}\n</el-tag>\n\n\n',script:"\n  export default {\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[a("code",[s._v("closable")]),s._v(" attribute can be used to define a removable tag. It accepts a "),a("code",[s._v("Boolean")]),s._v(". By default the removal of Tag has a fading animation. If you don't want to use it, you can set the "),a("code",[s._v("close-transition")]),s._v(" attribute, which accepts a "),a("code",[s._v("Boolean")]),s._v(", to "),a("code",[s._v("true")]),s._v(". "),a("code",[s._v("close")]),s._v(" event triggers when Tag is removed.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 4'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 5'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 6'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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() {\n      return {\n        dynamicTags: ['Tag 1', 'Tag 2', 'Tag 3'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let 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}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.inputValue,expression:"inputValue"}],ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},domProps:{value:s.inputValue},on:{blur:s.handleInputConfirm,input:function(t){s.inputValue=t}},nativeOn:{keyup:function(t){s._k(t.keyCode,"enter",13)||s.handleInputConfirm(t)}}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'Tag 1'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 2'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 3'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(tag) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      },\n\n      showInput() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"removable-tag"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#removable-tag","aria-hidden":"true"}},[s._v("¶")]),s._v(" Removable Tag")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"edit-dynamically"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#edit-dynamically","aria-hidden":"true"}},[s._v("¶")]),s._v(" Edit Dynamically")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("You can use the "),a("code",[s._v("close")]),s._v(" event to add and remove tag dynamically.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("theme")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("whether Tab can be removed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("whether the removal animation is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("whether Tag has a highlighted border")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("background color of the tag")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("triggers when Tab is removed")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(229)},function(s,t,a){var l=a(13)(a(230),a(231),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Use Time Picker for time input.")]),s._m(1),a("p",[s._v("Provide a list of fixed time for users to choose.")]),a("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() {\n      return {\n        value1: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"Select time"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("p",[s._v("Use "),a("code",[s._v("el-time-select")]),s._v(" label, then assign start time, end time and time step with "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(" and "),a("code",[s._v("step")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Select time"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Can pick an arbitrary time.")]),a("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() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"Arbitrary time"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]],2),a("p",[s._v("Use "),a("code",[s._v("el-time-picker")]),s._v(" label, and you can limit the time range by using "),a("code",[s._v("selectableRange")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Arbitrary time"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("If start time is picked at first, then the end time will change accordingly.")]),a("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() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.startTime,expression:"startTime"}],attrs:{placeholder:"Start time","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},domProps:{value:s.startTime},on:{input:function(t){s.startTime=t}}}),a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.endTime,expression:"endTime"}],attrs:{placeholder:"End time","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},domProps:{value:s.endTime},on:{input:function(t){
-s.endTime=t}}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Start time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"End time"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Can pick an arbitrary time range.")]),a("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() {\n      return {\n        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"is-range":"",placeholder:"Pick a time range"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]],2),a("p",[s._v("We can pick a time range by adding an "),a("code",[s._v("is-range")]),s._v(" attribute.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Pick a time range"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-picker"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-picker","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time picker")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fixed-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fixed-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Fixed time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"arbitrary-time-range"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#arbitrary-time-range","aria-hidden":"true"}},[s._v("¶")]),s._v(" Arbitrary time range")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("whether DatePicker is read only")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether DatePicker is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("whether the input is editable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("Whether to show clear button")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("size of Input")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("placeholder")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("value of the picker")]),a("td",[s._v("date for Time Picker, and string for Time Select")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("alignment")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")]),a("td")]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for TimePicker's dropdown")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("additional options, check the table below")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("start time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("end time")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("time step")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("minimum time, any time before this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("maximum time, any time after this time will be disabled")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("available time range, e.g."),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("or"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("format of the picker")]),a("td",[s._v("string")]),a("td",[s._v("hour "),a("code",[s._v("HH")]),s._v(", minute "),a("code",[s._v("mm")]),s._v(", second "),a("code",[s._v("ss")])]),a("td",[s._v("HH:mm:ss")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("triggers when input value changes")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(233)},function(s,t,a){a(234);var l=a(13)(a(236),a(237),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display prompt information for mouse hover.")]),s._m(1),a("p",[s._v("Tooltip has 9 placements.")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left prompts info",placement:"top-start"}},[a("el-button",[s._v("top-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center prompts info",placement:"top"}},[a("el-button",[s._v("top")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right prompts info",placement:"top-end"}},[a("el-button",[s._v("top-end")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top prompts info",placement:"left-start"}},[a("el-button",[s._v("left-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center prompts info",placement:"left"}},[a("el-button",[s._v("left")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom prompts info",placement:"left-end"}},[a("el-button",[s._v("left-end")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top prompts info",placement:"right-start"}},[a("el-button",[s._v("right-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center prompts info",placement:"right"}},[a("el-button",[s._v("right")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom prompts info",placement:"right-end"}},[a("el-button",[s._v("right-end")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left prompts info",placement:"bottom-start"}},[a("el-button",[s._v("bottom-start")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center prompts info",placement:"bottom"}},[a("el-button",[s._v("bottom")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right prompts info",placement:"bottom-end"}},[a("el-button",[s._v("bottom-end")])],1)],1)])]),a("p",[s._v("Use attribute "),a("code",[s._v("content")]),s._v(" to set the display content when hover. The attribute "),a("code",[s._v("placement")]),s._v(" determines the position of the tooltip. Its value is "),a("code",[s._v("[orientation]-[alignment]")]),s._v(" with four orientations "),a("code",[s._v("top")]),s._v(", "),a("code",[s._v("left")]),s._v(", "),a("code",[s._v("right")]),s._v(", "),a("code",[s._v("bottom")]),s._v(" and three alignments "),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v(", "),a("code",[s._v("null")]),s._v(", and the default alignment is null. Take "),a("code",[s._v('placement="left-end"')]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("top-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("left-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("right-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-start"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{
-staticClass:"hljs-string"},[s._v('"Bottom Right prompts info"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("bottom-end"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("Set "),a("code",[s._v("effect")]),s._v(" to modify theme, and the default value is "),a("code",[s._v("dark")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Display multiple lines of text and set their format.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("multiple lines"),a("br"),s._v("second line")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("Override attribute "),a("code",[s._v("content")]),s._v(" of "),a("code",[s._v("el-tooltip")]),s._v(" by adding a slot named "),a("code",[s._v("content")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("multiple lines"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("second line"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("In addition to basic usages, there are some attributes that allow you to customize your own:")]),s._m(6),s._m(7),s._m(8),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"click to close tooltip function",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("click to "+s._s(s.disabled?"active":"close")+" tooltip function")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click to close tooltip function"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("click to "),a("span",[s._v("{{")]),s._v("disabled ? 'active' : 'close'"),a("span",[s._v("}}")]),s._v(" tooltip function"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" ease;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-leave-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("transition")]),s._v(": all ."),a("span",{staticClass:"hljs-number"},[s._v("3s")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("cubic-bezier")]),s._v("(1.0, 0.5, 0.8, 1.0);\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".slide-fade-enter")]),s._v(", "),a("span",{staticClass:"hljs-selector-class"},[s._v(".expand-fade-leave-active")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-left")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("20px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"theme"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#theme","aria-hidden":"true"}},[s._v("¶")]),s._v(" Theme")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip has two themes: "),a("code",[s._v("dark")]),s._v(" and "),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"more-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#more-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" More Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"advanced-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#advanced-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Advanced usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._v(" attribute allows you to customize the animation in which the tooltip shows or hides, and the default value is "),a("code",[s._v("fade-in-linear")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("disabled")]),s._v(" attribute allows you to disable "),a("code",[s._v("tooltip")]),s._v(". You just need set it to "),a("code",[s._v("true")]),s._v(".")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("In fact, Tooltip is an extension based on "),a("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,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("The "),a("code",[s._v("router-link")]),s._v(" component is not supported in tooltip, please use "),a("code",[s._v("vm.$router.push")]),s._v(".")]),a("p",[s._v("Disabled form elements are not supported in tooltip, see more information at "),a("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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("Tooltip theme")]),a("td",[s._v("string")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("display content, can be overridden by "),a("code",[s._v("slot#content")])]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("position of Tooltip")]),a("td",[s._v("string")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("visibility of Tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("whether Tooltip is disabled")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("offset of the Tooltip")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("animation name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("fade-in-linear")])])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("whether an arrow is displayed. For more information, check "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" page")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" parameters")]),a("td",[s._v("Object")]),a("td",[s._v("refer to "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" doc")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("delay of appearance, in millisecond")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("whether to control Tooltip manually. "),a("code",[s._v("mouseenter")]),s._v(" and "),a("code",[s._v("mouseleave")]),s._v(" won't have effects if set to "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("custom class name for Tooltip's popper")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("whether the mouse can enter the tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(239)},function(s,t,a){var l=a(13)(a(240),a(241),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0;var a=[{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"}]}]}],l=[{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"}]}],n=1e3,e=[{name:"region1"},{name:"region2"}],i=1,v={label:"name",children:"zones"},_={children:"children",label:"label"};t.default={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){if(0===s.level)return t([{name:"Root1"},{name:"Root2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s=void 0;s=a?[{name:"zone"+i++},{name:"zone"+i++}]:[],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:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;return s("span",null,[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(e,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,regions:e,defaultProps:_,props:v,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Display a set of data with hierarchies.")]),s._m(1),a("p",[s._v("Basic tree structure.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._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.")]),a("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(() => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckChange(data, checked, indeterminate) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      },\n      loadNode(node, resolve) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Root2'")]),s._v(" }]);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"
-},[s._v("this")]),s._v(".count++\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("Tree nodes can be initially expanded or checked")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("Use "),a("code",[s._v("default-expanded-keys")]),s._v(" and "),a("code",[s._v("default-checked-keys")]),s._v(" to set initially expanded and initially checked nodes respectively. Note that for them to work, "),a("code",[s._v("node-key")]),s._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.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("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() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\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() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("get by node")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("get by key")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("set by node")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("set by key")]),a("el-button",{on:{click:s.resetChecked}},[s._v("reset")])],1)],1),a("p",[s._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, "),a("code",[s._v("node-key")]),s._v(" is required.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("get by node"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("get by key"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("set by node"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("set by key"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("reset"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n        }]);\n      },\n      setCheckedKeys() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n      },\n      resetChecked() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("The content of tree nodes can be customized, so you can add icons or buttons as you will")]),a("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  let id = 1000;\n\n  export default {\n    data() {\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(store, data) {\n        store.append({ id: id++, label: 'testtest', children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\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={ () => this.append(store, data) }>Append</el-button>\n              <el-button size=\"mini\" on-click={ () => this.remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("Use "),a("code",[s._v("render-content")]),s._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, "),a("code",[s._v("render-content")]),s._v(" will work if relevant dependencies are correctly configured.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n  export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        data2: [{\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            children: [{\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        defaultProps: {\n          children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n          <span>\n            <span>\n              <span>{node.label}</span>\n            </span>\n            <span style="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; margin-right: 20px"')]),s._v(">\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append</el-button>\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("Tree nodes can be filtered")]),a("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(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.filterText,expression:"filterText"}],attrs:{placeholder:"Filter keyword"},domProps:{value:s.filterText},on:{input:function(t){s.filterText=t}}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("Invoke the "),a("code",[s._v("filter")]),s._v(" method of the Tree instance to filter tree nodes. Its parameter is the filtering keyword. Note that for it to work, "),a("code",[s._v("filter-node-method")]),s._v(" is required, and its value is the filtering method.")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Filter keyword"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"
-},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Only one node among the same level can be expanded at one time.")]),a("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() {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level one 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level two 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Level three 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"basic-usage"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#basic-usage","aria-hidden":"true"}},[s._v("¶")]),s._v(" Basic usage")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"selectable"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#selectable","aria-hidden":"true"}},[s._v("¶")]),s._v(" Selectable")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"default-expanded-and-default-checked"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#default-expanded-and-default-checked","aria-hidden":"true"}},[s._v("¶")]),s._v(" Default expanded and default checked")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checking-tree-nodes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checking-tree-nodes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checking tree nodes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"custom-node-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#custom-node-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" Custom node content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tree-node-filtering"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-node-filtering","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree node filtering")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"accordion"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#accordion","aria-hidden":"true"}},[s._v("¶")]),s._v(" Accordion")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("tree data")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("text displayed when data is void")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("unique identity key name for nodes, its value should be unique across the whole tree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("configuration options, see the following table")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("method for loading subtree data")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("render function for tree node")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("whether current node is highlighted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("key of current node, a set only prop")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("whether to expand all nodes by default")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("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.")]),a("td",[s._v("—")]),a("td",[s._v("true")]),a("td")]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("whether to expand father node when a child node is expanded")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("array of keys of initially expanded nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("whether node is selectable")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("whether checked state of a node not affects its father and child nodes when "),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("array of keys of initially checked nodes")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("this function will be executed on each node when use filter method. if return "),a("code",[s._v("false")]),s._v(", tree node will be hidden.")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("whether only one node among the same level can be expanded at one time")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("horizontal indentation of nodes in adjacent levels in pixels")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("specify which key of node object is used as the node's label")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("specify which key of node object is used as the node's subtree")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"method"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#method","aria-hidden":"true"}},[s._v("¶")]),s._v(" Method")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" has the following method, which returns the currently selected array of nodes.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Method")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("filter all tree nodes, filtered nodes will be hidden")]),a("td",[s._v("Accept a parameter which will be used as first parameter for filter-node-method")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of nodes")]),a("td",[s._v("Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("td",[s._v("an array of nodes to be checked")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("If the node can be selected ("),a("code",[s._v("show-checkbox")]),s._v(" is "),a("code",[s._v("true")]),s._v("), it returns the currently selected array of node's keys")]),a("td",[s._v("(leafOnly) Accept a boolean type parameter whose default value is "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("set certain nodes to be checked, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("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 "),a("code",[s._v("false")]),s._v(". If the parameter is "),a("code",[s._v("true")]),s._v(", it only returns the currently selected array of sub-nodes.")])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("set node to be checked or not, only works when "),a("code",[s._v("node-key")]),s._v(" is assigned")]),a("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,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("triggers when a node is clicked")]),a("td",[s._v("three parameters: node object corresponding to the node clicked, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("triggers when the selected state of the node changes")]),a("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")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("triggers when current node changes")]),a("td",[s._v("two parameters: node object corresponding to the current node, "),a("code",[s._v("node")]),s._v(" property of TreeNode")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("triggers when current node open")]),a("td",[s._v("three parameters: node object corresponding to the node opened, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("triggers when current node close")]),a("td",[s._v("three parameters: node object corresponding to the node closed, "),a("code",[s._v("node")]),s._v(" property of TreeNode, TreeNode itself")])])])])}]}},function(s,t,a){s.exports=a(243)},function(s,t,a){var l=a(13)(null,a(244),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography")]),a("p",[s._v("We create a font convention to ensure the best presentation across different platforms.")]),a("h3",{attrs:{id:"chinese-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chinese-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" Chinese Font")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"english-numberic-font"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#english-numberic-font","aria-hidden":"true"}},[s._v("¶")]),s._v(" English / Numberic Font")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"font-convention"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-convention","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font Convention")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("Main Title")]),a("td",{staticClass:"h1"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("Title")]),a("td",{staticClass:"h2"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("Small Title")]),a("td",{staticClass:"h3"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("Body")]),a("td",{staticClass:"text-regular"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("Body (small)")]),a("td",{staticClass:"text-small"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("Supplementary text")]),a("td",{staticClass:"text-smaller"},[s._v("Build with Element")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(246)},function(s,t,a){var l=a(13)(a(247),a(248),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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!(s.size>4e7)||(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,a=s.size/1024/1024<2;return t||this.$message.error("Avatar picture must be JPG format!"),a||this.$message.error("Avatar picture size can not exceed 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Upload files by clicking or drag-and-drop")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("p",[s._v("Customize upload button type and text using "),a("code",[s._v("slot")]),s._v(".")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{
-staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const 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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture must be JPG format!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'Avatar picture size can not exceed 2MB!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogVisible,expression:"dialogVisible"}],attrs:{size:"tiny"},domProps:{value:s.dialogVisible},on:{input:function(t){s.dialogVisible=t}}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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() {\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(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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() {\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(file, fileList) {\n        this.fileList3 = fileList.slice(-3);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("Click to upload")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("Click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("You can drag your file to a certain area to upload it.")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("Drop file here or "),a("em",[s._v("click to upload")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("Drop file here or "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("click to upload"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("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() {\n        this.$refs.upload.submit();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("select file")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",
-type:"success"},on:{click:s.submitUpload}},[s._v("upload to server")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("jpg/png files with a size less than 500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("select file"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("upload to server"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("jpg/png files with a size less than 500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"click-to-upload-files"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#click-to-upload-files","aria-hidden":"true"}},[s._v("¶")]),s._v(" Click to upload files")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"user-avatar-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#user-avatar-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" User avatar upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("before-upload")]),s._v(" hook to limit the upload file format and size.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"photo-wall"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#photo-wall","aria-hidden":"true"}},[s._v("¶")]),s._v(" Photo Wall")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("list-type")]),s._v(" to change the fileList style.")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"filelist-with-thumbnail"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#filelist-with-thumbnail","aria-hidden":"true"}},[s._v("¶")]),s._v(" FileList with thumbnail")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"file-list-control"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#file-list-control","aria-hidden":"true"}},[s._v("¶")]),s._v(" File list control")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Use "),a("code",[s._v("on-change")]),s._v(" hook function to control upload file list")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"drag-to-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#drag-to-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Drag to upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"manual-upload"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#manual-upload","aria-hidden":"true"}},[s._v("¶")]),s._v(" Manual upload")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Attribute")]),a("th",[s._v("Description")]),a("th",[s._v("Type")]),a("th",[s._v("Accepted Values")]),a("th",[s._v("Default")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("required, request URL")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("request headers")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("whether uploading multiple files is permitted")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("additions options of request")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("key name for uploaded file")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("whether cookies are sent")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-upload-list")]),a("td",[s._v("whether to show the uploaded file list")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("whether to activate drag and drop mode")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("accepted "),a("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 "),a("code",[s._v("thumbnail-mode")]),s._v(" is "),a("code",[s._v("true")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("hook function when clicking the uploaded files")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("hook function when files are removed")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("hook function when uploaded successfully")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("hook function when some errors occurs")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("hook function when some progress occurs")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("hook function when file status change")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("hook function before uploading with the file to be uploaded as its parameter. If "),a("code",[s._v("false")]),s._v(" or a "),a("code",[s._v("Promise")]),s._v(" is returned, uploading will be aborted")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("thumbnail-mode")]),a("td",[s._v("whether thumbnail is displayed")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("default uploaded files, i.e: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("type of fileList")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("whether to auto upload file")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("override default xhr behavior, allowing you to implement your own upload-file's request")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("clear the uploaded file list")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(250)},function(s,t,a){a(251);var l=a(13)(a(253),a(254),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{hello:function(){alert("Hello World!")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于页面中展示重要的提示信息。")]),s._m(1),a("p",[s._v("页面中的非浮层元素，不会自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success">\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info">\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning">\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error">\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success"}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info"}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning"}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error"}})]],2),a("p",[s._v("Alert 组件提供四种主题，由"),a("code",[s._v("type")]),s._v("属性指定，默认值为"),a("code",[s._v("info")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("自定义关闭按钮为文字或其他符号。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="不可关闭的 alert" type="success" :closable="false">\n  </el-alert>\n  <el-alert title="自定义 close-text" type="info" close-text="知道了">\n  </el-alert>\n  <el-alert title="设置了回调的 alert" type="warning" @close="hello">\n  </el-alert>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      hello() {\n        alert('Hello World!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"不可关闭的 alert",type:"success",closable:!1}}),a("el-alert",{attrs:{title:"自定义 close-text",type:"info","close-text":"知道了"}}),a("el-alert",{attrs:{title:"设置了回调的 alert",type:"warning"},on:{close:s.hello}})]],2),a("p",[s._v("在 Alert 组件中，你可以设置是否可关闭，关闭按钮的文本以及关闭时的回调函数。"),a("code",[s._v("closable")]),s._v("属性决定是否可关闭，接受"),a("code",[s._v("boolean")]),s._v("，默认为"),a("code",[s._v("true")]),s._v("。你可以设置"),a("code",[s._v("close-text")]),s._v("属性来代替右侧的关闭图标，注意："),a("code",[s._v("close-text")]),s._v("必须为文本。设置"),a("code",[s._v("close")]),s._v("事件来设置关闭时的回调。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"不可关闭的 alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"自定义 close-text"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("close-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"知道了"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"设置了回调的 alert"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hello"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      hello() {\n        alert("),a("span",{staticClass:"hljs-string"},[s._v("'Hello World!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("表示某种状态时提升可读性。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success" show-icon>\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info" show-icon>\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning" show-icon>\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error","show-icon":""}})]],2),a("p",[s._v("通过设置"),a("code",[s._v("show-icon")]),s._v("属性来显示 Alert 的 icon，这能更有效地向用户展示你的显示意图。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含标题和内容，解释更详细的警告。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="带辅助性文字介绍" type="success" description="这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……">\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"带辅助性文字介绍",type:"success",description:"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"}})]],2),a("p",[s._v("除了必填的"),a("code",[s._v("title")]),s._v("属性外，你可以设置"),a("code",[s._v("description")]),s._v("属性来帮助你更好地介绍，我们称之为辅助性文字。辅助性文字只能存放单行文本，会自动换行显示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"带辅助性文字介绍"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一句绕口令：黑灰化肥会挥发发灰黑化肥挥发；灰黑化肥会挥发发黑灰化肥发挥。 黑灰化肥会挥发发灰黑化肥黑灰挥发化为灰……"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-alert title="成功提示的文案" type="success" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="消息提示的文案" type="info" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="警告提示的文案" type="warning" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n  <el-alert title="错误提示的文案" type="error" description="文字说明文字说明文字说明文字说明文字说明文字说明" show-icon>\n  </el-alert>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-alert",{attrs:{title:"成功提示的文案",type:"success",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"消息提示的文案",type:"info",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"警告提示的文案",type:"warning",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}}),a("el-alert",{attrs:{title:"错误提示的文案",type:"error",description:"文字说明文字说明文字说明文字说明文字说明文字说明","show-icon":""}})]],2),a("p",[s._v("最后，这是一个同时具有 icon 和辅助性文字的样例。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"成功提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"警告提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"错误提示的文案"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"error"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"文字说明文字说明文字说明文字说明文字说明文字说明"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("show-icon")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-alert")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"alert-jing-gao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#alert-jing-gao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Alert 警告")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-guan-bi-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-guan-bi-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义关闭按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-icon-he-fu-zhu-xing-wen-zi-jie-shao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有 icon 和辅助性文字介绍")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("title")])]),a("td",[s._v("标题，"),a("strong",[s._v("必选参数")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("辅助性文字。也可通过默认 slot 传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-text")]),a("td",[s._v("关闭按钮自定义文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-icon")]),a("td",[s._v("是否显示图标")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭alert时触发的事件")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(256)},function(s,t,a){a(257),a(259);var l=a(13)(null,a(261),"data-v-3971f377",null);
-s.exports=l.exports},function(s,t){},,function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("出现在按钮、图标旁的数字或状态标记。")]),s._m(1),a("p",[s._v("展示新消息数量。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="12" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="3" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n<el-dropdown trigger="click">\n  <span class="el-dropdown-link">\n    点我查看<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      评论\n      <el-badge class="mark" :value="12">\n    </el-badge></el-dropdown-item>\n    <el-dropdown-item class="clearfix">\n      回复\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:12}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:3}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    点我查看"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      评论\n      "),a("el-badge",{staticClass:"mark",attrs:{value:12}})],1),a("el-dropdown-item",{staticClass:"clearfix"},[s._v("\n      回复\n      "),a("el-badge",{staticClass:"mark",attrs:{value:3}})],1)],1)],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("属性，它接受"),a("code",[s._v("Number")]),s._v("或者"),a("code",[s._v("String")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    点我查看"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      评论\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n      回复\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(" />")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义最大值。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge :value="200" :max="99" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge :value="100" :max="10" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:200,max:99}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:100,max:10}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("由"),a("code",[s._v("max")]),s._v("属性定义，它接受一个"),a("code",[s._v("Number")]),s._v("，需要注意的是，只有当"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("Number")]),s._v("时，它才会生效。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"99"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以显示数字以外的文本内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge value="new" class="item">\n  <el-button size="small">评论</el-button>\n</el-badge>\n<el-badge value="hot" class="item">\n  <el-button size="small">回复</el-button>\n</el-badge>\n\n\n',script:null,style:"\n.item {\n  margin-top: 10px;\n  margin-right: 40px;\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{value:"new"}},[a("el-button",{attrs:{size:"small"}},[s._v("评论")])],1),a("el-badge",{staticClass:"item",attrs:{value:"hot"}},[a("el-button",{attrs:{size:"small"}},[s._v("回复")])],1)],1),a("p",[s._v("定义"),a("code",[s._v("value")]),s._v("为"),a("code",[s._v("String")]),s._v("类型是时可以用于显示自定义文本。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"new"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("评论"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hot"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("回复"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("以红点的形式标注需要关注的内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-badge is-dot class="item">数据查询</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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[s._v("数据查询")]),a("el-badge",{staticClass:"item",attrs:{"is-dot":""}},[a("el-button",{staticClass:"share-button",attrs:{icon:"share",type:"primary"}})],1)],1),a("p",[s._v("除了数字外，设置"),a("code",[s._v("is-dot")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("数据查询"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("is-dot")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share-button"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-badge")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n"),a("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10px")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("40px")]),s._v(";\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"badge-biao-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#badge-biao-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" Badge 标记")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zui-da-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zui-da-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 最大值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-hong-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-hong-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小红点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("显示值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("is-dot")]),a("td",[s._v("小圆点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hidden")]),a("td",[s._v("隐藏 badge")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(263)},function(s,t,a){var l=a(13)(null,a(264),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("显示当前页面的路径，快速返回之前的任意页面。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-breadcrumb separator="/">\n  <el-breadcrumb-item :to="{ path: \'/\' }">首页</el-breadcrumb-item>\n  <el-breadcrumb-item>活动管理</el-breadcrumb-item>\n  <el-breadcrumb-item>活动列表</el-breadcrumb-item>\n  <el-breadcrumb-item>活动详情</el-breadcrumb-item>\n</el-breadcrumb>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-breadcrumb",{attrs:{separator:"/"}},[a("el-breadcrumb-item",{attrs:{to:{path:"/"}}},[s._v("首页")]),a("el-breadcrumb-item",[s._v("活动管理")]),a("el-breadcrumb-item",[s._v("活动列表")]),a("el-breadcrumb-item",[s._v("活动详情")])],1)],1),a("p",[s._v("在"),a("code",[s._v("el-breadcrumb")]),s._v("中使用"),a("code",[s._v("el-breadcrumb-item")]),s._v("标签表示从首页开始的每一级。Element 提供了一个"),a("code",[s._v("separator")]),s._v("属性，在"),a("code",[s._v("el-breadcrumb")]),s._v("标签中设置它来决定分隔符，它只能是字符串，默认为斜杠"),a("code",[s._v("/")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("separator")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"/"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":to")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{ path: '/' }\"")]),s._v(">")]),s._v("首页"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动列表"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("活动详情"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-breadcrumb")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"breadcrumb-mian-bao-xie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-mian-bao-xie","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb 面包屑")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("separator")]),a("td",[s._v("分隔符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("斜杠'/'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"breadcrumb-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#breadcrumb-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Breadcrumb Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("to")]),a("td",[s._v("路由跳转对象，同 "),a("code",[s._v("vue-router")]),s._v(" 的 "),a("code",[s._v("to")])]),a("td",[s._v("string/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("replace")]),a("td",[s._v("在使用 to 进行路由跳转时，启用 replace 将不会向 history 添加新记录")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(266)},function(s,t,a){a(267);var l=a(13)(a(269),a(270),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={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"),t=s[2];(0,l.addClass)(t,"intro-block")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用的操作按钮。")]),s._m(1),a("p",[s._v("基础的按钮用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button>默认按钮</el-button>\n<el-button type="primary">主要按钮</el-button>\n<el-button type="text">文字按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",[s._v("默认按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"text"}},[s._v("文字按钮")])],1),a("p",[s._v("Button 组件默认提供7种主题，由"),a("code",[s._v("type")]),s._v("属性来定义，默认为"),a("code",[s._v("default")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("默认按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("按钮不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button :plain="true" :disabled="true">主要按钮</el-button>\n<el-button type="primary" :disabled="true">主要按钮</el-button>\n<el-button type="text" :disabled="true">文字按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{plain:!0,disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"primary",disabled:!0}},[s._v("主要按钮")]),a("el-button",{attrs:{type:"text",disabled:!0}},[s._v("文字按钮")])],1),a("p",[s._v("你可以使用"),a("code",[s._v("disabled")]),s._v("属性来定义按钮是否可用，它接受一个"),a("code",[s._v("Boolean")]),s._v("值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("主要按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("文字按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("不同的颜色倾向代表不同的提示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认显示颜色</span>\n  <span class="wrapper">\n    <el-button type="success">成功按钮</el-button>\n    <el-button type="warning">警告按钮</el-button>\n    <el-button type="danger">危险按钮</el-button>\n    <el-button type="info">信息按钮</el-button>\n  </span>\n</div>\n<div class="block">\n  <span class="demonstration">hover 显示颜色</span>\n  <span class="wrapper">\n    <el-button :plain="true" type="success">成功按钮</el-button>\n    <el-button :plain="true" type="warning">警告按钮</el-button>\n    <el-button :plain="true" type="danger">危险按钮</el-button>\n    <el-button :plain="true" type="info">信息按钮</el-button>\n  </span>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认显示颜色")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{type:"danger"}},[s._v("危险按钮")]),a("el-button",{attrs:{type:"info"}},[s._v("信息按钮")])],1)]),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("hover 显示颜色")]),a("span",{staticClass:"wrapper"},[a("el-button",{attrs:{plain:!0,type:"success"}},[s._v("成功按钮")]),a("el-button",{attrs:{plain:!0,type:"warning"}},[s._v("警告按钮")]),a("el-button",{attrs:{plain:!0,type:"danger"}},[s._v("危险按钮")]),a("el-button",{attrs:{plain:!0,type:"info"}},[s._v("信息按钮")])],1)])]),a("p",[s._v("朴素按钮同样设置了不同的"),a("code",[s._v("type")]),s._v("属性对应的样式（可选值同上），默认为"),a("code",[s._v("info")]),s._v("。设置"),a("code",[s._v("plain")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("。注意，在该情况下，"),a("code",[s._v("type")]),s._v("虽然可以为"),a("code",[s._v("text")]),s._v("，但是是没有意义的，会显示为"),a("code",[s._v("text button")]),s._v("的样式。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认显示颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{
-staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 显示颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"wrapper"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("成功按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("警告按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("危险按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"info"')]),s._v(">")]),s._v("信息按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("带图标的按钮可增强辨识度(有文字)或节省空间(无文字)。")]),a("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">搜索</el-button>\n<el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}}),a("el-button",{attrs:{type:"primary",icon:"search"}},[s._v("搜索")]),a("el-button",{attrs:{type:"primary"}},[s._v("上传"),a("i",{staticClass:"el-icon-upload el-icon--right"})])],1),a("p",[s._v("设置"),a("code",[s._v("icon")]),s._v("属性即可，icon 的列表可以参考 Element 的 icon 组件，也可以设置在文字右边的 icon ，只要使用"),a("code",[s._v("i")]),s._v("标签即可，可以使用自定义图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("搜索"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("上传"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("以按钮组的方式出现，常用于多项类似操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button-group>\n  <el-button type="primary" icon="arrow-left">上一页</el-button>\n  <el-button type="primary">下一页<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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"arrow-left"}},[s._v("上一页")]),a("el-button",{attrs:{type:"primary"}},[s._v("下一页"),a("i",{staticClass:"el-icon-arrow-right el-icon--right"})])],1),a("el-button-group",[a("el-button",{attrs:{type:"primary",icon:"edit"}}),a("el-button",{attrs:{type:"primary",icon:"share"}}),a("el-button",{attrs:{type:"primary",icon:"delete"}})],1)],1),a("p",[s._v("使用"),a("code",[s._v("<el-button-group>")]),s._v("标签来嵌套你的按钮。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"arrow-left"')]),s._v(">")]),s._v("上一页"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("下一页"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-arrow-right el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button-group")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击按钮后进行数据加载操作，在按钮上显示加载状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" :loading="true">加载中</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",loading:!0}},[s._v("加载中")])],1),a("p",[s._v("要设置为 loading 状态，只要设置"),a("code",[s._v("loading")]),s._v("属性为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("加载中"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("Button 组件提供除了默认值以外的三种尺寸，可以在不同场景下选择合适的按钮尺寸。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="primary" size="large">大型按钮</el-button>\n<el-button type="primary">正常按钮</el-button>\n<el-button type="primary" size="small">小型按钮</el-button>\n<el-button type="primary" size="mini">超小按钮</el-button>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"primary",size:"large"}},[s._v("大型按钮")]),a("el-button",{attrs:{type:"primary"}},[s._v("正常按钮")]),a("el-button",{attrs:{type:"primary",size:"small"}},[s._v("小型按钮")]),a("el-button",{attrs:{type:"primary",size:"mini"}},[s._v("超小按钮")])],1),a("p",[s._v("额外的尺寸："),a("code",[s._v("large")]),s._v("、"),a("code",[s._v("small")]),s._v("、"),a("code",[s._v("mini")]),s._v("，通过设置"),a("code",[s._v("size")]),s._v("属性来配置它们。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(">")]),s._v("大型按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("正常按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("小型按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(">")]),s._v("超小按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"button-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#button-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" Button 按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-yan-se-qing-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-yan-se-qing-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有颜色倾向")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-an-niu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-an-niu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标按钮")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jia-zai-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large,small,mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("primary,success,warning,danger,info,text")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("plain")]),a("td",[s._v("是否朴素按钮")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否加载中状态")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用状态")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标，已有的图标库中的图标名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("是否默认聚焦")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("native-type")]),a("td",[s._v("原生 type 属性")]),a("td",[s._v("string")]),a("td",[s._v("button,submit,reset")]),a("td",[s._v("button")])])])])}]}},function(s,t,a){s.exports=a(272)},function(s,t,a){a(273);var l=a(13)(a(275),a(276),"data-v-140d6310",null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(78),e=l(n);t.default={data:function(){return{currentDate:e.default.format(new Date,"yyyy-MM-dd HH:mm")}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("section",[s._m(0),l("p",[s._v("将信息聚合在卡片容器中展示。")]),s._m(1),l("p",[s._v("包含标题，内容和操作。")]),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;">卡片名称</span>\n    <el-button style="float: right;" type="primary">操作按钮</el-button>\n  </div>\n  <div v-for="o in 4" class="text item">\n    {{\'列表内容 \' + 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",slot:"source"},[l("el-card",{staticClass:"box-card"},[l("div",{staticClass:"clearfix",slot:"header"},[l("span",{staticStyle:{"line-height":"36px"}},[s._v("卡片名称")]),l("el-button",{staticStyle:{float:"right"},attrs:{type:"primary"}},[s._v("操作按钮")])],1),s._l(4,function(t){return l("div",{staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+t)+"\n  ")])})],2)],1),l("p",[s._v("Card 组件包括"),l("code",[s._v("header")]),s._v("和"),l("code",[s._v("body")]),s._v("部分，"),l("code",[s._v("header")]),s._v("部分需要有显式具名 slot 分发，同时也是可选的。")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"header"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"clearfix"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"line-height: 36px;"')]),s._v(">")]),s._v("卡片名称"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"float: right;"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("操作按钮"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),l("p",[s._v("卡片可以只有内容区域。")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-card class="box-card">\n  <div v-for="o in 4" class="text item">\n    {{\'列表内容 \' + 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",slot:"source"},[l("el-card",{staticClass:"box-card"},s._l(4,function(t){return l("div",{staticClass:"text item"},[s._v("\n    "+s._s("列表内容 "+t)+"\n  ")])}))],1),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"box-card"')]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"o in 4"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text item"')]),s._v(">")]),s._v("\n    "),l("span",[s._v("{{")]),s._v("'列表内容 ' + o "),l("span",[s._v("}}")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".text")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".item")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(" "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".box-card")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("480px")]),s._v(";\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),l("p",[s._v("可配置定义更丰富的内容展示。")]),l("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row>\n  <el-col :span="8" v-for="(o, index) in 2" :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>好吃的汉堡</span>\n        <div class="bottom clearfix">\n          <time class="time">{{ currentDate }}</time>\n          <el-button type="text" class="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() {\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",slot:"source"},[l("el-row",s._l(2,function(t,n){return l("el-col",{attrs:{span:8,offset:n>0?2:0}},[l("el-card",{attrs:{"body-style":{padding:"0px"}}},[l("img",{staticClass:"image",attrs:{src:a(80)}}),l("div",{staticStyle:{padding:"14px"}},[l("span",[s._v("好吃的汉堡")]),l("div",{staticClass:"bottom clearfix"},[l("time",{staticClass:"time"},[s._v(s._s(s.currentDate))]),l("el-button",{staticClass:"button",attrs:{type:"text"}},[s._v("操作按钮")])],1)])])],1)}))],1),l("p",[s._v("配置"),l("code",[s._v("body-style")]),s._v("属性来自定义"),l("code",[s._v("body")]),s._v("部分的"),l("code",[s._v("style")]),s._v("，我们还使用了布局组件。")]),l("div",{staticClass:"highlight",slot:"highlight"},[l("pre",[l("code",{staticClass:"hljs language-html"},[l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"(o, index) in 2"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"index > 0 ? 2 : 0"')]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v(":body-style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v("\"{ padding: '0px' }\"")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),l("span",{
-staticClass:"hljs-attr"},[s._v("src")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"~examples/assets/images/hamburger.png"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"image"')]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"padding: 14px;"')]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("好吃的汉堡"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"bottom clearfix"')]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),l("span",[s._v("{{")]),s._v(" currentDate "),l("span",[s._v("}}")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("time")]),s._v(">")]),s._v("\n          "),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),l("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),l("span",{staticClass:"hljs-string"},[s._v('"button"')]),s._v(">")]),s._v("操作按钮"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n      "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-card")]),s._v(">")]),s._v("\n  "),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),l("span",{staticClass:"css"},[s._v("\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".time")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("#999")]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".bottom")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("margin-top")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("13px")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("12px")]),s._v(";\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".button")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("padding")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("float")]),s._v(": right;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".image")]),s._v(" {\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),l("span",{staticClass:"hljs-number"},[s._v("100%")]),s._v(";\n    "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":before")]),s._v(",\n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": table;\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("content")]),s._v(": "),l("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(";\n  }\n  \n  "),l("span",{staticClass:"hljs-selector-class"},[s._v(".clearfix")]),l("span",{staticClass:"hljs-selector-pseudo"},[s._v(":after")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attribute"},[s._v("clear")]),s._v(": both\n  }\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),l("span",{staticClass:"hljs-tag"},[s._v("<"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),l("span",{staticClass:"javascript"},[s._v("\n"),l("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),l("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),l("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),l("span",{staticClass:"hljs-attr"},[s._v("currentDate")]),s._v(": "),l("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),l("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("()\n    };\n  }\n}\n")]),l("span",{staticClass:"hljs-tag"},[s._v("</"),l("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"card-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#card-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Card 卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jian-dan-qia-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-dan-qia-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 简单卡片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-pian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-pian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图片")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("header")]),a("td",[s._v("设置 header，也可以通过 "),a("code",[s._v("slot#header")]),s._v(" 传入 DOM")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("body-style")]),a("td",[s._v("设置 body 的样式")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{ padding: '20px' }")])])])])}]}},function(s,t,a){s.exports=a(278)},function(s,t,a){a(279);var l=a(13)(a(281),a(282),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0",s[0].className+=" small",s[3].className+=" medium"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在有限空间内，循环播放同一类型的图片、文字等内容")]),s._m(1),a("p",[s._v("适用广泛的基础用法")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认 Hover 指示器触发</span>\n    <el-carousel height="150px">\n      <el-carousel-item v-for="item in 4">\n        <h3>{{ item }}</h3>\n      </el-carousel-item>\n    </el-carousel>\n  </div>\n  <div class="block">\n    <span class="demonstration">Click 指示器触发</span>\n    <el-carousel trigger="click" height="150px">\n      <el-carousel-item v-for="item in 4">\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",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 Hover 指示器触发")]),a("el-carousel",{attrs:{height:"150px"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("Click 指示器触发")]),a("el-carousel",{attrs:{trigger:"click",height:"150px"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))],1)]],2),a("p",[s._v("结合使用"),a("code",[s._v("el-carousel")]),s._v("和"),a("code",[s._v("el-carousel-item")]),s._v("标签就得到了一个走马灯。幻灯片的内容是任意的，需要放在"),a("code",[s._v("el-carousel-item")]),s._v("标签中。默认情况下，在鼠标 hover 底部的指示器时就会触发切换。通过设置"),a("code",[s._v("trigger")]),s._v("属性为"),a("code",[s._v("click")]),s._v("，可以达到点击触发的效果。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 Hover 指示器触发"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("Click 指示器触发"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150px"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("150px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n     "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n     "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以将指示器的显示位置设置在容器外部")]),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">\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",slot:"source"},[[a("el-carousel",{attrs:{"indicator-position":"outside"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[a("code",[s._v("indicator-position")]),s._v("属性定义了指示器的位置。默认情况下，它会显示在走马灯内部，设置为"),a("code",[s._v("outside")]),s._v("则会显示在外部；设置为"),a("code",[s._v("none")]),s._v("则不会显示指示器。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("indicator-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"outside"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以设置切换箭头的显示时机")]),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">\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",slot:"source"},[[a("el-carousel",{attrs:{interval:5e3,arrow:"always"}},s._l(4,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[a("code",[s._v("arrow")]),s._v("属性定义了切换箭头的显示时机。默认情况下，切换箭头只有在鼠标 hover 到走马灯上时才会显示；若将"),a("code",[s._v("arrow")]),s._v("设置为"),a("code",[s._v("always")]),s._v("，则会一直显示；设置为"),a("code",[s._v("never")]),s._v("，则会一直隐藏。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"5000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("arrow")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"always"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 4"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("18px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("300px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当页面宽度方向空间空余，但高度方向空间匮乏时，可使用卡片风格")]),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">\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",slot:"source"},[[a("el-carousel",{attrs:{interval:4e3,type:"card",height:"200px"}},s._l(6,function(t){return a("el-carousel-item",[a("h3",[s._v(s._s(t))])])}))]],2),a("p",[s._v("将"),a("code",[s._v("type")]),s._v("属性设置为"),a("code",[s._v("card")]),s._v("即可启用卡片模式。从交互上来说，卡片模式和一般模式的最大区别在于，可以通过直接点击两侧的幻灯片进行切换。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":interval")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4000"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200px"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in 6"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h3")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-carousel")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("h3")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#475669")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("14px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("opacity")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0.75")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  \n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-carousel__item")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":nth-child(2n+1)")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"carousel-zou-ma-deng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-zou-ma-deng","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel 走马灯")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-shi-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-shi-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指示器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qie-huan-jian-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qie-huan-jian-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 切换箭头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("height")]),a("td",[s._v("走马灯的高度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("initial-index")]),a("td",[s._v("初始状态激活的幻灯片的索引，从 0 开始")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("指示器的触发方式")]),a("td",[s._v("string")]),a("td",[s._v("click")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autoplay")]),a("td",[s._v("是否自动切换")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("interval")]),a("td",[s._v("自动切换的时间间隔，单位为毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("indicator-position")]),a("td",[s._v("指示器的位置")]),a("td",[s._v("string")]),a("td",[s._v("outside/none")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("arrow")]),a("td",[s._v("切换箭头的显示时机")]),a("td",[s._v("string")]),a("td",[s._v("always/hover/never")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("走马灯的类型")]),a("td",[s._v("string")]),a("td",[s._v("card")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("幻灯片切换时触发")]),a("td",[s._v("目前激活的幻灯片的索引，原幻灯片的索引")])])])]);
-},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("setActiveItem")]),a("td",[s._v("手动切换幻灯片")]),a("td",[s._v("需要切换的幻灯片的索引，从 0 开始；或相应 "),a("code",[s._v("el-carousel-item")]),s._v(" 的 "),a("code",[s._v("name")]),s._v(" 属性值")])]),a("tr",[a("td",[s._v("prev")]),a("td",[s._v("切换至上一张幻灯片")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("next")]),a("td",[s._v("切换至下一张幻灯片")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"carousel-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#carousel-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Carousel-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("幻灯片的名字，可用作 "),a("code",[s._v("setActiveItem")]),s._v(" 的参数")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(284)},function(s,t,a){a(285);var l=a(13)(a(287),a(288),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{options2:[{label:"江苏",cities:[]},{label:"浙江",cities:[]}],props:{value:"label",children:"cities"},options:[{value:"zhinan",label:"指南",children:[{value:"shejiyuanze",label:"设计原则",children:[{value:"yizhi",label:"一致"},{value:"fankui",label:"反馈"},{value:"xiaolv",label:"效率"},{value:"kekong",label:"可控"}]},{value:"daohang",label:"导航",children:[{value:"cexiangdaohang",label:"侧向导航"},{value:"dingbudaohang",label:"顶部导航"}]}]},{value:"zujian",label:"组件",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:"ziyuan",label:"资源",children:[{value:"axure",label:"Axure Components"},{value:"sketch",label:"Sketch Templates"},{value:"jiaohu",label:"组件交互文档"}]}],optionsWithDisabled:[],selectedOptions:[],selectedOptions2:[],selectedOptions3:["zujian","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(a){s.indexOf("江苏")>-1&&!t.options2[0].cities.length?t.options2[0].cities=[{label:"南京"}]:s.indexOf("浙江")>-1&&!t.options2[1].cities.length&&(t.options2[1].cities=[{label:"杭州"}])},300)},handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当一个数据集合有清晰的层级结构时，可通过级联选择器逐级查看并选择。")]),s._m(1),a("p",[s._v("有两种触发子菜单的方式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认 click 触发子菜单</span>\n  <el-cascader :options="options" v-model="selectedOptions" @change="handleChange">\n  </el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">hover 触发子菜单</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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions: [],\n        selectedOptions2: []\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认 click 触发子菜单")]),a("el-cascader",{directives:[{name:"model",rawName:"v-model",value:s.selectedOptions,expression:"selectedOptions"}],attrs:{options:s.options},domProps:{value:s.selectedOptions},on:{change:s.handleChange,input:function(t){s.selectedOptions=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("hover 触发子菜单")]),a("el-cascader",{directives:[{name:"model",rawName:"v-model",value:s.selectedOptions2,expression:"selectedOptions2"}],attrs:{"expand-trigger":"hover",options:s.options},domProps:{value:s.selectedOptions2},on:{change:s.handleChange,input:function(t){s.selectedOptions2=t}}})],1)]),a("p",[s._v("只需为 Cascader 的"),a("code",[s._v("options")]),s._v("属性指定选项数组即可渲染出一个级联选择器。通过"),a("code",[s._v("expand-trigger")]),s._v("可以定义展开子级菜单的触发方式。本例还展示了"),a("code",[s._v("change")]),s._v("事件，它的参数为 Cascader 的绑定值：一个由各级菜单的值所组成的数组。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认 click 触发子菜单"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 触发子菜单"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("expand-trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{
-staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions2")]),s._v(": []\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-cascader :options="optionsWithDisabled"></el-cascader>\n\n',script:"\n  export default {\n    data() {\n      return {\n        optionsWithDisabled: [{\n          value: 'zhinan',\n          label: '指南',\n          disabled: true,\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.optionsWithDisabled}})],1),a("p",[s._v("本例中，"),a("code",[s._v("options")]),s._v("指定的数组中的第一个元素含有"),a("code",[s._v("disabled: true")]),s._v("键值对，因此是禁用的。在默认情况下，Cascader 会检查数据中每一项的"),a("code",[s._v("disabled")]),s._v("字段是否为"),a("code",[s._v("true")]),s._v("，如果你的数据中表示禁用含义的字段名不为"),a("code",[s._v("disabled")]),s._v("，可以通过"),a("code",[s._v("props")]),s._v("属性来指定（详见下方 API 表格）。当然，"),a("code",[s._v("value")]),s._v("、"),a("code",[s._v("label")]),s._v("和"),a("code",[s._v("children")]),s._v("这三个字段名也可以通过同样的方式指定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"optionsWithDisabled"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("optionsWithDisabled")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可以仅在输入框中显示选中项最后一级的标签，而不是选中项所在的完整路径。")]),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",
-style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"show-all-levels":!1}})],1),a("p",[s._v("属性"),a("code",[s._v("show-all-levels")]),s._v("定义了是否显示完整的路径，将其赋值为"),a("code",[s._v("false")]),s._v("则仅显示最后一级")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-all-levels")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }],\n        selectedOptions3: ['zujian', 'data', 'tag']\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{directives:[{name:"model",rawName:"v-model",value:s.selectedOptions3,expression:"selectedOptions3"}],attrs:{options:s.options},domProps:{value:s.selectedOptions3},on:{input:function(t){s.selectedOptions3=t}}})],1),a("p",[s._v("默认值通过数组的方式指定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selectedOptions3"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{
-staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("selectedOptions3")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击或移入选项即表示选中该项，可用于选择任意一级菜单的选项。")]),a("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() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options,"change-on-select":""}})],1),a("p",[s._v("若需要允许用户选择任意一级选项，则可将"),a("code",[s._v("change-on-select")]),s._v("赋值为"),a("code",[s._v("true")])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"
-},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("当选中某一级时，动态加载该级下的选项。")]),a("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() {\n      return {\n        options2: [{\n          label: '江苏',\n          cities: []\n        }, {\n          label: '浙江',\n          cities: []\n        }],\n        props: {\n          value: 'label',\n          children: 'cities'\n        }\n      };\n    },\n\n    methods: {\n      handleItemChange(val) {\n        console.log('active item:', val);\n        setTimeout(_ => {\n          if (val.indexOf('江苏') > -1 && !this.options2[0].cities.length) {\n            this.options2[0].cities = [{\n              label: '南京'\n            }];\n          } else if (val.indexOf('浙江') > -1 && !this.options2[1].cities.length) {\n            this.options2[1].cities = [{\n              label: '杭州'\n            }];\n          }\n        }, 300);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-cascader",{attrs:{options:s.options2,props:s.props},on:{"active-item-change":s.handleItemChange}})],1),a("p",[s._v("本例的选项数据源在初始化时不包含城市数据。利用"),a("code",[s._v("active-item-change")]),s._v("事件，可以在用户点击某个省份时拉取该省份下的城市数据。此外，本例还展示了"),a("code",[s._v("props")]),s._v("属性的用法。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@active-item-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleItemChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江苏'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'浙江'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": []\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cities'")]),s._v("\n        }\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleItemChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'active item:'")]),s._v(", val);\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'江苏'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v("\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (val.indexOf("),a("span",{staticClass:"hljs-string"},[s._v("'浙江'")]),s._v(") > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(" && !"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities.length) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options2["),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("].cities = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'杭州'")]),s._v("\n            }];\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以快捷地搜索选项并选择。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">只可选择最后一级菜单的选项</span>\n  <el-cascader placeholder="试试搜索：指南" :options="options" filterable></el-cascader>\n</div>\n<div class="block">\n  <span class="demonstration">可选择任意一级菜单的选项</span>\n  <el-cascader placeholder="试试搜索：指南" :options="options" filterable="" change-on-select></el-cascader>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: 'zhinan',\n          label: '指南',\n          children: [{\n            value: 'shejiyuanze',\n            label: '设计原则',\n            children: [{\n              value: 'yizhi',\n              label: '一致'\n            }, {\n              value: 'fankui',\n              label: '反馈'\n            }, {\n              value: 'xiaolv',\n              label: '效率'\n            }, {\n              value: 'kekong',\n              label: '可控'\n            }]\n          }, {\n            value: 'daohang',\n            label: '导航',\n            children: [{\n              value: 'cexiangdaohang',\n              label: '侧向导航'\n            }, {\n              value: 'dingbudaohang',\n              label: '顶部导航'\n            }]\n          }]\n        }, {\n          value: 'zujian',\n          label: '组件',\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: 'ziyuan',\n          label: '资源',\n          children: [{\n            value: 'axure',\n            label: 'Axure Components'\n          }, {\n            value: 'sketch',\n            label: 'Sketch Templates'\n          }, {\n            value: 'jiaohu',\n            label: '组件交互文档'\n          }]\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("只可选择最后一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:""}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("可选择任意一级菜单的选项")]),a("el-cascader",{attrs:{placeholder:"试试搜索：指南",options:s.options,filterable:"","change-on-select":""}})],1)]),a("p",[s._v("将"),a("code",[s._v("filterable")]),s._v("赋值为"),a("code",[s._v("true")]),s._v("即可打开搜索功能。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("只可选择最后一级菜单的选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("可选择任意一级菜单的选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"试试搜索：指南"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"options"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("change-on-select")]),s._v("\n  >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-cascader")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zhinan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'指南'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'shejiyuanze'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'设计原则'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'yizhi'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一致'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'fankui'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'反馈'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'xiaolv'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'效率'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'kekong'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'可控'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'daohang'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'导航'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cexiangdaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'侧向导航'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dingbudaohang'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'顶部导航'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zujian'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Basic'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'layout'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Layout 布局'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Color 色彩'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'typography'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Typography 字体'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'icon'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Icon 图标'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{
-staticClass:"hljs-string"},[s._v("'button'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Button 按钮'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'radio'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Radio 单选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'checkbox'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Checkbox 多选框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Input 输入框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'input-number'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'InputNumber 计数器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'select'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Select 选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'cascader'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Cascader 级联选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'switch'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Switch 开关'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'slider'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Slider 滑块'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'time-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'TimePicker 时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DatePicker 日期选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'datetime-picker'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'DateTimePicker 日期时间选择器'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'upload'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Upload 上传'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rate'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Rate 评分'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'form'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Form 表单'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Data'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'table'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Table 表格'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tag'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tag 标签'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'progress'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Progress 进度条'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tree'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tree 树形控件'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'pagination'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Pagination 分页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'badge'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Badge 标记'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notice'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'alert'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Alert 警告'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'loading'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Loading 加载'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Message 消息提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'message-box'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'MessageBox 弹框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'notification'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Notification 通知'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Navigation'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'menu'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'NavMenu 导航菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tabs'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tabs 标签页'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'breadcrumb'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Breadcrumb 面包屑'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dropdown'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dropdown 下拉菜单'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'steps'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Steps 步骤条'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Others'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'dialog'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dialog 对话框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'tooltip'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tooltip 文字提示'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'popover'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Popover 弹出框'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'card'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Card 卡片'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'carousel'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Carousel 走马灯'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'collapse'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Collapse 折叠面板'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'ziyuan'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'资源'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'axure'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Axure Components'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'sketch'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Sketch Templates'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'jiaohu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'组件交互文档'")]),s._v("\n          }]\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"cascader-ji-lian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cascader-ji-lian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Cascader 级联选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过在数据源中设置 "),a("code",[s._v("disabled")]),s._v(" 字段来声明该选项是禁用的")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-xian-shi-zui-hou-yi-ji"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-xian-shi-zui-hou-yi-ji","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅显示最后一级")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ji-gai-bian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ji-gai-bian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择即改变")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-jia-zai-ci-ji-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-jia-zai-ci-ji-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态加载次级选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("options")]),a("td",[s._v("可选项数据源，键名可通过 "),a("code",[s._v("props")]),s._v(" 属性配置")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体见下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("选中项绑定值")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("自定义浮层类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否支持清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-trigger")]),a("td",[s._v("次级菜单的展开方式")]),a("td",[s._v("string")]),a("td",[s._v("click / hover")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("show-all-levels")]),a("td",[s._v("输入框中是否显示选中值的完整路径")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("debounce")]),a("td",[s._v("搜索关键词输入的去抖延迟，毫秒")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("300")])]),a("tr",[a("td",[s._v("change-on-select")]),a("td",[s._v("是否允许选择任意一级的选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large / small / mini")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("指定选项的值为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定选项标签为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定选项的子选项为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("指定选项的禁用为选项对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("当前值")])]),a("tr",[a("td",[s._v("active-item-change")]),a("td",[s._v("当父级选项变化时触发的事件，仅在 "),a("code",[s._v("change-on-select")]),s._v(" 为 "),a("code",[s._v("false")]),s._v(" 时可用")]),a("td",[s._v("各父级选项组成的数组")])])])])}]}},function(s,t,a){s.exports=a(290)},function(s,t,a){a(291);var l=a(13)(a(293),a(294),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";var a=["上海","北京","广州","深圳"];s.exports={data:function(){return{checkList:["选中且禁用","复选框 A"],checked:!0,checked1:!1,checked2:!0,isValid:"可用",checkAll:!1,cities:a,checkedCities:["上海","北京"],checkedCities1:["上海","北京"],isIndeterminate:!0}},methods:{handleChange:function(s){console.log(s)},handleCheckAllChange:function(s){this.checkedCities=s.target.checked?a:[],this.isIndeterminate=!1},handleCheckedCitiesChange:function(s){var t=s.length;this.checkAll=t===this.cities.length,this.isIndeterminate=t>0&&t<this.cities.length}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("一组备选项中进行多选")]),s._m(1),a("p",[s._v("单独使用可以表示两种状态之间的切换，写在标签中的内容为 checkbox 按钮后的介绍。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <!-- `checked` 为 true 或 false -->\n  <el-checkbox v-model="checked">备选项</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",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked,expression:"checked"}],domProps:{value:s.checked},on:{input:function(t){s.checked=t}}},[s._v("备选项")])]],2),a("p",[s._v("在"),a("code",[s._v("el-checkbox")]),s._v("元素中定义"),a("code",[s._v("v-model")]),s._v("绑定变量，单一的"),a("code",[s._v("checkbox")]),s._v("中，默认绑定变量的值会是"),a("code",[s._v("Boolean")]),s._v("，选中为"),a("code",[s._v("true")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- `checked` 为 true 或 false -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("多选框不可用状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox v-model="checked1" disabled>备选项1</el-checkbox>\n  <el-checkbox v-model="checked2" disabled>备选项</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",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked1,expression:"checked1"}],attrs:{disabled:""},domProps:{value:s.checked1},on:{input:function(t){s.checked1=t}}},[s._v("备选项1")]),a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checked2,expression:"checked2"}],attrs:{disabled:""},domProps:{value:s.checked2},on:{input:function(t){s.checked2=t}}},[s._v("备选项")])]],2),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checked2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checked2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于多个勾选框绑定到同一个数组的情景，通过是否勾选来表示这一组选项中选中的项。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox-group v-model="checkList">\n    <el-checkbox label="复选框 A"></el-checkbox>\n    <el-checkbox label="复选框 B"></el-checkbox>\n    <el-checkbox label="复选框 C"></el-checkbox>\n    <el-checkbox label="禁用" disabled></el-checkbox>\n    <el-checkbox label="选中且禁用" disabled></el-checkbox>\n  </el-checkbox-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        checkList: ['选中且禁用','复选框 A']\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkList,expression:"checkList"}],domProps:{value:s.checkList},on:{input:function(t){s.checkList=t}}},[a("el-checkbox",{attrs:{label:"复选框 A"}}),a("el-checkbox",{attrs:{label:"复选框 B"}}),a("el-checkbox",{attrs:{label:"复选框 C"}}),a("el-checkbox",{attrs:{label:"禁用",disabled:""}}),a("el-checkbox",{attrs:{label:"选中且禁用",disabled:""}})],1)]],2),a("p",[a("code",[s._v("checkbox-group")]),s._v("元素能把多个 checkbox 管理为一组，只需要在 Group 中使用"),a("code",[s._v("v-model")]),s._v("绑定"),a("code",[s._v("Array")]),s._v("类型的变量即可。 "),a("code",[s._v("el-checkbox")]),s._v(" 的 "),a("code",[s._v("label")]),s._v("属性是该 checkbox 对应的值，若该标签中无内容，则该属性也充当 checkbox 按钮后的介绍。"),a("code",[s._v("label")]),s._v("与数组中的元素值相对应，如果存在指定的值则为选中状态，否则为不选中。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkList"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 A"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 B"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"复选框 C"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkList")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'选中且禁用'")]),s._v(","),a("span",{staticClass:"hljs-string"},[s._v("'复选框 A'")]),s._v("]\n      };\n    }\n  };\n")]),a("span",{
-staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</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">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n\n',script:"\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkAll: true,\n        checkedCities: ['上海', '北京'],\n        cities: cityOptions,\n        isIndeterminate: true\n      };\n    },\n    methods: {\n      handleCheckAllChange(event) {\n        this.checkedCities = event.target.checked ? cityOptions : [];\n        this.isIndeterminate = false;\n      },\n      handleCheckedCitiesChange(value) {\n        let 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",slot:"source"},[[a("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:s.checkAll,expression:"checkAll"}],attrs:{indeterminate:s.isIndeterminate},domProps:{value:s.checkAll},on:{change:s.handleCheckAllChange,input:function(t){s.checkAll=t}}},[s._v("全选")]),a("div",{staticStyle:{margin:"15px 0"}}),a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkedCities,expression:"checkedCities"}],domProps:{value:s.checkedCities},on:{change:s.handleCheckedCitiesChange,input:function(t){s.checkedCities=t}}},s._l(s.cities,function(t){return a("el-checkbox",{attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":indeterminate")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"isIndeterminate"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkAll"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckAllChange"')]),s._v(">")]),s._v("全选"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckedCitiesChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkAll")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions,\n        "),a("span",{staticClass:"hljs-attr"},[s._v("isIndeterminate")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckAllChange(event) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkedCities = event.target.checked ? cityOptions : [];\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n      },\n      handleCheckedCitiesChange(value) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" checkedCount = value.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".checkAll = checkedCount === "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".isIndeterminate = checkedCount > "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(" && checkedCount < "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".cities.length;\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._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">{{city}}</el-checkbox>\n  </el-checkbox-group>\n</template>\n\n',script:"\n  const cityOptions = ['上海', '北京', '广州', '深圳'];\n  export default {\n    data() {\n      return {\n        checkedCities1: ['上海', '北京'],\n        cities: cityOptions\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.checkedCities1,expression:"checkedCities1"}],attrs:{min:1,max:2},domProps:{value:s.checkedCities1},on:{input:function(t){s.checkedCities1=t}}},s._l(s.cities,function(t){return a("el-checkbox",{attrs:{label:t}},[s._v(s._s(t))])}))]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" \n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkedCities1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city in cities"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v(">")]),a("span",[s._v("{{")]),s._v("city"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" cityOptions = ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("];\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("checkedCities1")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": cityOptions\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"checkbox-duo-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-duo-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox 多选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"indeterminate-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#indeterminate-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" indeterminate 状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("indeterminate")]),s._v(" 属性用以表示 checkbox 的不确定状态，一般用于实现全选的效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-xiang-mu-shu-liang-de-xian-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-xiang-mu-shu-liang-de-xian-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选项目数量的限制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("min")]),s._v(" 和 "),a("code",[s._v("max")]),s._v(" 属性能够限制可以被勾选的项目的数量。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选中状态的值（只有在"),a("code",[s._v("checkbox-group")]),s._v("或者绑定对象类型为"),a("code",[s._v("array")]),s._v("时有效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("true-label")]),a("td",[s._v("选中时的值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("false-label")]),a("td",[s._v("没有选中时的值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("按钮禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("checked")]),a("td",[s._v("当前是否勾选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indeterminate")]),a("td",[s._v("设置 indeterminate 状态，只负责样式控制")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("可被勾选的 checkbox 的最大数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("可被勾选的 checkbox 的最小数量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"checkbox-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#checkbox-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Checkbox-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发的事件")]),a("td",[s._v("event 事件对象")])])])])}]}},function(s,t,a){s.exports=a(296)},function(s,t,a){a(297);var l=a(13)(a(299),a(300),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeNames:["1"],activeName:"1"}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过折叠面板收纳内容区域")]),s._m(1),a("p",[s._v("可同时展开多个面板，面板之间不影响")]),a("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>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeNames: ['1']\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{directives:[{name:"model",rawName:"v-model",value:s.activeNames,expression:"activeNames"}],domProps:{value:s.activeNames},on:{change:s.handleChange,input:function(t){s.activeNames=t}}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeNames"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeNames")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每次只能展开一个面板")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse v-model="activeName" accordion>\n  <el-collapse-item title="一致性 Consistency" name="1">\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback" name="2">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency" name="3">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability" name="4">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],attrs:{accordion:""},domProps:{value:s.activeName},on:{input:function(t){s.activeName=t}}},[a("el-collapse-item",{attrs:{title:"一致性 Consistency",name:"1"}},[a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])]),a("el-collapse-item",{attrs:{title:"反馈 Feedback",name:"2"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency",name:"3"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability",name:"4"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("p",[s._v("通过 "),a("code",[s._v("accordion")]),s._v(" 属性来设置是否以手风琴模式显示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"一致性 Consistency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-collapse accordion>\n  <el-collapse-item>\n    <template slot="title">\n      一致性 Consistency<i class="header-icon el-icon-information"></i>\n    </template>\n    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>\n    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>\n  </el-collapse-item>\n  <el-collapse-item title="反馈 Feedback">\n    <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>\n    <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>\n  </el-collapse-item>\n  <el-collapse-item title="效率 Efficiency">\n    <div>简化流程：设计简洁直观的操作流程；</div>\n    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>\n    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>\n  </el-collapse-item>\n  <el-collapse-item title="可控 Controllability">\n    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>\n    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>\n  </el-collapse-item>\n</el-collapse>\n',
-script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-collapse",{attrs:{accordion:""}},[a("el-collapse-item",[a("template",{slot:"title"},[s._v("\n      一致性 Consistency"),a("i",{staticClass:"header-icon el-icon-information"})]),a("div",[s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("div",[s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])],2),a("el-collapse-item",{attrs:{title:"反馈 Feedback"}},[a("div",[s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("div",[s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。")])]),a("el-collapse-item",{attrs:{title:"效率 Efficiency"}},[a("div",[s._v("简化流程：设计简洁直观的操作流程；")]),a("div",[s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("div",[s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])]),a("el-collapse-item",{attrs:{title:"可控 Controllability"}},[a("div",[s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("div",[s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("\n      一致性 Consistency"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"header-icon el-icon-information"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"反馈 Feedback"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"效率 Efficiency"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("简化流程：设计简洁直观的操作流程；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"可控 Controllability"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-collapse")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"collapse-zhe-die-mian-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-zhe-die-mian-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse 折叠面板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-xiao-guo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-xiao-guo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴效果")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mian-ban-biao-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mian-ban-biao-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义面板标题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("除了可以通过 "),a("code",[s._v("title")]),s._v(" 属性以外，还可以通过具名 "),a("code",[s._v("slot")]),s._v(" 来实现自定义面板的标题内容，以实现增加图标等效果。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否手风琴模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("当前激活的面板(如果是手风琴模式，绑定值类型需要为"),a("code",[s._v("string")]),s._v("，否则为"),a("code",[s._v("array")]),s._v(")")]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当前激活面板改变时触发(如果是手风琴模式，参数 "),a("code",[s._v("activeNames")]),s._v(" 类型为"),a("code",[s._v("string")]),s._v("，否则为"),a("code",[s._v("array")]),s._v(")")]),a("td",[s._v("(activeNames: array|string)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"collapse-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#collapse-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Collapse Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("name")]),a("td",[s._v("唯一标志符")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("面板标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(302)},function(s,t,a){a(303);var l=a(13)(a(305),a(306),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{color1:"#20a0ff",color2:null,color3:"rgba(19, 206, 102, 0.8)"}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source");s[0].style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于颜色选择，支持多种格式。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">有默认值</span>\n  <el-color-picker v-model="color1"></el-color-picker>\n</div>\n<div class="block">\n  <span class="demonstration">无默认值</span>\n  <el-color-picker v-model="color2"></el-color-picker>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        color1: '#20a0ff',\n        color2: null\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("有默认值")]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.color1,expression:"color1"}],domProps:{value:s.color1},on:{input:function(t){s.color1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("无默认值")]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.color2,expression:"color2"}],domProps:{value:s.color2},on:{input:function(t){s.color2=t}}})],1)]),a("p",[s._v("使用 v-model 与 Vue 实例中的一个变量进行双向绑定，绑定的变量需要是字符串类型。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("有默认值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("无默认值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#20a0ff'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        color3: 'rgba(19, 206, 102, 0.8)'\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.color3,expression:"color3"}],attrs:{"show-alpha":""},domProps:{value:s.color3},on:{input:function(t){s.color3=t}}})],1),a("p",[s._v("ColorPicker 支持普通颜色，也支持带 Alpha 通道的颜色，通过"),a("code",[s._v("show-alpha")]),s._v("属性即可控制是否支持透明度的选择。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"color3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("show-alpha")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-color-picker")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("color3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'rgba(19, 206, 102, 0.8)'")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"colorpicker-yan-se-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#colorpicker-yan-se-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" ColorPicker 颜色选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-tou-ming-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-tou-ming-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择透明度")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("show-alpha")]),a("td",[s._v("是否支持透明度选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color-format")]),a("td",[s._v("写入 v-model 的颜色的格式")]),a("td",[s._v("string")]),a("td",[s._v("hsl / hsv / hex / rgb")]),a("td",[s._v("hex（show-alpha 为 false）/ rgb（show-alpha 为 true）")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当绑定值变化时触发")]),a("td",[s._v("当前值")])])])])}]}},function(s,t,a){s.exports=a(308)},function(s,t,a){a(309);var l=a(13)(null,a(311),null,null);s.exports=l.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("Element 为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。")]),s._m(1),a("p",[s._v("Element 主要品牌颜色是鲜艳、友好的蓝色。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-light"},[s._v("Light Blue"),a("div",{staticClass:"value"},[s._v("#58B7FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"demo-color-box bg-blue-dark"},[s._v("Dark Blue"),a("div",{staticClass:"value"},[s._v("#1D8CE0")])])])],1),s._m(2),a("p",[s._v("除了主色外的场景色，需要在不同的场景中使用（例如危险色表示危险的操作）。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-info"},[s._v("Blue"),a("div",{staticClass:"value"},[s._v("#20A0FF")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-success"},[s._v("Success"),a("div",{staticClass:"value"},[s._v("#13CE66")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-warning"},[s._v("Warning"),a("div",{staticClass:"value"},[s._v("#F7BA2A")])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box bg-danger"},[s._v("Danger"),a("div",{staticClass:"value"},[s._v("#FF4949")])])])],1),s._m(3),a("p",[s._v("中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。")]),a("el-row",{attrs:{gutter:12}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-black"},[s._v("Black"),a("div",{staticClass:"value"},[s._v("#1F2D3D")])]),a("div",{staticClass:"demo-color-box bg-black-light"},[s._v("Light Black"),a("div",{staticClass:"value"},[s._v("#324057")])]),a("div",{staticClass:"demo-color-box bg-black-lighter"},[s._v("Extra Light Black"),a("div",{staticClass:"value"},[s._v("#475669")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box bg-silver"},[s._v("Silver"),a("div",{staticClass:"value"},[s._v("#8492A6")])]),a("div",{staticClass:"demo-color-box bg-silver-light"},[s._v("Light Silver"),a("div",{staticClass:"value"},[s._v("#99A9BF")])]),a("div",{staticClass:"demo-color-box bg-silver-lighter"},[s._v("Extra Light Silver"),a("div",{staticClass:"value"},[s._v("#C0CCDA")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group"},[a("div",{staticClass:"demo-color-box color-gray bg-gray"},[s._v("Gray"),a("div",{staticClass:"value"},[s._v("#D3DCE6")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-light"},[s._v("Light Gray"),a("div",{staticClass:"value"},[s._v("#E5E9F2")])]),a("div",{staticClass:"demo-color-box color-gray bg-gray-lighter"},[s._v("Extra Light Gray"),a("div",{staticClass:"value"},[s._v("#EFF2F7")])])])]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"demo-color-box-group",staticStyle:{border:"1px solid #e0e6ed","border-radius":"4px"}},[a("div",{staticClass:"demo-color-box color-gray bg-white-dark"},[s._v("Dark White"),a("div",{staticClass:"value"},[s._v("#F9FAFC")])]),a("div",{staticClass:"demo-color-box color-gray bg-white"},[s._v("White"),a("div",{staticClass:"value"},[s._v("#FFFFFF")])])])])],1)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"color-se-cai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#color-se-cai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Color 色彩")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助色")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhong-xing-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-xing-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中性色")])}]}},function(s,t,a){s.exports=a(313)},function(s,t,a){var l=a(13)(null,a(314),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义主题")]),a("p",[s._v("Element 默认提供一套主题，CSS 命名采用 BEM 的风格方便使用者覆盖样式。如果你想完全替换主题色或者部分样式，可以使用下面的方法。")]),a("h2",{attrs:{id:"jin-ti-huan-zhu-ti-se"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-ti-huan-zhu-ti-se","aria-hidden":"true"}},[s._v("¶")]),s._v(" 仅替换主题色")]),a("p",[s._v("如果仅希望更换 Element 的主题色，推荐使用"),a("a",{attrs:{href:"https://elementui.github.io/theme-preview"}},[s._v("在线主题生成工具")]),s._v("。")]),a("p",[s._v("Element 默认的主题色是鲜艳、友好的蓝色。通过替换主题色，能够让 Element 的视觉更加符合具体项目的定位。")]),a("p",[s._v("使用上述工具，可以很方便地实时预览主题色改变之后的视觉，同时它还可以基于新的主题色生成完整的样式文件包，供直接下载使用（关于如何使用下载的主题包，请参考本节「引入自定义主题」和「搭配插件按需引入组件主题」部分）。")]),a("p",[s._v("如果希望进行除主题色之外的样式定制，请继续阅读。")]),a("h2",{attrs:{id:"shen-ceng-ci-de-ding-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shen-ceng-ci-de-ding-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 深层次的定制")]),a("p",[s._v("如果仅仅改变主题色不能满足你的需求，请按以下步骤进行更深层次的主题定制：")]),a("h3",{attrs:{id:"an-zhuang-gong-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang-gong-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 安装工具")]),a("p",[s._v("首先安装「主题生成工具」，可以全局安装或者安装在当前项目下，推荐安装在项目里，方便别人 clone 项目时能直接安装依赖并启动，这里以全局安装做演示。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-theme -g\n")])]),a("p",[s._v("安装默认主题，可以从 npm 安装或者从 GitHub 拉取最新代码。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("# 从 npm\nnpm i element-theme-default -D\n\n# 从 GitHub\nnpm i https://github.com/ElementUI/theme-default -D\n")])]),a("h3",{attrs:{id:"chu-shi-hua-bian-liang-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chu-shi-hua-bian-liang-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 初始化变量文件")]),a("p",[s._v("主题生成工具安装成功后，如果全局安装可以在命令行里通过 "),a("code",[s._v("et")]),s._v(" 调用工具，如果安装在当前目录下，需要通过 "),a("code",[s._v("node_modules/.bin/et")]),s._v(" 访问到命令。执行 "),a("code",[s._v("-i")]),s._v(" 初始化变量文件。默认输出到 "),a("code",[s._v("element-variables.css")]),s._v("，当然你可以传参数指定文件输出目录。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et -i [可以自定义变量文件]\n\n> ✔ Generator variables file\n")])]),a("p",[s._v("如果使用默认配置，执行后当前目录会有一个 "),a("code",[s._v("element-variables.css")]),s._v(" 文件。内部包含了主题所用到的所有变量，它们使用 CSS4 的风格定义。大致结构如下：")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":root")]),s._v(" {\n\n  "),a("span",{staticClass:"hljs-comment"},[s._v("/* Colors\n  -------------------------- */")]),s._v("\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-success")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#13ce66")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-warning")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#f7ba2a")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-danger")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#ff4949")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-info")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#50BFFF")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#2e90fe")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-light")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#5da9ff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-blue-lighter")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("rgba")]),s._v("(var(--color-blue), "),a("span",{staticClass:"hljs-number"},[s._v("0.12")]),s._v(");\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-white")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#fff")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-black")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#000")]),s._v(";\n  "),a("span",{staticClass:"hljs-attribute"},[s._v("--color-grey")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#C0CCDA")]),s._v(";\n")])]),a("h3",{attrs:{id:"xiu-gai-bian-liang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiu-gai-bian-liang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 修改变量")]),a("p",[s._v("直接编辑 "),a("code",[s._v("element-variables.css")]),s._v(" 文件，例如修改主题色为红色。")]),a("pre",[a("code",{staticClass:"hljs language-CSS"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("--color-primary")]),s._v(": "),a("span",{staticClass:"hljs-selector-tag"},[s._v("red")]),s._v(";\n")])]),a("h3",{attrs:{id:"bian-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bian-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 编译主题")]),a("p",[s._v("保存文件后，到命令行里执行 "),a("code",[s._v("et")]),s._v(" 编译主题，如果你想启用 "),a("code",[s._v("watch")]),s._v(" 模式，实时编译主题，增加 "),a("code",[s._v("-w")]),s._v(" 参数；如果你在初始化时指定了自定义变量文件，则需要增加 "),a("code",[s._v("-c")]),s._v(" 参数，并带上你的变量文件名")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("et\n\n> ✔ build theme font\n> ✔ build element theme\n")])]),a("h3",{attrs:{id:"yin-ru-zi-ding-yi-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-zi-ding-yi-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入自定义主题")]),a("p",[s._v("默认情况下编译的主题目录是放在 "),a("code",[s._v("./theme")]),s._v(" 下，你可以通过 "),a("code",[s._v("-o")]),s._v(" 参数指定打包目录。像引入默认主题一样，在代码里直接引用 "),a("code",[s._v("theme/index.css")]),s._v(" 文件即可。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'../theme/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n\nVue.use(ElementUI)\n")])]),a("h3",{attrs:{id:"da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#da-pei-cha-jian-an-xu-yin-ru-zu-jian-zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 搭配插件按需引入组件主题")]),a("p",[s._v("如果是搭配 "),a("code",[s._v("babel-plugin-component")]),s._v(" 一起使用，只需要修改 "),a("code",[s._v(".babelrc")]),s._v(" 的配置，指定 "),a("code",[s._v("styleLibraryName")]),s._v(" 路径为自定义主题相对于 "),a("code",[s._v(".babelrc")]),s._v(" 的路径，注意要加 "),a("code",[s._v("~")]),s._v("。")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"~theme"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("如果不清楚 "),a("code",[s._v("babel-plugin-component")]),s._v(" 是什么，请阅读 "),a("a",{attrs:{href:"./#/zh-CN/component/quickstart"}},[s._v("快速上手")]),s._v(" 一节。更多 "),a("code",[s._v("element-theme")]),s._v(" 用法请参考"),a("a",{attrs:{href:"https://github.com/ElementUI/element-theme"}},[s._v("项目仓库")]),s._v("。")])])}]}},function(s,t,a){s.exports=a(316)},function(s,t,a){a(317);var l=a(13)(a(319),a(320),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{pickerOptions0:{disabledDate:function(s){return s.getTime()<Date.now()-864e5}},pickerOptions1:{disabledDate:function(s){return s.getTime()<Date.now()-864e5},shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于选择或输入日期")]),s._m(1),a("p",[s._v("以「日」为基本单位，基础的日期选择控件")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value1" type="date" placeholder="选择日期" :picker-options="pickerOptions0">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value2" align="right" type="date" placeholder="选择日期" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',
-script:"\n  export default {\n    data() {\n      return {\n        pickerOptions0: {\n          disabledDate(time) {\n            return time.getTime() < Date.now() - 8.64e7;\n          }\n        },\n        pickerOptions1: {\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{type:"date",placeholder:"选择日期","picker-options":s.pickerOptions0},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{align:"right",type:"date",placeholder:"选择日期","picker-options":s.pickerOptions1},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)]],2),a("p",[s._v("基本单位由"),a("code",[s._v("type")]),s._v("属性指定。快捷选项需配置"),a("code",[s._v("picker-options")]),s._v("对象中的"),a("code",[s._v("shortcuts")]),s._v("，禁用日期通过 "),a("code",[s._v("disabledDate")]),s._v(" 设置，传入函数")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions0")]),s._v(": {\n          disabledDate(time) {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" time.getTime() < "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now() - "),a("span",{staticClass:"hljs-number"},[s._v("8.64e7")]),s._v(";\n          }\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("通过扩展基础的日期选择，可以选择周、月、年")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">周</span>\n  <el-date-picker v-model="value3" type="week" format="yyyy 第 WW 周" placeholder="选择周">\n  </el-date-picker>\n</div>\n<div class="block">\n  <span class="demonstration">月</span>\n  <el-date-picker v-model="value4" type="month" placeholder="选择月">\n  </el-date-picker>\n</div>\n<div class="block">\n  <span class="demonstration">年</span>\n  <el-date-picker v-model="value5" align="right" type="year" placeholder="选择年">\n  </el-date-picker>\n</div>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: '',\n        value4: '',\n        value5: ''\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("周")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"week",format:"yyyy 第 WW 周",placeholder:"选择周"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("月")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"month",placeholder:"选择月"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("年")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{align:"right",type:"year",placeholder:"选择年"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})],1)]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("周"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"week"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("format")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"yyyy 第 WW 周"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择周"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("月"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"month"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择月"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("年"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"year"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择年"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可在一个选择器中便捷地选择一个时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value6" type="daterange" placeholder="选择日期范围">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value7" type="daterange" align="right" placeholder="选择日期范围" :picker-options="pickerOptions2">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{type:"daterange",placeholder:"选择日期范围"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{type:"daterange",align:"right",placeholder:"选择日期范围","picker-options":s.pickerOptions2},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}})],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期范围"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"daterange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期范围"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一周'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近三个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datepicker-ri-qi-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datepicker-ri-qi-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DatePicker 日期选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-ri-qi-dan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-ri-qi-dan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其他日期单位")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-ze-ri-qi-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-ze-ri-qi-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选择日期范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间日期格式化")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",[s._v("yyyy")]),s._v("，月 "),a("code",[s._v("MM")]),s._v("，日 "),a("code",[s._v("dd")]),s._v("，小时 "),a("code",[s._v("HH")]),s._v("，分 "),a("code",[s._v("mm")]),s._v("，秒 "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DatePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("firstDayOfWeek")]),a("td",[s._v("周起始日")]),a("td",[s._v("Number")]),a("td",[s._v("1 到 7")]),a("td",[s._v("7")])]),a("tr",[a("td",[s._v("onPick")]),a("td",[s._v("选中日期后会执行的回调，只有当 "),a("code",[s._v("daterange")]),s._v(" 或 "),a("code",[s._v("datetimerange")]),s._v(" 才生效")]),a("td",[s._v("Function({ maxDate, minDate })")]),a("td",[s._v("-")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("格式化后的值")])])])])}]}},function(s,t,a){
-s.exports=a(322)},function(s,t,a){a(323);var l=a(13)(a(325),a(326),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{pickerOptions1:{shortcuts:[{text:"今天",onClick:function(s){s.$emit("pick",new Date)}},{text:"昨天",onClick:function(s){var t=new Date;t.setTime(t.getTime()-864e5),s.$emit("pick",t)}},{text:"一周前",onClick:function(s){var t=new Date;t.setTime(t.getTime()-6048e5),s.$emit("pick",t)}}]},pickerOptions2:{shortcuts:[{text:"最近一周",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-6048e5),s.$emit("pick",[a,t])}},{text:"最近一个月",onClick:function(s){var t=new Date,a=new Date;a.setTime(a.getTime()-2592e6),s.$emit("pick",[a,t])}},{text:"最近三个月",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(2e3,10,10,10,10),new Date(2e3,10,11,10,10)],value4:"",value5:"",value6:"",value7:"",value8:"",value9:"",value10:"",value11:"",value12:"",value13:"",value14:"",value15:"",value16:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在同一个选择器里选择日期和时间")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions1">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions1: {\n          shortcuts: [{\n            text: '今天',\n            onClick(picker) {\n              picker.$emit('pick', new Date());\n            }\n          }, {\n            text: '昨天',\n            onClick(picker) {\n              const date = new Date();\n              date.setTime(date.getTime() - 3600 * 1000 * 24);\n              picker.$emit('pick', date);\n            }\n          }, {\n            text: '一周前',\n            onClick(picker) {\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{type:"datetime",placeholder:"选择日期时间"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{type:"datetime",placeholder:"选择日期时间",align:"right","picker-options":s.pickerOptions1},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("datetime")]),s._v("，即可在同一个选择器里同时进行日期和时间的选择。快捷选项的使用方法与 Date Picker 相同。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期时间"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetime"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期时间"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions1"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions1")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'今天'")]),s._v(",\n            onClick(picker) {\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("());\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'昨天'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一周前'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" date = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              date.setTime(date.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", date);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-date-picker v-model="value3" type="datetimerange" placeholder="选择时间范围">\n    </el-date-picker>\n  </div>\n  <div class="block">\n    <span class="demonstration">带快捷选项</span>\n    <el-date-picker v-model="value4" type="datetimerange" :picker-options="pickerOptions2" placeholder="选择时间范围" align="right">\n    </el-date-picker>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        pickerOptions2: {\n          shortcuts: [{\n            text: '最近一周',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近一个月',\n            onClick(picker) {\n              const end = new Date();\n              const start = new Date();\n              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);\n              picker.$emit('pick', [start, end]);\n            }\n          }, {\n            text: '最近三个月',\n            onClick(picker) {\n              const end = new Date();\n              const 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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{type:"datetimerange",placeholder:"选择时间范围"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("带快捷选项")]),a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{type:"datetimerange","picker-options":s.pickerOptions2,placeholder:"选择时间范围",align:"right"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("type")]),s._v("为"),a("code",[s._v("datetimerange")]),s._v("即可选择日期和时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("带快捷选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"datetimerange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pickerOptions2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("align")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("pickerOptions2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shortcuts")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一周'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近一个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("30")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("text")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'最近三个月'")]),s._v(",\n            onClick(picker) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" end = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" start = "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("();\n              start.setTime(start.getTime() - "),a("span",{staticClass:"hljs-number"},[s._v("3600")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("24")]),s._v(" * "),a("span",{staticClass:"hljs-number"},[s._v("90")]),s._v(");\n              picker.$emit("),a("span",{staticClass:"hljs-string"},[s._v("'pick'")]),s._v(", [start, end]);\n            }\n          }]\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2000")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("11")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(")],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"datetimepicker-ri-qi-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#datetimepicker-ri-qi-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" DateTimePicker 日期时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ri-qi-he-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ri-qi-he-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 日期和时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("显示类型")]),a("td",[s._v("string")]),a("td",[s._v("year/month/date/week/ datetime/datetimerange/daterange")]),a("td",[s._v("date")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间日期格式化")]),a("td",[s._v("string")]),a("td",[s._v("年 "),a("code",[s._v("yyyy")]),s._v("，月 "),a("code",[s._v("MM")]),s._v("，日 "),a("code",[s._v("dd")]),s._v("，小时 "),a("code",[s._v("HH")]),s._v("，分 "),a("code",[s._v("mm")]),s._v("，秒 "),a("code",[s._v("ss")])]),a("td",[s._v("yyyy-MM-dd")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("DateTimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])]),a("tr",[a("td",[s._v("range-separator")]),a("td",[s._v("选择范围时的分隔符")]),a("td",[s._v("string")]),a("td",[s._v("-")]),a("td",[s._v("' - '")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("shortcuts")]),a("td",[s._v("设置快捷选项，需要传入 { text, onClick } 对象用法参考 demo 或下表")]),a("td",[s._v("Object[]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabledDate")]),a("td",[s._v("设置禁用状态，参数为当前日期，要求返回 Boolean")]),a("td",[s._v("Function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shortcuts"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shortcuts","aria-hidden":"true"}},[s._v("¶")]),s._v(" Shortcuts")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("text")]),a("td",[s._v("标题文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("选中后的回调函数，参数是 vm，可通过触发 'pick' 事件设置选择器的值。例如 vm.$emit('pick', new Date())")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(328)},function(s,t,a){a(329);var l=a(13)(a(331),a(332),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";s.exports={data:function(){return{gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],dialogVisible:!1,dialogTableVisible:!1,dialogFormVisible:!1,form:{name:"",region:"",date1:"",date2:"",delivery:!1,type:[],resource:"",desc:""},formLabelWidth:"80px"}},methods:{openDialog:function(){this.$refs.dialogBind.open()}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在保留当前页面状态的情况下，告知用户并承载相关操作。")]),s._m(1),a("p",[s._v("Dialog 弹出一个对话框，适合需要定制性更大的场景。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-button type="text" @click="dialogVisible = true">点击打开 Dialog</el-button>\n\n<el-dialog title="提示" v-model="dialogVisible" size="tiny">\n  <span>这是一段信息</span>\n  <span slot="footer" class="dialog-footer">\n    <el-button @click="dialogVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>\n  </span>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        dialogVisible: false\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogVisible=!0}}},[s._v("点击打开 Dialog")]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogVisible,expression:"dialogVisible"}],attrs:{title:"提示",size:"tiny"},domProps:{value:s.dialogVisible},on:{input:function(t){s.dialogVisible=t}}},[a("span",[s._v("这是一段信息")]),a("span",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogVisible=!1}}},[s._v("确 定")])],1)])],1),a("p",[s._v("需要设置"),a("code",[s._v("v-model")]),s._v("属性，它接收"),a("code",[s._v("Boolean")]),s._v("，当为"),a("code",[s._v("true")]),s._v("时显示 Dialog。Dialog 分为两个部分："),a("code",[s._v("body")]),s._v("和"),a("code",[s._v("footer")]),s._v("，"),a("code",[s._v("footer")]),s._v("需要具名为"),a("code",[s._v("footer")]),s._v("的"),a("code",[s._v("slot")]),s._v("。"),a("code",[s._v("title")]),s._v("属性用于定义标题，它是可选的，默认值为空。本例通过显式改变"),a("code",[s._v("v-model")]),s._v("的值来打开 Dialog，此外我们还为 Dialog 实例提供了"),a("code",[s._v("open")]),s._v("和"),a("code",[s._v("close")]),s._v("方法，可以通过调用它们来打开/关闭 Dialog。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = true"')]),s._v(">")]),s._v("点击打开 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"提示"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("这是一段信息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{
-staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("Dialog 组件的内容可以是任意的，甚至可以是表格或表单，下面是应用了 Element Table 和 Form 组件的两个样例。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<!-- Table -->\n<el-button type="text" @click="dialogTableVisible = true">打开嵌套表格的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogTableVisible">\n  <el-table :data="gridData">\n    <el-table-column property="date" label="日期" width="150"></el-table-column>\n    <el-table-column property="name" label="姓名" width="200"></el-table-column>\n    <el-table-column property="address" label="地址"></el-table-column>\n  </el-table>\n</el-dialog>\n\n<!-- Form -->\n<el-button type="text" @click="dialogFormVisible = true">打开嵌套表单的 Dialog</el-button>\n\n<el-dialog title="收货地址" v-model="dialogFormVisible">\n  <el-form :model="form">\n    <el-form-item label="活动名称" :label-width="formLabelWidth">\n      <el-input v-model="form.name" auto-complete="off"></el-input>\n    </el-form-item>\n    <el-form-item label="活动区域" :label-width="formLabelWidth">\n      <el-select v-model="form.region" placeholder="请选择活动区域">\n        <el-option label="区域一" value="shanghai"></el-option>\n        <el-option label="区域二" value="beijing"></el-option>\n      </el-select>\n    </el-form-item>\n  </el-form>\n  <div slot="footer" class="dialog-footer">\n    <el-button @click="dialogFormVisible = false">取 消</el-button>\n    <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>\n  </div>\n</el-dialog>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogTableVisible=!0}}},[s._v("打开嵌套表格的 Dialog")]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogTableVisible,expression:"dialogTableVisible"}],attrs:{title:"收货地址"},domProps:{value:s.dialogTableVisible},on:{input:function(t){s.dialogTableVisible=t}}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{property:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"200"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1)],1),a("el-button",{attrs:{type:"text"},on:{click:function(t){s.dialogFormVisible=!0}}},[s._v("打开嵌套表单的 Dialog")]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogFormVisible,expression:"dialogFormVisible"}],attrs:{title:"收货地址"},domProps:{value:s.dialogFormVisible},on:{input:function(t){s.dialogFormVisible=t}}},[a("el-form",{attrs:{model:s.form}},[a("el-form-item",{attrs:{label:"活动名称","label-width":s.formLabelWidth}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.name,expression:"form.name"}],attrs:{"auto-complete":"off"},domProps:{value:s.form.name},on:{input:function(t){s.form.name=t}}})],1),a("el-form-item",{attrs:{label:"活动区域","label-width":s.formLabelWidth}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.form.region,expression:"form.region"}],attrs:{placeholder:"请选择活动区域"},domProps:{value:s.form.region},on:{input:function(t){s.form.region=t}}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1)],1),a("div",{staticClass:"dialog-footer",slot:"footer"},[a("el-button",{on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("取 消")]),a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.dialogFormVisible=!1}}},[s._v("确 定")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- Table -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible = true"')]),s._v(">")]),s._v("打开嵌套表格的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogTableVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- Form -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = true"')]),s._v(">")]),s._v("打开嵌套表单的 Dialog"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"收货地址"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelWidth"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"footer"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialog-footer"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("取 消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogFormVisible = false"')]),s._v(">")]),s._v("确 定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogTableVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogFormVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelWidth")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'120px'")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dialog-dui-hua-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dialog-dui-hua-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dialog 对话框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 的标题，也可通过具名 slot （见下表）传入")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("Dialog 的大小")]),a("td",[s._v("string")]),a("td",[s._v("tiny/small/large/full")]),a("td",[s._v("small")])]),a("tr",[a("td",[s._v("top")]),a("td",[s._v("Dialog CSS 中的 top 值（仅在 size 不为 full 时有效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("15%")])]),a("tr",[a("td",[s._v("modal")]),a("td",[s._v("是否需要遮罩层")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("modal-append-to-body")]),a("td",[s._v("遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock-scroll")]),a("td",[s._v("是否在 Dialog 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("custom-class")]),a("td",[s._v("Dialog 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("close-on-click-modal")]),a("td",[s._v("是否可以通过点击 modal 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("close-on-press-escape")]),a("td",[s._v("是否可以通过按下 ESC 关闭 Dialog")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-close")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Dialog 的内容")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("Dialog 标题区的内容")])]),a("tr",[a("td",[s._v("footer")]),a("td",[s._v("Dialog 按钮操作区的内容")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("每个 "),a("code",[s._v("el-dialog")]),s._v(" 实例都暴露了如下方法，用于在不显式改变 "),a("code",[s._v("v-model")]),s._v(" 值的情况下打开 / 关闭实例：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("open")]),a("td",[s._v("打开当前实例")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前实例")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("Dialog 关闭的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("Dialog 打开的回调")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(334)},function(s,t,a){a(335);var l=a(13)(a(337),a(338),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{handleClick:function(){alert("button click")},handleCommand:function(s){this.$message("click on item "+s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("将动作或菜单折叠到下拉菜单中。")]),s._m(1),a("p",[s._v("移动到下拉菜单上，展开更多操作。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("通过组件"),a("code",[s._v("slot")]),s._v("来设置下拉触发的元素以及需要通过具名"),a("code",[s._v("slot")]),s._v("为"),a("code",[s._v("dropdown")]),s._v(" 来设置下拉菜单。默认情况下，下拉按钮只要"),a("code",[s._v("hover")]),s._v("即可，无需点击也会显示下拉菜单。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可使用按钮触发下拉菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown>\n  <el-button type="primary">\n    更多菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </el-button>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n<el-dropdown split-button type="primary" @click="handleClick">\n  更多菜单\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item>双皮奶</el-dropdown-item>\n    <el-dropdown-item>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",[a("el-button",{attrs:{type:"primary"}},[s._v("\n    更多菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1),a("el-dropdown",{attrs:{"split-button":"",type:"primary"},on:{click:s.handleClick}},[s._v("\n  更多菜单\n  "),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("设置"),a("code",[s._v("split-button")]),s._v("属性来让触发下拉元素呈现为按钮组，左边是功能按钮，右边是触发下拉菜单的按钮，设置为"),a("code",[s._v("true")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("\n    更多菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"
-},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("split-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n  更多菜单\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("p",[s._v("可以配置 click 激活或者 hover 激活。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="block-col-2">\n  <el-col :span="12">\n    <span class="demonstration">hover 激活</span>\n    <el-dropdown>\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n  <el-col :span="12">\n    <span class="demonstration">click 激活</span>\n    <el-dropdown trigger="click">\n      <span class="el-dropdown-link">\n        下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n      </span>\n      <el-dropdown-menu slot="dropdown">\n        <el-dropdown-item>黄金糕</el-dropdown-item>\n        <el-dropdown-item>狮子头</el-dropdown-item>\n        <el-dropdown-item>螺蛳粉</el-dropdown-item>\n        <el-dropdown-item>双皮奶</el-dropdown-item>\n        <el-dropdown-item>蚵仔煎</el-dropdown-item>\n      </el-dropdown-menu>\n    </el-dropdown>\n  </el-col>\n</el-row>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"block-col-2"},[a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("hover 激活")]),a("el-dropdown",[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1),a("el-col",{attrs:{span:12}},[a("span",{staticClass:"demonstration"},[s._v("click 激活")]),a("el-dropdown",{attrs:{trigger:"click"}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n        下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",[s._v("双皮奶")]),a("el-dropdown-item",[s._v("蚵仔煎")])],1)],1)],1)],1)],1),a("p",[s._v("在"),a("code",[s._v("trigger")]),s._v("属性设置为"),a("code",[s._v("click")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block-col-2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n        下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown :hide-on-click="false">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item>黄金糕</el-dropdown-item>\n    <el-dropdown-item>狮子头</el-dropdown-item>\n    <el-dropdown-item>螺蛳粉</el-dropdown-item>\n    <el-dropdown-item disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{attrs:{"hide-on-click":!1}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",[s._v("黄金糕")]),a("el-dropdown-item",[s._v("狮子头")]),a("el-dropdown-item",[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("p",[s._v("下拉菜单默认在点击菜单项后会被隐藏，将"),a("code",[s._v("hide-on-click")]),s._v("属性默认为"),a("code",[s._v("false")]),s._v("可以关闭此功能。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":hide-on-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("点击菜单项后会触发事件，用户可以通过相应的菜单项 key 进行不同的操作")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-dropdown @command="handleCommand">\n  <span class="el-dropdown-link">\n    下拉菜单<i class="el-icon-caret-bottom el-icon--right"></i>\n  </span>\n  <el-dropdown-menu slot="dropdown">\n    <el-dropdown-item command="a">黄金糕</el-dropdown-item>\n    <el-dropdown-item command="b">狮子头</el-dropdown-item>\n    <el-dropdown-item command="c">螺蛳粉</el-dropdown-item>\n    <el-dropdown-item command="d" disabled>双皮奶</el-dropdown-item>\n    <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>\n  </el-dropdown-menu>\n</el-dropdown>\n\n',script:"\n  export default {\n    methods: {\n      handleCommand(command) {\n        this.$message('click on item ' + command);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-dropdown",{on:{command:s.handleCommand}},[a("span",{staticClass:"el-dropdown-link"},[s._v("\n    下拉菜单"),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"a"}},[s._v("黄金糕")]),a("el-dropdown-item",{attrs:{command:"b"}},[s._v("狮子头")]),a("el-dropdown-item",{attrs:{command:"c"}},[s._v("螺蛳粉")]),a("el-dropdown-item",{attrs:{command:"d",disabled:""}},[s._v("双皮奶")]),a("el-dropdown-item",{attrs:{command:"e",divided:""}},[s._v("蚵仔煎")])],1)],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCommand"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-dropdown-link"')]),s._v(">")]),s._v("\n    下拉菜单"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-caret-bottom el-icon--right"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dropdown"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"a"')]),s._v(">")]),s._v("黄金糕"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"b"')]),s._v(">")]),s._v("狮子头"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"c"')]),s._v(">")]),s._v("螺蛳粉"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"d"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("双皮奶"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("command")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"e"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("divided")]),s._v(">")]),s._v("蚵仔煎"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dropdown")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCommand(command) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'click on item '")]),s._v(" + command);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"dropdown-xia-la-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-xia-la-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown 下拉菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-dui-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-dui-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发对象")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hong-fa-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hong-fa-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 触发方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"cai-dan-yin-cang-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cai-dan-yin-cang-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 菜单隐藏方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以"),a("code",[s._v("hide-on-click")]),s._v("属性来配置。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-ling-shi-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-ling-shi-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 指令事件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("菜单按钮类型，同 Button 组件(只在"),a("code",[s._v("split-button")]),s._v("为 true 的情况下有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("菜单按钮尺寸，同 Button 组件(只在"),a("code",[s._v("split-button")]),s._v("为 true 的情况下有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("split-button")]),a("td",[s._v("下拉触发元素呈现为按钮组")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-align")]),a("td",[s._v("菜单水平对齐方向")]),a("td",[s._v("string")]),a("td",[s._v("start, end")]),a("td",[s._v("end")])]),a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发下拉的行为")]),a("td",[s._v("string")]),a("td",[s._v("hover, click")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("hide-on-click")]),a("td",[s._v("是否在点击菜单项后隐藏菜单")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[a("code",[s._v("split-button")]),s._v(" 为 true 时，点击左侧按钮的回调")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("command")]),a("td",[s._v("点击菜单项触发的事件回调")]),a("td",[s._v("dropdown-item 的指令")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dropdown-menu-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dropdown-menu-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Dropdown Menu Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("command")]),a("td",[s._v("指令")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("divided")]),a("td",[s._v("显示分割线")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(340)},function(s,t,a){a(341);var l=a(13)(a(343),a(344),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){var s=this,t=function(s,t,a){return t?void setTimeout(function(){Number.isInteger(t)?t<18?a(new Error("必须年满18岁")):a():a(new Error("请输入数字值"))},1e3):a(new Error("年龄不能为空"))},a=function(t,a,l){""===a?l(new Error("请输入密码")):(""!==s.ruleForm2.checkPass&&s.$refs.ruleForm2.validateField("checkPass"),l())},l=function(t,a,l){""===a?l(new Error("请再次输入密码")):a!==s.ruleForm2.pass?l(new Error("两次输入密码不一致!")):l()};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",rules:{name:[{required:!0,message:"请输入活动名称",trigger:"blur"},{min:3,max:5,message:"长度在 3 到 5 个字符",trigger:"blur"}],region:[{required:!0,message:"请选择活动区域",trigger:"change"}],date1:[{type:"date",required:!0,message:"请选择日期",trigger:"change"}],date2:[{type:"date",required:!0,message:"请选择时间",trigger:"change"}],type:[{type:"array",required:!0,message:"请至少选择一个活动性质",trigger:"change"}],resource:[{required:!0,message:"请选择活动资源",trigger:"change"}],desc:[{required:!0,message:"请填写活动形式",trigger:"blur"}]},rules2:{pass:[{validator:a,trigger:"blur"}],checkPass:[{validator:l,trigger:"blur"}],age:[{validator:t,trigger:"blur"}]},dynamicValidateForm:{domains:[{value:"",key:Date.now()}],email:""},numberValidateForm:{age:""}}},methods:{onSubmit:function(){console.log("submit!")},submitForm:function(s){this.$refs[s].validate(function(s){return s?void alert("submit!"):(console.log("error submit!!"),!1)})},resetForm:function(s){this.$refs[s].resetFields()},removeDomain:function(s){var t=this.dynamicValidateForm.domains.indexOf(s);t!==-1&&this.dynamicValidateForm.domains.splice(t,1)},addDomain:function(){this.dynamicValidateForm.domains.push({value:"",key:Date.now()})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("由输入框、选择器、单选框、多选框等控件组成，用以收集、校验、提交数据")]),s._m(1),a("p",[s._v("包括各种表单项，比如输入框、选择器、开关、单选框、多选框等。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form ref="form" :model="form" label-width="80px">\n  <el-form-item label="活动名称">\n    <el-input v-model="form.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="form.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间">\n    <el-col :span="11">\n      <el-date-picker type="date" placeholder="选择日期" 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="选择时间" v-model="form.date2" style="width: 100%;"></el-time-picker>\n    </el-col>\n  </el-form-item>\n  <el-form-item label="即时配送">\n    <el-switch on-text="" off-text v-model="form.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质">\n    <el-checkbox-group v-model="form.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源">\n    <el-radio-group v-model="form.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式">\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">立即创建</el-button>\n    <el-button>取消</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\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() {\n        console.log('submit!');\n      }\n    }\n  }\n",
-style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"form",attrs:{model:s.form,"label-width":"80px"}},[a("el-form-item",{attrs:{label:"活动名称"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.name,expression:"form.name"}],domProps:{value:s.form.name},on:{input:function(t){s.form.name=t}}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.form.region,expression:"form.region"}],attrs:{placeholder:"请选择活动区域"},domProps:{value:s.form.region},on:{input:function(t){s.form.region=t}}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间"}},[a("el-col",{attrs:{span:11}},[a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date1,expression:"form.date1"}],staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},domProps:{value:s.form.date1},on:{input:function(t){s.form.date1=t}}})],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.form.date2,expression:"form.date2"}],staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},domProps:{value:s.form.date2},on:{input:function(t){s.form.date2=t}}})],1)],1),a("el-form-item",{attrs:{label:"即时配送"}},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.form.delivery,expression:"form.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.form.delivery},on:{input:function(t){s.form.delivery=t}}})],1),a("el-form-item",{attrs:{label:"活动性质"}},[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.form.type,expression:"form.type"}],domProps:{value:s.form.type},on:{input:function(t){s.form.type=t}}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源"}},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.form.resource,expression:"form.resource"}],domProps:{value:s.form.resource},on:{input:function(t){s.form.resource=t}}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.form.desc,expression:"form.desc"}],attrs:{type:"textarea"},domProps:{value:s.form.desc},on:{input:function(t){s.form.desc=t}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("立即创建")]),a("el-button",[s._v("取消")])],1)],1)],1),a("p",[s._v("在 Form 组件中，每一个表单域由一个 Form-Item 组件构成，表单域中可以放置各种类型的表单控件，包括 Input、Select、Checkbox、Radio、Switch、DatePicker、TimePicker")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"80px"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"即时配送"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"特殊资源"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"form.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("立即创建"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("取消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("form")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("当垂直方向空间受限且表单较简单时，可以在一行内放置表单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :inline="true" :model="formInline" class="demo-form-inline">\n  <el-form-item label="审批人">\n    <el-input v-model="formInline.user" placeholder="审批人"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-select v-model="formInline.region" placeholder="活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item><el-form-item>\n    <el-button type="primary" @click="onSubmit">查询</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        formInline: {\n          user: '',\n          region: ''\n        }\n      }\n    },\n    methods: {\n      onSubmit() {\n        console.log('submit!');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{staticClass:"demo-form-inline",attrs:{inline:!0,model:s.formInline}},[a("el-form-item",{attrs:{label:"审批人"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formInline.user,expression:"formInline.user"}],attrs:{placeholder:"审批人"},domProps:{value:s.formInline.user},on:{input:function(t){s.formInline.user=t}}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.formInline.region,expression:"formInline.region"}],attrs:{placeholder:"活动区域"},domProps:{value:s.formInline.region},on:{input:function(t){s.formInline.region=t}}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:s.onSubmit}},[s._v("查询")])],1)],1)],1),a("p",[s._v("设置 "),a("code",[s._v("inline")]),s._v(" 属性可以让表单域变为行内的表单域")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":inline")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-form-inline"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"审批人"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.user"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"审批人"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formInline.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"onSubmit"')]),s._v(">")]),s._v("查询"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formInline")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("user")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      onSubmit() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("根据具体目标和制约因素，选择最佳的标签对齐方式。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-radio-group v-model="labelPosition" size="small">\n  <el-radio-button label="left">左对齐</el-radio-button>\n  <el-radio-button label="right">右对齐</el-radio-button>\n  <el-radio-button label="top">顶部对齐</el-radio-button>\n</el-radio-group>\n<div style="margin: 20px;"></div>\n<el-form :label-position="labelPosition" label-width="80px" :model="formLabelAlign">\n  <el-form-item label="名称">\n    <el-input v-model="formLabelAlign.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域">\n    <el-input v-model="formLabelAlign.region"></el-input>\n  </el-form-item>\n  <el-form-item label="活动形式">\n    <el-input v-model="formLabelAlign.type"></el-input>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        labelPosition: 'right',\n        formLabelAlign: {\n          name: '',\n          region: '',\n          type: ''\n        }\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.labelPosition,expression:"labelPosition"}],attrs:{size:"small"},domProps:{value:s.labelPosition},on:{input:function(t){s.labelPosition=t}}},[a("el-radio-button",{attrs:{label:"left"}},[s._v("左对齐")]),a("el-radio-button",{attrs:{label:"right"}},[s._v("右对齐")]),a("el-radio-button",{attrs:{label:"top"}},[s._v("顶部对齐")])],1),a("div",{staticStyle:{margin:"20px"}}),a("el-form",{attrs:{"label-position":s.labelPosition,"label-width":"80px",model:s.formLabelAlign}},[a("el-form-item",{attrs:{label:"名称"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.name,expression:"formLabelAlign.name"}],domProps:{value:s.formLabelAlign.name},on:{input:function(t){s.formLabelAlign.name=t}}})],1),a("el-form-item",{attrs:{label:"活动区域"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.region,expression:"formLabelAlign.region"}],domProps:{value:s.formLabelAlign.region},on:{input:function(t){s.formLabelAlign.region=t}}})],1),a("el-form-item",{attrs:{label:"活动形式"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.formLabelAlign.type,expression:"formLabelAlign.type"}],domProps:{value:s.formLabelAlign.type},on:{input:function(t){s.formLabelAlign.type=t}}})],1)],1)],1),a("p",[s._v("通过设置 "),a("code",[s._v("label-position")]),s._v(" 属性可以改变表单域标签的位置，可选值为 "),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("，当设为 "),a("code",[s._v("top")]),s._v(" 时标签会置于表单域的顶部")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("左对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("右对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("顶部对齐"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"labelPosition"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"80px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"名称"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"
-},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.region"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formLabelAlign.type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("labelPosition")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'right'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("formLabelAlign")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("在防止用户犯错的前提下，尽可能让用户更早地发现并纠正错误。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="活动名称" prop="name">\n    <el-input v-model="ruleForm.name"></el-input>\n  </el-form-item>\n  <el-form-item label="活动区域" prop="region">\n    <el-select v-model="ruleForm.region" placeholder="请选择活动区域">\n      <el-option label="区域一" value="shanghai"></el-option>\n      <el-option label="区域二" value="beijing"></el-option>\n    </el-select>\n  </el-form-item>\n  <el-form-item label="活动时间" required>\n    <el-col :span="11">\n      <el-form-item prop="date1">\n        <el-date-picker type="date" placeholder="选择日期" 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="选择时间" 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="即时配送" prop="delivery">\n    <el-switch on-text="" off-text v-model="ruleForm.delivery"></el-switch>\n  </el-form-item>\n  <el-form-item label="活动性质" prop="type">\n    <el-checkbox-group v-model="ruleForm.type">\n      <el-checkbox label="美食/餐厅线上活动" name="type"></el-checkbox>\n      <el-checkbox label="地推活动" name="type"></el-checkbox>\n      <el-checkbox label="线下主题活动" name="type"></el-checkbox>\n      <el-checkbox label="单纯品牌曝光" name="type"></el-checkbox>\n    </el-checkbox-group>\n  </el-form-item>\n  <el-form-item label="特殊资源" prop="resource">\n    <el-radio-group v-model="ruleForm.resource">\n      <el-radio label="线上品牌商赞助"></el-radio>\n      <el-radio label="线下场地免费"></el-radio>\n    </el-radio-group>\n  </el-form-item>\n  <el-form-item label="活动形式" 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\')">立即创建</el-button>\n    <el-button @click="resetForm(\'ruleForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\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: '请输入活动名称', trigger: 'blur' },\n            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }\n          ],\n          region: [\n            { required: true, message: '请选择活动区域', trigger: 'change' }\n          ],\n          date1: [\n            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }\n          ],\n          date2: [\n            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }\n          ],\n          type: [\n            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }\n          ],\n          resource: [\n            { required: true, message: '请选择活动资源', trigger: 'change' }\n          ],\n          desc: [\n            { required: true, message: '请填写活动形式', trigger: 'blur' }\n          ]\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm,rules:s.rules,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"活动名称",prop:"name"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.name,expression:"ruleForm.name"}],domProps:{value:s.ruleForm.name},on:{input:function(t){s.ruleForm.name=t}}})],1),a("el-form-item",{attrs:{label:"活动区域",prop:"region"}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.region,expression:"ruleForm.region"}],attrs:{placeholder:"请选择活动区域"},domProps:{value:s.ruleForm.region},on:{input:function(t){s.ruleForm.region=t}}},[a("el-option",{attrs:{label:"区域一",value:"shanghai"}}),a("el-option",{attrs:{label:"区域二",value:"beijing"}})],1)],1),a("el-form-item",{attrs:{label:"活动时间",required:""}},[a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date1"}},[a("el-date-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date1,expression:"ruleForm.date1"}],staticStyle:{width:"100%"},attrs:{type:"date",placeholder:"选择日期"},domProps:{value:s.ruleForm.date1},on:{input:function(t){s.ruleForm.date1=t}}})],1)],1),a("el-col",{staticClass:"line",attrs:{span:2}},[s._v("-")]),a("el-col",{attrs:{span:11}},[a("el-form-item",{attrs:{prop:"date2"}},[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.date2,expression:"ruleForm.date2"}],staticStyle:{width:"100%"},attrs:{type:"fixed-time",placeholder:"选择时间"},domProps:{value:s.ruleForm.date2},on:{input:function(t){s.ruleForm.date2=t}}})],1)],1)],1),a("el-form-item",{attrs:{label:"即时配送",prop:"delivery"}},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.delivery,expression:"ruleForm.delivery"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.ruleForm.delivery},on:{input:function(t){s.ruleForm.delivery=t}}})],1),a("el-form-item",{attrs:{label:"活动性质",prop:"type"}},[a("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.type,expression:"ruleForm.type"}],domProps:{value:s.ruleForm.type},on:{input:function(t){s.ruleForm.type=t}}},[a("el-checkbox",{attrs:{label:"美食/餐厅线上活动",name:"type"}}),a("el-checkbox",{attrs:{label:"地推活动",name:"type"}}),a("el-checkbox",{attrs:{label:"线下主题活动",name:"type"}}),a("el-checkbox",{attrs:{label:"单纯品牌曝光",name:"type"}})],1)],1),a("el-form-item",{attrs:{label:"特殊资源",prop:"resource"}},[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.resource,expression:"ruleForm.resource"}],domProps:{value:s.ruleForm.resource},on:{input:function(t){s.ruleForm.resource=t}}},[a("el-radio",{attrs:{label:"线上品牌商赞助"}}),a("el-radio",{attrs:{label:"线下场地免费"}})],1)],1),a("el-form-item",{attrs:{label:"活动形式",prop:"desc"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm.desc,expression:"ruleForm.desc"}],attrs:{type:"textarea"},domProps:{value:s.ruleForm.desc},on:{input:function(t){s.ruleForm.desc=t}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm")}}},[s._v("立即创建")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("Form 组件提供了表单验证的功能，只需要通过 "),a("code",[s._v("rule")]),s._v(" 属性传入约定的验证规则，并 Form-Item 的 "),a("code",[s._v("prop")]),s._v(" 属性设置为需校验的字段名即可。校验规则参见 "),a("a",{attrs:{href:"https://github.com/yiminghe/async-validator"}},[s._v("async-validator")])]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动名称"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.name"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动区域"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"region"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.region"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择活动区域"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域一"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"shanghai"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"区域二"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beijing"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择日期"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-date-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("-"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"11"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date2"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fixed-time"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.date2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"即时配送"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"delivery"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.delivery"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动性质"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.type"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"美食/餐厅线上活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地推活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下主题活动"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"单纯品牌曝光"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"type"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-checkbox-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"特殊资源"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resource"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.resource"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线上品牌商赞助"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"线下场地免费"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"活动形式"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm.desc"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm')\"")]),s._v(">")]),s._v("立即创建"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("delivery")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请输入活动名称'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" },\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("min")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("max")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'长度在 3 到 5 个字符'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("region")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择活动区域'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date1")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择日期'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date2")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'date'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择时间'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'array'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请至少选择一个活动性质'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("resource")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请选择活动资源'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'change'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(", "),a("span",{
-staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'请填写活动形式'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="ruleForm2" :rules="rules2" ref="ruleForm2" label-width="100px" class="demo-ruleForm">\n  <el-form-item label="密码" 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="确认密码" 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="年龄" 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\')">提交</el-button>\n    <el-button @click="resetForm(\'ruleForm2\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      var checkAge = (rule, value, callback) => {\n        if (!value) {\n          return callback(new Error('年龄不能为空'));\n        }\n        setTimeout(() => {\n          if (!Number.isInteger(value)) {\n            callback(new Error('请输入数字值'));\n          } else {\n            if (value < 18) {\n              callback(new Error('必须年满18岁'));\n            } else {\n              callback();\n            }\n          }\n        }, 1000);\n      };\n      var validatePass = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请输入密码'));\n        } else {\n          if (this.ruleForm2.checkPass !== '') {\n            this.$refs.ruleForm2.validateField('checkPass');\n          }\n          callback();\n        }\n      };\n      var validatePass2 = (rule, value, callback) => {\n        if (value === '') {\n          callback(new Error('请再次输入密码'));\n        } else if (value !== this.ruleForm2.pass) {\n          callback(new Error('两次输入密码不一致!'));\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(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"ruleForm2",staticClass:"demo-ruleForm",attrs:{model:s.ruleForm2,rules:s.rules2,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"密码",prop:"pass"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.pass,expression:"ruleForm2.pass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.pass},on:{input:function(t){s.ruleForm2.pass=t}}})],1),a("el-form-item",{attrs:{label:"确认密码",prop:"checkPass"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.ruleForm2.checkPass,expression:"ruleForm2.checkPass"}],attrs:{type:"password","auto-complete":"off"},domProps:{value:s.ruleForm2.checkPass},on:{input:function(t){s.ruleForm2.checkPass=t}}})],1),a("el-form-item",{attrs:{label:"年龄",prop:"age"}},[a("el-input",{directives:[{name:"model",rawName:"v-model.number",value:s.ruleForm2.age,expression:"ruleForm2.age",modifiers:{number:!0}}],domProps:{value:s.ruleForm2.age},on:{input:function(t){s.ruleForm2.age=s._n(t)},blur:function(t){s.$forceUpdate()}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("ruleForm2")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("ruleForm2")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("这个例子中展示了如何使用自定义验证规则来完成密码的二次验证")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"rules2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"pass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.pass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"确认密码"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"checkPass"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"password"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.checkPass"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"年龄"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"ruleForm2.age"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('ruleForm2')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('ruleForm2')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" checkAge = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'年龄不能为空'")]),s._v("));\n        }\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!"),a("span",{staticClass:"hljs-built_in"},[s._v("Number")]),s._v(".isInteger(value)) {\n            callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请输入数字值'")]),s._v("));\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value < "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(") {\n              callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'必须年满18岁'")]),s._v("));\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              callback();\n            }\n          }\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(");\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请输入密码'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.checkPass !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.ruleForm2.validateField("),a("span",{staticClass:"hljs-string"},[s._v("'checkPass'")]),s._v(");\n          }\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" validatePass2 = "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("rule, value, callback")]),s._v(") =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value === "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'请再次输入密码'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (value !== "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".ruleForm2.pass) {\n          callback("),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Error")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'两次输入密码不一致!'")]),s._v("));\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          callback();\n        }\n      };\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("ruleForm2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("rules2")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("pass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("checkPass")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": validatePass2, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": [\n            { "),a("span",{staticClass:"hljs-attr"},[s._v("validator")]),s._v(": checkAge, "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'blur'")]),s._v(" }\n          ]\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">\n  <el-form-item prop="email" label="邮箱" :rules="[\n      { required: true, message: \'请输入邮箱地址\', trigger: \'blur\' },\n      { type: \'email\', message: \'请输入正确的邮箱地址\', 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="\'域名\' + index" :key="domain.key" :prop="\'domains.\' + index + \'.value\'" :rules="{\n      required: true, message: \'域名不能为空\', trigger: \'blur\'\n    }">\n    <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>\n  </el-form-item>\n  <el-form-item>\n    <el-button type="primary" @click="submitForm(\'dynamicValidateForm\')">提交</el-button>\n    <el-button @click="addDomain">新增域名</el-button>\n    <el-button @click="resetForm(\'dynamicValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        dynamicValidateForm: {\n          domains: [{\n            value: ''\n          }],\n          email: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        var index = this.dynamicValidateForm.domains.indexOf(item)\n        if (index !== -1) {\n          this.dynamicValidateForm.domains.splice(index, 1)\n        }\n      },\n      addDomain() {\n        this.dynamicValidateForm.domains.push({\n          value: '',\n          key: Date.now()\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"dynamicValidateForm",staticClass:"demo-dynamic",attrs:{model:s.dynamicValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{prop:"email",label:"邮箱",rules:[{required:!0,message:"请输入邮箱地址",trigger:"blur"},{type:"email",message:"请输入正确的邮箱地址",trigger:"blur,change"}]}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.dynamicValidateForm.email,expression:"dynamicValidateForm.email"}],domProps:{value:s.dynamicValidateForm.email},on:{input:function(t){s.dynamicValidateForm.email=t}}})],1),s._l(s.dynamicValidateForm.domains,function(t,l){return a("el-form-item",{key:t.key,attrs:{label:"域名"+l,prop:"domains."+l+".value",rules:{required:!0,message:"域名不能为空",trigger:"blur"}}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:t.value,expression:"domain.value"}],domProps:{value:t.value},on:{input:function(s){t.value=s}}}),a("el-button",{on:{click:function(a){a.preventDefault(),s.removeDomain(t)}}},[s._v("删除")])],1)}),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("dynamicValidateForm")}}},[s._v("提交")]),a("el-button",{on:{click:s.addDomain}},[s._v("新增域名")]),a("el-button",{on:{click:function(t){s.resetForm("dynamicValidateForm")}}},[s._v("重置")])],1)],2)],1),a("p",[s._v("除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-dynamic"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"email"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮箱"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: '请输入邮箱地址', trigger: 'blur' },\n      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dynamicValidateForm.email"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(domain, index) in dynamicValidateForm.domains"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'域名' + index\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.key"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"'domains.' + index + '.value'\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      required: true, message: '域名不能为空', trigger: 'blur'\n    }\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"domain.value"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeDomain(domain)"')]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addDomain"')]),s._v(">")]),s._v("新增域名"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('dynamicValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("domains")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n          }],\n          "),a("span",{staticClass:"hljs-attr"},[s._v("email")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      },\n      removeDomain(item) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" index = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.indexOf(item)\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(")\n        }\n      },\n      addDomain() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicValidateForm.domains.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("key")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v(".now()\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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="年龄" prop="age" :rules="[\n      { required: true, message: \'年龄不能为空\'},\n      { type: \'number\', message: \'年龄必须为数字值\'}\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\')">提交</el-button>\n    <el-button @click="resetForm(\'numberValidateForm\')">重置</el-button>\n  </el-form-item>\n</el-form>\n\n',script:"\n  export default {\n    data() {\n      return {\n        numberValidateForm: {\n          age: ''\n        }\n      };\n    },\n    methods: {\n      submitForm(formName) {\n        this.$refs[formName].validate((valid) => {\n          if (valid) {\n            alert('submit!');\n          } else {\n            console.log('error submit!!');\n            return false;\n          }\n        });\n      },\n      resetForm(formName) {\n        this.$refs[formName].resetFields();\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-form",{ref:"numberValidateForm",staticClass:"demo-ruleForm",attrs:{model:s.numberValidateForm,"label-width":"100px"}},[a("el-form-item",{attrs:{label:"年龄",prop:"age",rules:[{required:!0,message:"年龄不能为空"},{type:"number",message:"年龄必须为数字值"}]}},[a("el-input",{directives:[{name:"model",rawName:"v-model.number",value:s.numberValidateForm.age,expression:"numberValidateForm.age",modifiers:{number:!0}}],attrs:{type:"age","auto-complete":"off"},domProps:{value:s.numberValidateForm.age
-},on:{input:function(t){s.numberValidateForm.age=s._n(t)},blur:function(t){s.$forceUpdate()}}})],1),a("el-form-item",[a("el-button",{attrs:{type:"primary"},on:{click:function(t){s.submitForm("numberValidateForm")}}},[s._v("提交")]),a("el-button",{on:{click:function(t){s.resetForm("numberValidateForm")}}},[s._v("重置")])],1)],1)],1),a("p",[s._v("数字类型的验证需要在 "),a("code",[s._v("v-model")]),s._v(" 处加上 "),a("code",[s._v(".number")]),s._v(" 的修饰符，这是 "),a("code",[s._v("Vue")]),s._v(" 自身提供的用于将绑定值转化为 "),a("code",[s._v("number")]),s._v(" 类型的修饰符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100px"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-ruleForm"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"年龄"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":rules")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[\n      { required: true, message: '年龄不能为空'},\n      { type: 'number', message: '年龄必须为数字值'}\n    ]\"")]),s._v("\n  >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model.number")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"numberValidateForm.age"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("auto-complete")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"off"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"submitForm('numberValidateForm')\"")]),s._v(">")]),s._v("提交"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"resetForm('numberValidateForm')\"")]),s._v(">")]),s._v("重置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("numberValidateForm")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("age")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].validate("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("valid")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (valid) {\n            alert("),a("span",{staticClass:"hljs-string"},[s._v("'submit!'")]),s._v(");\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("'error submit!!'")]),s._v(");\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n          }\n        });\n      },\n      resetForm(formName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs[formName].resetFields();\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"form-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form 表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-xing-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-xing-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 典型表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xing-nei-biao-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xing-nei-biao-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 行内表单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"biao-dan-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#biao-dan-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 表单验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-xiao-yan-gui-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-xiao-yan-gui-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义校验规则")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-dan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-dan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减表单项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-zi-lei-xing-yan-zheng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-zi-lei-xing-yan-zheng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 数字类型验证")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("model")]),a("td",[s._v("表单数据对象")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inline")]),a("td",[s._v("行内表单模式")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("label-position")]),a("td",[s._v("表单域标签的位置")]),a("td",[s._v("string")]),a("td",[s._v("right/left/top")]),a("td",[s._v("right")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的宽度，所有的 form-item 都会继承 form 组件的 labelWidth 的值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-suffix")]),a("td",[s._v("表单域标签的后缀")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("validate")]),a("td",[s._v("对整个表单进行校验的方法")]),a("td",[s._v("Function(callback: Function(boolean))")])]),a("tr",[a("td",[s._v("validateField")]),a("td",[s._v("对部分表单字段进行校验的方法")]),a("td",[s._v("Function(prop: string, callback: Function(errorMessage: string))")])]),a("tr",[a("td",[s._v("resetFields")]),a("td",[s._v("对整个表单进行重置，将所有字段值重置为初始值并移除校验结果")]),a("td",[s._v("-")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"form-item-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#form-item-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Form-Item Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("prop")]),a("td",[s._v("表单域 model 字段")]),a("td",[s._v("string")]),a("td",[s._v("传入 Form 组件的 "),a("code",[s._v("model")]),s._v(" 中的字段")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("标签文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-width")]),a("td",[s._v("表单域标签的的宽度，例如 '50px'")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("required")]),a("td",[s._v("是否必填，如不设置，则会根据校验规则自动生成")]),a("td",[s._v("bolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("rules")]),a("td",[s._v("表单验证规则")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("error")]),a("td",[s._v("表单域验证错误信息, 设置该值会使表单验证状态变为"),a("code",[s._v("error")]),s._v("，并显示该错误信息")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-message")]),a("td",[s._v("是否显示校验错误信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(346)},function(s,t,a){var l=a(13)(a(347),a(348),null,null);s.exports=l.exports},function(s,t,a){"use strict";var l=a(132);s.exports={ready:function(){(0,l.addClass)(this.$el.parentNode,"no-toc")}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h1",[s._v("组件说明文档")])])}]}},function(s,t,a){s.exports=a(350)},function(s,t,a){a(351);var l=a(13)(null,a(353),null,null);s.exports=l.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"guo-ji-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#guo-ji-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 国际化")]),a("p",[s._v("Element 组件内部默认使用中文，若希望使用其他语言，则需要进行多语言设置。以英文为例，在 main.js 中：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-comment"},[s._v("// 完整引入 Element")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n\nVue.use(ElementUI, { locale })\n")])]),a("p",[s._v("或")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-comment"},[s._v("// 按需引入 Element")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" lang "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" locale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale'")]),s._v("\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 设置语言")]),s._v("\nlocale.use(lang)\n\n"),a("span",{staticClass:"hljs-comment"},[s._v("// 引入组件")]),s._v("\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n")])]),a("p",[s._v("如果使用其它语言，默认情况下中文语言包依旧是被引入的，可以使用 webpack 的 NormalModuleReplacementPlugin 替换默认语言包。")]),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v("plugins")]),s._v(": [\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.NormalModuleReplacementPlugin("),a("span",{staticClass:"hljs-regexp"},[s._v("/element-ui[\\/\\\\]lib[\\/\\\\]locale[\\/\\\\]lang[\\/\\\\]zh-CN/")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v(")\n  ]\n}\n")])]),a("h2",{attrs:{id:"jian-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容 "),a("code",[s._v("vue-i18n")])]),a("p",[s._v("Element 兼容 "),a("a",{attrs:{href:"https://github.com/kazupon/vue-i18n"}},[s._v("vue-i18n")]),s._v("，搭配使用能更方便地实现多语言切换。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" VueI18n "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue-i18n'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(VueI18n)\nVue.use(Element)\n\nVue.config.lang = "),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v("\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", zhLocale)\nVue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", enLocale)\n")])]),a("h2",{attrs:{id:"jian-rong-qi-ta-i18n-cha-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jian-rong-qi-ta-i18n-cha-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 兼容其他 i18n 插件")]),a("p",[s._v("如果不使用 "),a("code",[s._v("vue-i18n")]),s._v("，而是用其他的 i18n 插件，Element 将无法兼容，但是可以自定义 Element 的 i18n 的处理方法。")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Element "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" enLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/en'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" zhLocale "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/locale/lang/zh-CN'")]),s._v("\n\nVue.use(Element, {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("i18n")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("path, options")]),s._v(") ")]),s._v("{\n    "),a("span",{staticClass:"hljs-comment"},[s._v("// ...")]),s._v("\n  }\n})\n")])]),a("h2",{attrs:{id:"tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tong-guo-cdn-de-fang-shi-jia-zai-yu-yan-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 通过 CDN 的方式加载语言文件")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  ELEMENT.locale(ELEMENT.lang.en)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("搭配 "),a("code",[s._v("vue-i18n")]),s._v(" 使用")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/vue-i18n/dist/vue-i18n.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/zh-CN.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"//unpkg.com/element-ui/lib/umd/locale/en.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'en'")]),s._v(", ELEMENT.lang.en)\n  Vue.locale("),a("span",{staticClass:"hljs-string"},[s._v("'zh-cn'")]),s._v(", ELEMENT.lang.zhCN)\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("目前 Element 内置了以下语言：")]),a("ul",{staticClass:"language-list"},[a("li",[s._v("简体中文（zh-CN）")]),a("li",[s._v("英语（en）")]),a("li",[s._v("德语（de）")]),a("li",[s._v("葡萄牙语（pt）")]),a("li",[s._v("西班牙语（es）")]),a("li",[s._v("丹麦语（da）")]),a("li",[s._v("法语（fr）")]),a("li",[s._v("挪威语（nb-NO）")]),a("li",[s._v("繁体中文（zh-TW）")]),a("li",[s._v("意大利语（it）")]),a("li",[s._v("韩语（ko）")]),a("li",[s._v("日语（ja）")]),a("li",[s._v("荷兰语（nl）")]),a("li",[s._v("越南语（vi）")]),a("li",[s._v("俄语（ru-RU）")]),a("li",[s._v("土耳其语（tr-TR）")]),a("li",[s._v("巴西葡萄牙语（pt-br）")]),a("li",[s._v("波斯语（fa）")]),a("li",[s._v("泰语（th）")]),a("li",[s._v("印尼语（id）")]),a("li",[s._v("保加利亚语（bg）")]),a("li",[s._v("波兰语（pl）")]),a("li",[s._v("芬兰语（fi）")]),a("li",[s._v("瑞典语（sv-SE）")]),a("li",[s._v("希腊语（el）")]),a("li",[s._v("斯洛伐克语（sk）")]),a("li",[s._v("加泰罗尼亚语（ca）")]),a("li",[s._v("捷克语（cz）")]),a("li",[s._v("乌克兰语（ua）")]),a("li",[s._v("土库曼语（tk）")])]),a("p",[s._v("如果你需要使用其他的语言，欢迎贡献 PR：只需在 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/tree/master/src/locale/lang"}},[s._v("这里")]),s._v(" 添加一个语言配置文件即可。")])])}]}},function(s,t,a){s.exports=a(355)},function(s,t,a){a(356);var l=a(13)(a(358),a(359),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(140);t.default={data:function(){return{icons:l}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("提供了一套常用的图标集合。")]),s._m(1),s._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">搜索</el-button>\n\n',script:null,style:null}}},[a("div",{staticClass:"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"}},[s._v("搜索")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-share"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-delete"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),s._v("搜索"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n")])])])]),s._m(3),a("ul",{staticClass:"icon-list"},s._l(s.icons,function(t){return a("li",[a("span",[a("i",{class:"el-icon-"+t}),s._v("\n      "+s._s("el-icon-"+t)+"\n    ")])])}))],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"icon-tu-biao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#icon-tu-biao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Icon 图标")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shi-yong-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("直接通过设置类名为 "),a("code",[s._v("el-icon-iconName")]),s._v(" 来使用即可。例如：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-biao-ji-he"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-biao-ji-he","aria-hidden":"true"}},[s._v("¶")]),s._v(" 图标集合")])}]}},function(s,t,a){s.exports=a(361)},function(s,t,a){a(362);var l=a(13)(a(364),a(365),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{num1:1,num2:1,num3:5,num4:1,num5:1,num6:1}},methods:{handleChange:function(s){console.log(s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("仅允许输入标准的数字值，可定义范围")]),s._m(1),a("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() {\n      return {\n        num1: 1\n      };\n    },\n    methods: {\n      handleChange(value) {\n        console.log(value);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num1,expression:"num1"}],attrs:{min:1,max:10},domProps:{value:s.num1},on:{change:s.handleChange,input:function(t){s.num1=t}}})]],2),a("p",[s._v("要使用它，只需要在"),a("code",[s._v("el-input-number")]),s._v("元素中使用"),a("code",[s._v("v-model")]),s._v("绑定变量即可，变量的初始值即为默认值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":min")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(value) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(value);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("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() {\n      return {\n        num2: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num2,expression:"num2"}],attrs:{disabled:!0},domProps:{value:s.num2},on:{input:function(t){s.num2=t}}})]],2),a("p",[a("code",[s._v("disabled")]),s._v("属性接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可禁用整个组件，如果你只需要控制数值在某一范围内，可以设置"),a("code",[s._v("min")]),s._v("属性和"),a("code",[s._v("max")]),s._v("属性，不设置"),a("code",[s._v("min")]),s._v("和"),a("code",[s._v("max")]),s._v("时，最小值为 0。")]),a("div",{staticClass:"highlight",
-slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("允许定义递增递减的步数控制")]),a("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() {\n      return {\n        num3: 5\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num3,expression:"num3"}],attrs:{step:2},domProps:{value:s.num3},on:{input:function(t){s.num3=t}}})]],2),a("p",[s._v("设置"),a("code",[s._v("step")]),s._v("属性可以控制步长，接受一个"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        num4: 1,\n        num5: 1,\n        num6: 1\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num4,expression:"num4"}],attrs:{size:"large"},domProps:{value:s.num4},on:{input:function(t){s.num4=t}}}),a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num5,expression:"num5"}],domProps:{value:s.num5},on:{input:function(t){s.num5=t}}}),a("el-input-number",{directives:[{name:"model",rawName:"v-model",value:s.num6,expression:"num6"}],attrs:{size:"small"},domProps:{value:s.num6},on:{input:function(t){s.num6=t}}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num5"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"num6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input-number")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("num6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),s._m(8),s._m(9)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"inputnumber-ji-shu-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#inputnumber-ji-shu-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" InputNumber 计数器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-shu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-shu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 步数")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("额外提供了 "),a("code",[s._v("large")]),s._v("、"),a("code",[s._v("small")]),s._v(" 两种尺寸的数字输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("设置计数器允许的最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("设置计数器允许的最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("Infinity")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("计数器步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("计数器尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用计数器")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("controls")]),a("td",[s._v("是否使用控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值被改变时触发")]),a("td",[s._v("最后变更的值")])])])])}]}},function(s,t,a){s.exports=a(367)},function(s,t,a){a(368);var l=a(13)(a(370),a(371),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(2);l.component("my-item-zh",{functional:!0,render:function(s,t){var a=t.props.item;return s("li",t.data,[s("div",{attrs:{class:"name"}},[a.value]),s("span",{attrs:{class:"addr"}},[a.address])])},props:{item:{type:Object,required:!0}}}),t.default={data:function(){return{restaurants:[],input:"",input1:"",input2:"",input3:"",input4:"",input5:"",input6:"",input7:"",input8:"",input9:"",textarea:"",textarea2:"",textarea3:"",select:"",state1:"",state2:"",state3:"",state4:""}},methods:{loadAll:function(){return[{value:"三全鲜食（北新泾店）",address:"长宁区新渔路144号"},{value:"Hot honey 首尔炸鸡（仙霞路）",address:"上海市长宁区淞虹路661号"},{value:"新旺角茶餐厅",address:"上海市普陀区真北路988号创邑金沙谷6号楼113"},{value:"泷千家(天山西路店)",address:"天山西路438号"},{value:"胖仙女纸杯蛋糕（上海凌空店）",address:"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"},{value:"贡茶",address:"上海市长宁区金钟路633号"},{value:"豪大大香鸡排超级奶爸",address:"上海市嘉定区曹安公路曹安路1685号"},{value:"茶芝兰（奶茶，手抓饼）",address:"上海市普陀区同普路1435号"},{value:"十二泷町",address:"上海市北翟路1444弄81号B幢-107"},{value:"星移浓缩咖啡",address:"上海市嘉定区新郁路817号"},{value:"阿姨奶茶/豪大大",address:"嘉定区曹安路1611号"},{value:"新麦甜四季甜品炸鸡",address:"嘉定区曹安公路2383弄55号"},{value:"Monica摩托主题咖啡店",address:"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"},{value:"浮生若茶（凌空soho店）",address:"上海长宁区金钟路968号9号楼地下一层"},{value:"NONO JUICE  鲜榨果汁",address:"上海市长宁区天山西路119号"},{value:"CoCo都可(北新泾店）",address:"上海市长宁区仙霞西路"},{value:"快乐柠檬（神州智慧店）",address:"上海市长宁区天山西路567号1层R117号店铺"},{value:"Merci Paul cafe",address:"上海市普陀区光复西路丹巴路28弄6号楼819"},{value:"猫山王（西郊百联店）",address:"上海市长宁区仙霞西路88号第一层G05-F01-1-306"},{value:"枪会山",address:"上海市普陀区棕榈路"},{value:"纵食",address:"元丰天山花园(东门) 双流路267号"},{value:"钱记",address:"上海市长宁区天山西路"},{value:"壹杯加",address:"上海市长宁区通协路"},{value:"唦哇嘀咖",address:"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"},{value:"爱茜茜里(西郊百联)",address:"长宁区仙霞西路88号1305室"},{value:"爱茜茜里(近铁广场)",address:"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"},{value:"鲜果榨汁（金沙江路和美广店）",address:"普陀区金沙江路2239号金沙和美广场B1-10-6"},{value:"开心丽果（缤谷店）",address:"上海市长宁区威宁路天山路341号"},{value:"超级鸡车（丰庄路店）",address:"上海市嘉定区丰庄路240号"},{value:"妙生活果园（北新泾店）",address:"长宁区新渔路144号"},{value:"香宜度麻辣香锅",address:"长宁区淞虹路148号"},{value:"凡仔汉堡（老真北路店）",address:"上海市普陀区老真北路160号"},{value:"港式小铺",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"蜀香源麻辣香锅（剑河路店）",address:"剑河路443-1"},{value:"北京饺子馆",address:"长宁区北新泾街道天山西路490-1号"},{value:"饭典*新简餐（凌空SOHO店）",address:"上海市长宁区金钟路968号9号楼地下一层9-83室"},{value:"焦耳·川式快餐（金钟路店）",address:"上海市金钟路633号地下一层甲部"},{value:"动力鸡车",address:"长宁区仙霞西路299弄3号101B"},{value:"浏阳蒸菜",address:"天山西路430号"},{value:"四海游龙（天山西路店）",address:"上海市长宁区天山西路"},{value:"樱花食堂（凌空店）",address:"上海市长宁区金钟路968号15楼15-105室"},{value:"壹分米客家传统调制米粉(天山店)",address:"天山西路428号"},{value:"福荣祥烧腊（平溪路店）",address:"上海市长宁区协和路福泉路255弄57-73号"},{value:"速记黄焖鸡米饭",address:"上海市长宁区北新泾街道金钟路180号1层01号摊位"},{value:"红辣椒麻辣烫",address:"上海市长宁区天山西路492号"},{value:"(小杨生煎)西郊百联餐厅",address:"长宁区仙霞西路88号百联2楼"},{value:"阳阳麻辣烫",address:"天山西路389号"},{value:"南拳妈妈龙虾盖浇饭",address:"普陀区金沙江路1699号鑫乐惠美食广场A13"}]},querySearch:function(s,t){var a=this.restaurants,l=s?a.filter(this.createStateFilter(s)):a;t(l)},querySearchAsync:function(s,t){var a=this.restaurants,l=s?a.filter(this.createStateFilter(s)):a;clearTimeout(this.timeout),this.timeout=setTimeout(function(){t(l)},3e3*Math.random())},createStateFilter:function(s){return function(t){return 0===t.value.indexOf(s.toLowerCase())}},handleSelect:function(s){console.log(s)},handleIconClick:function(s){console.log(s)}},mounted:function(){this.restaurants=this.loadAll()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过鼠标或键盘输入字符")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input v-model="input" placeholder="请输入内容"></el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input,expression:"input"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input},on:{input:function(t){s.input=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请输入内容" v-model="input1" :disabled="true">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input1: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input1,expression:"input1"}],attrs:{placeholder:"请输入内容",disabled:!0},domProps:{value:s.input1},on:{input:function(t){s.input1=t}}})],1),a("p",[s._v("通过 "),a("code",[s._v("disabled")]),s._v(" 属性指定是否禁用 input 组件")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("带有图标标记输入类型")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="请选择日期" icon="search" v-model="input2" :on-icon-click="handleIconClick">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input2: ''\n    }\n  },\n  methods: {\n    handleIconClick(ev) {\n      console.log(ev);\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input2,expression:"input2"}],attrs:{placeholder:"请选择日期",icon:"search","on-icon-click":s.handleIconClick},domProps:{value:s.input2},on:{input:function(t){s.input2=t}}})],1),a("p",[s._v("可以通过 "),a("code",[s._v("icon")]),s._v(" 属性在 input 组件尾部增加显示图标，可以通过 "),a("code",[s._v("on-icon-click")]),s._v(" 钩子函数来在点击图标后执行需要的逻辑。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择日期"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n    handleIconClick(ev) {\n      "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" :rows="2" placeholder="请输入内容" v-model="textarea">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea,expression:"textarea"}],attrs:{type:"textarea",rows:2,placeholder:"请输入内容"},domProps:{value:s.textarea},on:{input:function(t){s.textarea=t}}})],1),a("p",[s._v("文本域高度可通过 "),a("code",[s._v("rows")]),s._v(" 属性控制")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":rows")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input type="textarea" autosize placeholder="请输入内容" v-model="textarea2">\n</el-input>\n<div style="margin: 20px 0;"></div>\n<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" placeholder="请输入内容" v-model="textarea3">\n</el-input>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      textarea2: '',\n      textarea3: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea2,expression:"textarea2"}],attrs:{type:"textarea",autosize:"",placeholder:"请输入内容"},domProps:{value:s.textarea2},on:{input:function(t){s.textarea2=t}}}),a("div",{staticStyle:{margin:"20px 0"}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.textarea3,expression:"textarea3"}],attrs:{type:"textarea",autosize:{minRows:2,maxRows:4},placeholder:"请输入内容"},domProps:{value:s.textarea3},on:{input:function(t){s.textarea3=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("autosize")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 20px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":autosize")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{ minRows: 2, maxRows: 4}"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"textarea3"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("textarea3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可前置或后置元素，一般为标签或按钮")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div>\n  <el-input placeholder="请输入内容" v-model="input3">\n    <template slot="prepend">Http://</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input4">\n    <template slot="append">.com</template>\n  </el-input>\n</div>\n<div style="margin-top: 15px;">\n  <el-input placeholder="请输入内容" v-model="input5">\n    <el-select v-model="select" slot="prepend" placeholder="请选择">\n      <el-option label="餐厅名" value="1"></el-option>\n      <el-option label="订单号" value="2"></el-option>\n      <el-option label="用户电话" value="3"></el-option>\n    </el-select>\n    <el-button slot="append" icon="search"></el-button>\n  </el-input>\n</div>\n\n\n',script:"\nexport default {\n  data() {\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input3,expression:"input3"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input3},on:{input:function(t){s.input3=t}}},[a("template",{slot:"prepend"},[s._v("Http://")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input4,expression:"input4"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input4},on:{input:function(t){s.input4=t}}},[a("template",{slot:"append"},[s._v(".com")])],2)],1),a("div",{staticStyle:{"margin-top":"15px"}},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input5,expression:"input5"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input5},on:{input:function(t){s.input5=t}}},[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.select,expression:"select"}],attrs:{placeholder:"请选择"},domProps:{value:s.select},on:{input:function(t){s.select=t}},slot:"prepend"},[a("el-option",{attrs:{label:"餐厅名",value:"1"}}),a("el-option",{attrs:{label:"订单号",value:"2"}}),a("el-option",{attrs:{label:"用户电话",value:"3"}})],1),a("el-button",{attrs:{icon:"search"},slot:"append"})],1)],1)]),a("p",[s._v("可通过 slot 来指定在 input 中前置或者后置内容。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(">")]),s._v("Http://"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(">")]),s._v(".com"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 15px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input5"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"
-},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"select"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prepend"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"餐厅名"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"订单号"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户电话"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"append"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"search"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-select")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-input")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("110px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("select")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="demo-input-size">\n  <el-input size="large" placeholder="请输入内容" v-model="input6">\n  </el-input>\n  <el-input placeholder="请输入内容" v-model="input7">\n  </el-input>\n  <el-input size="small" placeholder="请输入内容" v-model="input8">\n  </el-input>\n  <el-input size="mini" placeholder="请输入内容" v-model="input9">\n  </el-input>\n</div>\n\n\n',script:"\nexport default {\n  data() {\n    return {\n      input6: '',\n      input7: '',\n      input8: '',\n      input9: ''\n    }\n  }\n}\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"demo-input-size"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input6,expression:"input6"}],attrs:{size:"large",placeholder:"请输入内容"},domProps:{value:s.input6},on:{input:function(t){s.input6=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input7,expression:"input7"}],attrs:{placeholder:"请输入内容"},domProps:{value:s.input7},on:{input:function(t){s.input7=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input8,expression:"input8"}],attrs:{size:"small",placeholder:"请输入内容"},domProps:{value:s.input8},on:{input:function(t){s.input8=t}}}),a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.input9,expression:"input9"}],attrs:{size:"mini",placeholder:"请输入内容"},domProps:{value:s.input9},on:{input:function(t){s.input9=t}}})],1)]),a("p",[s._v("可通过 "),a("code",[s._v("size")]),s._v(" 属性指定输入框的尺寸，除了默认的大小外，还提供了 large、small 和 mini 三种尺寸。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-input-size"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"large"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input6"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input7"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input9"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n  data() {\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v("input9")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("根据输入内容提供对应的输入建议")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="demo-autocomplete">\n  <el-col :span="12">\n    <div class="sub-title">激活即列出输入建议</div>\n    <el-autocomplete class="inline-input" v-model="state1" :fetch-suggestions="querySearch" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n  </el-col>\n  <el-col :span="12">\n    <div class="sub-title">输入后匹配输入建议</div>\n    <el-autocomplete class="inline-input" v-model="state2" :fetch-suggestions="querySearch" placeholder="请输入内容" :trigger-on-focus="false" @select="handleSelect"></el-autocomplete>\n  </el-col>\n</el-row>\n\n',script:'\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state1: \'\',\n        state2: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n',style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"demo-autocomplete"},[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("激活即列出输入建议")]),a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state1,expression:"state1"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容"},domProps:{value:s.state1},on:{select:s.handleSelect,input:function(t){s.state1=t}}})],1),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"sub-title"},[s._v("输入后匹配输入建议")]),a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state2,expression:"state2"}],staticClass:"inline-input",attrs:{"fetch-suggestions":s.querySearch,placeholder:"请输入内容","trigger-on-focus":!1},domProps:{value:s.state2},on:{select:s.handleSelect,input:function(t){s.state2=t}}})],1)],1)],1),a("p",[s._v("autocomplete 是一个可带输入建议的输入框组件，"),a("code",[s._v("fetch-suggestions")]),s._v(" 是一个返回输入建议的方法属性，如 querySearch(queryString, cb)，在该方法中你可以在你的输入建议数据准备好时通过 cb(data) 返回到 autocomplete 组件中。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-autocomplete"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("激活即列出输入建议"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sub-title"')]),s._v(">")]),s._v("输入后匹配输入建议"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inline-input"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":trigger-on-focus")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n    >")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (restaurant.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{
-staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("可自定义输入建议的显示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete popper-class="my-autocomplete" v-model="state3" :fetch-suggestions="querySearch" custom-item="my-item-zh" placeholder="请输入内容" @select="handleSelect" icon="edit" :on-icon-click="handleIconClick"></el-autocomplete>\n\n\n\n\n',script:'\n  Vue.component(\'my-item-zh\', {\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: \'name\' } }, [item.value]),\n        h(\'span\', { attrs: { class: \'addr\' } }, [item.address])\n      ]);\n    },\n    props: {\n      item: { type: Object, required: true }\n    }\n  });\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state3: \'\'\n      };\n    },\n    methods: {\n      querySearch(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;\n        // 调用 callback 返回建议列表的数据\n        cb(results);\n      },\n      createFilter(queryString) {\n        return (restaurant) => {\n          return (restaurant.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      handleSelect(item) {\n        console.log(item);\n      },\n      handleIconClick(ev) {\n        console.log(ev);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  }\n',style:"\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state3,expression:"state3"}],attrs:{"popper-class":"my-autocomplete","fetch-suggestions":s.querySearch,"custom-item":"my-item-zh",placeholder:"请输入内容",icon:"edit","on-icon-click":s.handleIconClick},domProps:{value:s.state3},on:{select:s.handleSelect,input:function(t){s.state3=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("popper-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-autocomplete"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearch"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("custom-item")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"my-item-zh"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-icon-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleIconClick"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n.my-autocomplete {\n  li {\n    line-height: normal;\n    padding: 7px;\n\n    .name {\n      text-overflow: ellipsis;\n      overflow: hidden;\n    }\n    .addr {\n      font-size: 12px;\n      color: #b4b4b4;\n    }\n\n    .highlighted .addr {\n      color: #ddd;\n    }\n  }\n}\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  Vue.component("),a("span",{staticClass:"hljs-string"},[s._v("'my-item-zh'")]),s._v(", {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("functional")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),s._v(" ("),a("span",{staticClass:"hljs-params"},[s._v("h, ctx")]),s._v(") ")]),s._v("{\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" item = ctx.props.item;\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" h("),a("span",{staticClass:"hljs-string"},[s._v("'li'")]),s._v(", ctx.data, [\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'div'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(" } }, [item.value]),\n        h("),a("span",{staticClass:"hljs-string"},[s._v("'span'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("attrs")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'addr'")]),s._v(" } }, [item.address])\n      ]);\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n      "),a("span",{staticClass:"hljs-attr"},[s._v("item")]),s._v(": { "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-built_in"},[s._v("Object")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("required")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" }\n    }\n  });\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      querySearch(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createFilter(queryString)) : restaurants;\n        "),a("span",{staticClass:"hljs-comment"},[s._v("// 调用 callback 返回建议列表的数据")]),s._v("\n        cb(results);\n      },\n      createFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("restaurant")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (restaurant.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      },\n      handleIconClick(ev) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(ev);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("从服务端搜索数据")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-autocomplete v-model="state4" :fetch-suggestions="querySearchAsync" placeholder="请输入内容" @select="handleSelect"></el-autocomplete>\n\n',script:'\n  export default {\n    data() {\n      return {\n        restaurants: [],\n        state4: \'\',\n        timeout:  null\n      };\n    },\n    methods: {\n      loadAll() {\n        return [\n          { "value": "三全鲜食（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "Hot honey 首尔炸鸡（仙霞路）", "address": "上海市长宁区淞虹路661号" },\n          { "value": "新旺角茶餐厅", "address": "上海市普陀区真北路988号创邑金沙谷6号楼113" },\n          { "value": "泷千家(天山西路店)", "address": "天山西路438号" },\n          { "value": "胖仙女纸杯蛋糕（上海凌空店）", "address": "上海市长宁区金钟路968号1幢18号楼一层商铺18-101" },\n          { "value": "贡茶", "address": "上海市长宁区金钟路633号" },\n          { "value": "豪大大香鸡排超级奶爸", "address": "上海市嘉定区曹安公路曹安路1685号" },\n          { "value": "茶芝兰（奶茶，手抓饼）", "address": "上海市普陀区同普路1435号" },\n          { "value": "十二泷町", "address": "上海市北翟路1444弄81号B幢-107" },\n          { "value": "星移浓缩咖啡", "address": "上海市嘉定区新郁路817号" },\n          { "value": "阿姨奶茶/豪大大", "address": "嘉定区曹安路1611号" },\n          { "value": "新麦甜四季甜品炸鸡", "address": "嘉定区曹安公路2383弄55号" },\n          { "value": "Monica摩托主题咖啡店", "address": "嘉定区江桥镇曹安公路2409号1F，2383弄62号1F" },\n          { "value": "浮生若茶（凌空soho店）", "address": "上海长宁区金钟路968号9号楼地下一层" },\n          { "value": "NONO JUICE  鲜榨果汁", "address": "上海市长宁区天山西路119号" },\n          { "value": "CoCo都可(北新泾店）", "address": "上海市长宁区仙霞西路" },\n          { "value": "快乐柠檬（神州智慧店）", "address": "上海市长宁区天山西路567号1层R117号店铺" },\n          { "value": "Merci Paul cafe", "address": "上海市普陀区光复西路丹巴路28弄6号楼819" },\n          { "value": "猫山王（西郊百联店）", "address": "上海市长宁区仙霞西路88号第一层G05-F01-1-306" },\n          { "value": "枪会山", "address": "上海市普陀区棕榈路" },\n          { "value": "纵食", "address": "元丰天山花园(东门) 双流路267号" },\n          { "value": "钱记", "address": "上海市长宁区天山西路" },\n          { "value": "壹杯加", "address": "上海市长宁区通协路" },\n          { "value": "唦哇嘀咖", "address": "上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元" },\n          { "value": "爱茜茜里(西郊百联)", "address": "长宁区仙霞西路88号1305室" },\n          { "value": "爱茜茜里(近铁广场)", "address": "上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺" },\n          { "value": "鲜果榨汁（金沙江路和美广店）", "address": "普陀区金沙江路2239号金沙和美广场B1-10-6" },\n          { "value": "开心丽果（缤谷店）", "address": "上海市长宁区威宁路天山路341号" },\n          { "value": "超级鸡车（丰庄路店）", "address": "上海市嘉定区丰庄路240号" },\n          { "value": "妙生活果园（北新泾店）", "address": "长宁区新渔路144号" },\n          { "value": "香宜度麻辣香锅", "address": "长宁区淞虹路148号" },\n          { "value": "凡仔汉堡（老真北路店）", "address": "上海市普陀区老真北路160号" },\n          { "value": "港式小铺", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "蜀香源麻辣香锅（剑河路店）", "address": "剑河路443-1" },\n          { "value": "北京饺子馆", "address": "长宁区北新泾街道天山西路490-1号" },\n          { "value": "饭典*新简餐（凌空SOHO店）", "address": "上海市长宁区金钟路968号9号楼地下一层9-83室" },\n          { "value": "焦耳·川式快餐（金钟路店）", "address": "上海市金钟路633号地下一层甲部" },\n          { "value": "动力鸡车", "address": "长宁区仙霞西路299弄3号101B" },\n          { "value": "浏阳蒸菜", "address": "天山西路430号" },\n          { "value": "四海游龙（天山西路店）", "address": "上海市长宁区天山西路" },\n          { "value": "樱花食堂（凌空店）", "address": "上海市长宁区金钟路968号15楼15-105室" },\n          { "value": "壹分米客家传统调制米粉(天山店)", "address": "天山西路428号" },\n          { "value": "福荣祥烧腊（平溪路店）", "address": "上海市长宁区协和路福泉路255弄57-73号" },\n          { "value": "速记黄焖鸡米饭", "address": "上海市长宁区北新泾街道金钟路180号1层01号摊位" },\n          { "value": "红辣椒麻辣烫", "address": "上海市长宁区天山西路492号" },\n          { "value": "(小杨生煎)西郊百联餐厅", "address": "长宁区仙霞西路88号百联2楼" },\n          { "value": "阳阳麻辣烫", "address": "天山西路389号" },\n          { "value": "南拳妈妈龙虾盖浇饭", "address": "普陀区金沙江路1699号鑫乐惠美食广场A13" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        var restaurants = this.restaurants;\n        var results = queryString ? restaurants.filter(this.createStateFilter(queryString)) : restaurants;\n\n        clearTimeout(this.timeout);\n        this.timeout = setTimeout(() => {\n          cb(results);\n        }, 3000 * Math.random());\n      },\n      createStateFilter(queryString) {\n        return (state) => {\n          return (state.value.indexOf(queryString.toLowerCase()) === 0);\n        };\n      },\n      handleSelect(item) {\n        console.log(item);\n      }\n    },\n    mounted() {\n      this.restaurants = this.loadAll();\n    }\n  };\n',
-style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-autocomplete",{directives:[{name:"model",rawName:"v-model",value:s.state4,expression:"state4"}],attrs:{"fetch-suggestions":s.querySearchAsync,placeholder:"请输入内容"},domProps:{value:s.state4},on:{select:s.handleSelect,input:function(t){s.state4=t}}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"state4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":fetch-suggestions")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"querySearchAsync"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入内容"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v("\n>")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-autocomplete")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("restaurants")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("state4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("timeout")]),s._v(":  "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      loadAll() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" [\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"三全鲜食（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Hot honey 首尔炸鸡（仙霞路）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区淞虹路661号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新旺角茶餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路988号创邑金沙谷6号楼113"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"泷千家(天山西路店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路438号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"胖仙女纸杯蛋糕（上海凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号1幢18号楼一层商铺18-101"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"贡茶"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路633号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"豪大大香鸡排超级奶爸"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区曹安公路曹安路1685号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"茶芝兰（奶茶，手抓饼）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区同普路1435号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"十二泷町"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市北翟路1444弄81号B幢-107"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"星移浓缩咖啡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区新郁路817号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阿姨奶茶/豪大大"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安路1611号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"新麦甜四季甜品炸鸡"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区曹安公路2383弄55号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Monica摩托主题咖啡店"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"嘉定区江桥镇曹安公路2409号1F，2383弄62号1F"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浮生若茶（凌空soho店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海长宁区金钟路968号9号楼地下一层"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"NONO JUICE  鲜榨果汁"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路119号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"CoCo都可(北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"快乐柠檬（神州智慧店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路567号1层R117号店铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"Merci Paul cafe"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区光复西路丹巴路28弄6号楼819"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"猫山王（西郊百联店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区仙霞西路88号第一层G05-F01-1-306"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"枪会山"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区棕榈路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"纵食"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"元丰天山花园(东门) 双流路267号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"钱记"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹杯加"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区通协路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"唦哇嘀咖"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区新泾镇金钟路999号2幢（B幢）第01层第1-02A单元"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(西郊百联)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号1305室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"爱茜茜里(近铁广场)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区真北路818号近铁城市广场北区地下二楼N-B2-O2-C商铺"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"鲜果榨汁（金沙江路和美广店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路2239号金沙和美广场B1-10-6"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"开心丽果（缤谷店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区威宁路天山路341号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"超级鸡车（丰庄路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市嘉定区丰庄路240号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"妙生活果园（北新泾店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区新渔路144号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"香宜度麻辣香锅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区淞虹路148号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"凡仔汉堡（老真北路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市普陀区老真北路160号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"港式小铺"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"蜀香源麻辣香锅（剑河路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"剑河路443-1"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"北京饺子馆"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区北新泾街道天山西路490-1号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"饭典*新简餐（凌空SOHO店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号9号楼地下一层9-83室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"焦耳·川式快餐（金钟路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市金钟路633号地下一层甲部"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"动力鸡车"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路299弄3号101B"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"浏阳蒸菜"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路430号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"四海游龙（天山西路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"樱花食堂（凌空店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区金钟路968号15楼15-105室"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"壹分米客家传统调制米粉(天山店)"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路428号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"福荣祥烧腊（平溪路店）"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区协和路福泉路255弄57-73号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"速记黄焖鸡米饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区北新泾街道金钟路180号1层01号摊位"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"红辣椒麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"上海市长宁区天山西路492号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"(小杨生煎)西郊百联餐厅"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"长宁区仙霞西路88号百联2楼"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"阳阳麻辣烫"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"天山西路389号"')]),s._v(" },\n          { "),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"南拳妈妈龙虾盖浇饭"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"普陀区金沙江路1699号鑫乐惠美食广场A13"')]),s._v(" }\n        ];\n      },\n      querySearchAsync(queryString, cb) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" results = queryString ? restaurants.filter("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".createStateFilter(queryString)) : restaurants;\n\n        clearTimeout("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout);\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".timeout = setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          cb(results);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(" * "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random());\n      },\n      createStateFilter(queryString) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("state")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (state.value.indexOf(queryString.toLowerCase()) === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(");\n        };\n      },\n      handleSelect(item) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(item);\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".restaurants = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loadAll();\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"input-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input 输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-icon-de-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-icon-de-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带 icon 的输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("用于输入多行文本信息，通过将 "),a("code",[s._v("type")]),s._v(" 属性的值指定为 textarea。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-zi-gua-ying-wen-ben-gao-du-de-wen-ben-yu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可自适应文本高度的文本域")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过设置 "),a("code",[s._v("autosize")]),s._v(" 属性可以使得文本域的高度能够根据文本内容自动进行调整，并且 "),a("code",[s._v("autosize")]),s._v(" 还可以设定为一个对象，指定最小行数和最大行数。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-he-xing-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-he-xing-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 复合型输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-cun"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-cun","aria-hidden":"true"}},[s._v("¶")]),s._v(" 尺寸")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-shu-ru-jian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-shu-ru-jian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带输入建议")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("类型")]),a("td",[s._v("string")]),a("td",[s._v("text/textarea")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("maxlength")]),a("td",[s._v("最大输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("minlength")]),a("td",[s._v("最小输入长度")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸，只在 "),a("code",[s._v('type!="textarea"')]),s._v(" 时有效")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("rows")]),a("td",[s._v("输入框行数，只对 "),a("code",[s._v('type="textarea"')]),s._v(" 有效")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("autosize")]),a("td",[s._v("自适应内容高度，只对 "),a("code",[s._v('type="textarea"')]),s._v(" 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }")]),a("td",[s._v("boolean/object")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("auto-complete")]),a("td",[s._v("原生属性，自动补全")]),a("td",[s._v("string")]),a("td",[s._v("on, off")]),a("td",[s._v("off")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("原生属性，是否只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("原生属性，设置最大值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min")]),a("td",[s._v("原生属性，设置最小值")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("原生属性，设置输入字段的合法数字间隔")]),a("td",[s._v("—")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resize")]),a("td",[s._v("控制是否能被用户缩放")]),a("td",[s._v("string")]),a("td",[s._v("none, both, horizontal, vertical")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("autofocus")]),a("td",[s._v("原生属性，自动获取焦点")]),a("td",[s._v("boolean")]),a("td",[s._v("true, false")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("form")]),a("td",[s._v("原生属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("点击 Input 内的图标的钩子函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"input-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#input-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Input Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("click")]),a("td",[s._v("点击 Input 内的图标时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("blur")]),a("td",[s._v("在 Input 失去焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("focus")]),a("td",[s._v("在 Input 获得焦点时触发")]),a("td",[s._v("(event: Event)")])]),a("tr",[a("td",[s._v("change")]),a("td",[s._v("在 Input 值改变时触发")]),a("td",[s._v("(value: string | number)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("输入框占位文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("必填值输入绑定值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("custom-item")]),a("td",[s._v("通过该参数指定自定义的输入建议列表项的组件名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fetch-suggestions")]),a("td",[s._v("返回输入建议的方法，仅当你的输入建议数据 resolve 时，通过调用 callback(data:[]) 来返回它")]),a("td",[s._v("Function(queryString, callback)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Autocomplete 下拉列表的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("trigger-on-focus")]),a("td",[s._v("是否在输入框 focus 时显示建议列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("on-icon-click")]),a("td",[s._v("点击图标的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("输入框尾部图标")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"autocomplete-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#autocomplete-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Autocomplete Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("点击选中建议项时触发")]),a("td",[s._v("选中建议项")])])])])}]}},function(s,t,a){s.exports=a(373)},function(s,t,a){var l=a(13)(null,a(374),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 安装")]),a("h3",{attrs:{id:"npm-an-zhuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#npm-an-zhuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" npm 安装")]),a("p",[s._v("推荐使用 npm 的方式安装，它能更好地和 "),a("a",{attrs:{href:"https://webpack.js.org/"}},[s._v("webpack")]),s._v(" 打包工具配合使用。")]),a("pre",[a("code",{staticClass:"hljs language-shell"},[s._v("npm i element-ui -S\n")])]),a("h3",{attrs:{id:"cdn"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#cdn","aria-hidden":"true"}},[s._v("¶")]),s._v(" CDN")]),a("p",[s._v("目前可以通过 "),a("a",{attrs:{href:"https://unpkg.com/element-ui/"}},[s._v("unpkg.com/element-ui")]),s._v(" 获取到最新版本的资源，在页面上引入 js 和 css 文件即可开始使用。")]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])]),a("h3",{attrs:{id:"hello-world"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hello-world","aria-hidden":"true"}},[s._v("¶")]),s._v(" Hello world")]),a("p",[s._v("通过 CDN 的方式我们可以很容易地使用 Element 写出一个 Hello world 页面。"),a("a",{attrs:{href:"http://codepen.io/QingWei-Li/pen/vXwJrY"}},[s._v("在线演示")])]),a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-meta"},[s._v("<!DOCTYPE html>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("meta")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("charset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"UTF-8"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入样式 -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("link")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("rel")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"stylesheet"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/theme-default/index.css"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("head")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v("="),a("span",{
-staticClass:"hljs-string"},[s._v('"app"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible = true"')]),s._v(">")]),s._v("按钮"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Hello world"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("欢迎使用 Element"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("body")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 先引入 Vue -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/vue/dist/vue.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("<!-- 引入组件库 -->")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://unpkg.com/element-ui/lib/index.js"')]),s._v(">")]),a("span",{staticClass:"undefined"}),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n      el: "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n      data: "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-keyword"},[s._v("function")]),a("span",{staticClass:"hljs-params"},[s._v("()")])]),s._v("{\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { visible: "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }\n      }\n    })\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("html")]),s._v(">")]),s._v("\n")])]),a("p",[s._v("如果是通过 npm 安装，并希望配合 webpack 使用，请阅读下一节：快速上手。")])])}]}},function(s,t,a){s.exports=a(376)},function(s,t,a){a(377);var l=a(13)(null,a(379),null,null);s.exports=l.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过基础的 24 分栏，迅速简便地创建布局。")]),s._m(1),a("p",[s._v("使用单一分栏创建基础的栅格布局。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",[a("el-col",{attrs:{span:24}},[a("div",{staticClass:"grid-content bg-purple-dark"})])],1),a("el-row",[a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:12}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1),a("el-row",[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("p",[s._v("通过 row 和 col 组件，并通过 col 组件的 "),a("code",[s._v("span")]),s._v(" 属性我们就可以自由地组合布局。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"24"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-dark"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("分栏之间存在间隔。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("Row 组件 提供 "),a("code",[s._v("gutter")]),s._v(" 属性来指定每一栏之间的间隔，默认间隔为 0。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过基础的 1/24 分栏任意扩展组合形成较为复杂的混合布局。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:8}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:16}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:4}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{
-staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"16"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持偏移指定的栏数。")]),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{attrs:{gutter:20}},[a("el-col",{attrs:{span:12,offset:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("通过制定 col 组件的 "),a("code",[s._v("offset")]),s._v(" 属性可以指定分栏偏移的栏数。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"20"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"12"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":offset")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"row-bg",attrs:{type:"flex"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"center"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"end"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-between"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1),a("el-row",{staticClass:"row-bg",attrs:{type:"flex",justify:"space-around"}},[a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{span:6}},[a("div",{staticClass:"grid-content bg-purple"})])],1)],1),a("p",[s._v("将 "),a("code",[s._v("type")]),s._v(" 属性赋值为 'flex'，可以启用 flex 布局，并可通过 "),a("code",[s._v("justify")]),s._v(" 属性来指定 start, center, end, space-between, space-around 其中的值来定义子元素的排版方式。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"center"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"end"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-between"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"flex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"row-bg"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("justify")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"space-around"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{attrs:{gutter:10}},[a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple"
-})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple-light"})]),a("el-col",{attrs:{xs:4,sm:6,md:8,lg:9}},[a("div",{staticClass:"grid-content bg-purple"})]),a("el-col",{attrs:{xs:8,sm:6,md:4,lg:3}},[a("div",{staticClass:"grid-content bg-purple-light"})])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":gutter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":xs")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":sm")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":md")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":lg")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"grid-content bg-purple-light"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-col")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-dark")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#d3dce6")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".bg-purple-light")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e5e9f2")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".grid-content")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("min-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36px")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(9),s._m(10),s._m(11),s._m(12)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"layout-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#layout-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" Layout 布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-jian-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-jian-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏间隔")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"hun-he-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#hun-he-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 混合布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-lan-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-lan-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分栏偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dui-qi-fang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dui-qi-fang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 对齐方式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",[s._v("flex")]),s._v(" 布局来对分栏进行灵活的对齐。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiang-ying-shi-bu-ju"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiang-ying-shi-bu-ju","aria-hidden":"true"}},[s._v("¶")]),s._v(" 响应式布局")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("参照了 Bootstrap 的 响应式设计，预设了四个响应尺寸："),a("code",[s._v("xs")]),s._v("、"),a("code",[s._v("sm")]),s._v("、"),a("code",[s._v("md")]),s._v("和"),a("code",[s._v("lg")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"row-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#row-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Row Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("gutter")]),a("td",[s._v("栅格间隔")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("布局模式，可选 flex，现代浏览器下有效")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("justify")]),a("td",[s._v("flex 布局下的水平排列方式")]),a("td",[s._v("string")]),a("td",[s._v("start/end/center/space-around/space-between")]),a("td",[s._v("start")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("flex 布局下的垂直排列方式")]),a("td",[s._v("string")]),a("td",[s._v("top/middle/bottom")]),a("td",[s._v("top")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"col-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#col-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Col Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("span")]),a("td",[s._v("栅格占据的列数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("栅格左侧的间隔格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("push")]),a("td",[s._v("栅格向右移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("pull")]),a("td",[s._v("栅格向左移动格数")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("xs")]),a("td",[a("code",[s._v("<768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sm")]),a("td",[a("code",[s._v("≥768px")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("md")]),a("td",[a("code",[s._v("≥992")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lg")]),a("td",[a("code",[s._v("≥1200")]),s._v(" 响应式栅格数或者栅格属性对象")]),a("td",[s._v("number/object (例如： {span: 4, offset: 4})")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(381)},function(s,t,a){a(382);var l=a(13)(a(384),a(385),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],loading:!0,loading2:!0,fullscreenLoading:!1}},methods:{openFullScreen:function(){var s=this;this.fullscreenLoading=!0,setTimeout(function(){s.fullscreenLoading=!1},3e3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("加载数据时显示动效。")]),s._m(1),a("p",[s._v("在表格等容器中加载数据时显示。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading: true\n      };\n    }\n  };\n",style:"\n  body {\n    margin: 0;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading.body",value:s.loading,expression:"loading",modifiers:{body:!0}}],staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("Element 提供了两种调用 Loading 的方法：指令和服务。对于自定义指令"),a("code",[s._v("v-loading")]),s._v("，只需要绑定"),a("code",[s._v("Boolean")]),s._v("即可。默认状况下，Loading 遮罩会插入到绑定元素的子节点，通过添加"),a("code",[s._v("body")]),s._v("修饰符，可以使遮罩插入至 DOM 中的 body 上。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.body")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-tag"},[s._v("body")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可自定义加载文案。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table v-loading="loading2" element-loading-text="拼命加载中" :data="tableData" style="width: 100%">\n    <el-table-column prop="date" label="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        loading2: true\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{directives:[{name:"loading",rawName:"v-loading",value:s.loading2,expression:"loading2"}],staticStyle:{width:"100%"},attrs:{"element-loading-text":"拼命加载中",data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("在绑定了"),a("code",[s._v("v-loading")]),s._v("指令的元素上添加"),a("code",[s._v("element-loading-text")]),s._v("属性，其值会被渲染为加载文案，并显示在加载图标的下方。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("element-loading-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"拼命加载中"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("页面数据加载时显示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="primary" @click="openFullScreen" v-loading.fullscreen.lock="fullscreenLoading">\n    显示整页加载，3 秒后消失\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        fullscreenLoading: false\n      }\n    },\n    methods: {\n      openFullScreen() {\n        this.fullscreenLoading = true;\n        setTimeout(() => {\n          this.fullscreenLoading = false;\n        }, 3000);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("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    显示整页加载，3 秒后消失\n  ")])]],2),a("p",[s._v("当需要全屏遮罩时，可使用"),a("code",[s._v("fullscreen")]),s._v("修饰符（此时遮罩会插入至 body 上）。此时若需要锁定屏幕的滚动，可以使用"),a("code",[s._v("lock")]),s._v("修饰符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"openFullScreen"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-loading.fullscreen.lock")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fullscreenLoading"')]),s._v(">")]),s._v("\n    显示整页加载，3 秒后消失\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreenLoading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      openFullScreen() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fullscreenLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("Loading 还可以以服务的方式调用。引入 Loading 服务：")]),s._m(5),a("p",[s._v("在需要调用时：")]),s._m(6),s._m(7),s._m(8),a("p",[s._v("需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，并不会创建一个新的 Loading 实例，而是返回现有全屏 Loading 的实例：")]),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"loading-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#loading-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Loading 加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qu-yu-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qu-yu-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 区域加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jia-zai-wen-an"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jia-zai-wen-an","aria-hidden":"true"}},[s._v("¶")]),s._v(" 加载文案")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zheng-ye-jia-zai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zheng-ye-jia-zai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 整页加载")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-wu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-wu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 服务")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Loading } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[s._v("Loading.service(options);\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("其中 "),a("code",[s._v("options")]),s._v(" 参数为 Loading 的配置项，具体见下表。"),a("code",[s._v("LoadingService")]),s._v(" 会返回一个 Loading 实例，可通过调用该实例的 "),a("code",[s._v("close")]),s._v(" 方法来关闭它：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance = Loading.service(options);\nloadingInstance.close();\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"
-},[a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance1 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" loadingInstance2 = Loading.service({ "),a("span",{staticClass:"hljs-attr"},[s._v("fullscreen")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(" });\n"),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(loadingInstance1 === loadingInstance2); "),a("span",{staticClass:"hljs-comment"},[s._v("// true")]),s._v("\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用它们中任意一个的 "),a("code",[s._v("close")]),s._v(" 方法都能关闭这个全屏 Loading。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("如果完整引入了 Element，那么 Vue.prototype 上会有一个全局方法 "),a("code",[s._v("$loading")]),s._v("，它的调用方式为："),a("code",[s._v("this.$loading(options)")]),s._v("，同样会返回一个 Loading 实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("target")]),a("td",[s._v("Loading 需要覆盖的 DOM 节点。可传入一个 DOM 对象或字符串；若传入字符串，则会将其作为参数传入 "),a("code",[s._v("document.querySelector")]),s._v("以获取到对应 DOM 节点")]),a("td",[s._v("object/string")]),a("td",[s._v("—")]),a("td",[s._v("document.body")])]),a("tr",[a("td",[s._v("body")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("body")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fullscreen")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("fullscreen")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("lock")]),a("td",[s._v("同 "),a("code",[s._v("v-loading")]),s._v(" 指令中的 "),a("code",[s._v("lock")]),s._v(" 修饰符")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text")]),a("td",[s._v("显示在加载图标下方的加载文案")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("Loading 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(387)},function(s,t,a){a(388);var l=a(13)(a(390),a(391),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{activeIndex:"1",activeIndex2:"1"}},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)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("为网站提供导航功能的菜单。")]),s._m(1),a("p",[s._v("适用广泛的基础用法。")]),a("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">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n  </el-submenu>\n  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</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">处理中心</el-menu-item>\n  <el-submenu index="2">\n    <template slot="title">我的工作台</template>\n    <el-menu-item index="2-1">选项1</el-menu-item>\n    <el-menu-item index="2-2">选项2</el-menu-item>\n    <el-menu-item index="2-3">选项3</el-menu-item>\n  </el-submenu>\n  <el-menu-item index="3"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>\n</el-menu>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeIndex: '1',\n        activeIndex2: '1'\n      };\n    },\n    methods: {\n      handleSelect(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-menu",{staticClass:"el-menu-demo",attrs:{theme:"dark","default-active":s.activeIndex,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1),a("div",{staticClass:"line"}),a("el-menu",{staticClass:"el-menu-demo",attrs:{"default-active":s.activeIndex2,mode:"horizontal"},on:{select:s.handleSelect}},[a("el-menu-item",{attrs:{index:"1"}},[s._v("处理中心")]),a("el-submenu",{attrs:{index:"2"}},[a("template",{slot:"title"},[s._v("我的工作台")]),a("el-menu-item",{attrs:{index:"2-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"2-2"}},[s._v("选项2")]),a("el-menu-item",{attrs:{index:"2-3"}},[s._v("选项3")])],2),a("el-menu-item",{attrs:{index:"3"}},[a("a",{attrs:{href:"https://www.ele.me",target:"_blank"}},[s._v("订单管理")])])],1)],1),a("p",[s._v("导航菜单默认为垂直模式，通过 "),a("code",[s._v("mode")]),s._v(" 属性可以使导航菜单变更为水平模式。另外，在菜单中通过 "),a("code",[s._v("submenu")]),s._v(" 组件可以生成二级菜单。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"line"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeIndex2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"horizontal"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@select")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelect"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("处理中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("我的工作台"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("href")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://www.ele.me"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("target")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"_blank"')]),s._v(">")]),s._v("订单管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("a")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeIndex2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelect(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("垂直菜单，可内嵌子菜单。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-row class="tac">\n  <el-col :span="8">\n    <h5>带 icon</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>导航一</template>\n        <el-menu-item-group>\n          <template slot="title">分组一</template>\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2"><i class="el-icon-menu"></i>导航二</el-menu-item>\n      <el-menu-item index="3"><i class="el-icon-setting"></i>导航三</el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="8">\n    <h5>不带 icon</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">导航一</template>\n        <el-menu-item-group title="分组一">\n          <el-menu-item index="1-1">选项1</el-menu-item>\n          <el-menu-item index="1-2">选项2</el-menu-item>\n        </el-menu-item-group>\n        <el-menu-item-group title="分组2">\n          <el-menu-item index="1-3">选项3</el-menu-item>\n        </el-menu-item-group>\n        <el-submenu index="1-4">\n          <template slot="title">选项4</template>\n          <el-menu-item index="1-4-1">选项1</el-menu-item>\n        </el-submenu>\n      </el-submenu>\n      <el-menu-item index="2">导航二</el-menu-item>\n      <el-menu-item index="3">导航三</el-menu-item>\n    </el-menu>\n  </el-col>\n  <el-col :span="8">\n    <h5>分组</h5>\n    <el-menu mode="vertical" default-active="1" class="el-menu-vertical-demo">\n      <el-menu-item-group title="分组一">\n        <el-menu-item index="1"><i class="el-icon-message"></i>导航一</el-menu-item>\n        <el-menu-item index="2"><i class="el-icon-message"></i>导航二</el-menu-item>\n      </el-menu-item-group>\n      <el-menu-item-group title="分组二">\n        <el-menu-item index="3"><i class="el-icon-message"></i>导航三</el-menu-item>\n        <el-menu-item index="4"><i class="el-icon-message"></i>导航四</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(key, keyPath) {\n        console.log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        console.log(key, keyPath);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-row",{staticClass:"tac"},[a("el-col",{attrs:{span:8}},[a("h5",[s._v("带 icon")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[a("i",{staticClass:"el-icon-message"}),s._v("导航一")]),a("el-menu-item-group",[a("template",{slot:"title"},[s._v("分组一")]),a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],2),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-menu"}),s._v("导航二")]),a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-setting"}),s._v("导航三")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("不带 icon")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{"default-active":"2",theme:"dark"},on:{open:s.handleOpen,close:s.handleClose}},[a("el-submenu",{attrs:{index:"1"}},[a("template",{slot:"title"},[s._v("导航一")]),a("el-menu-item-group",{attrs:{title:"分组一"}},[a("el-menu-item",{attrs:{index:"1-1"}},[s._v("选项1")]),a("el-menu-item",{attrs:{index:"1-2"}},[s._v("选项2")])],1),a("el-menu-item-group",{attrs:{title:"分组2"}},[a("el-menu-item",{attrs:{index:"1-3"}},[s._v("选项3")])],1),a("el-submenu",{attrs:{index:"1-4"}},[a("template",{slot:"title"},[s._v("选项4")]),a("el-menu-item",{attrs:{index:"1-4-1"}},[s._v("选项1")])],2)],2),a("el-menu-item",{attrs:{index:"2"}},[s._v("导航二")]),a("el-menu-item",{attrs:{index:"3"}},[s._v("导航三")])],1)],1),a("el-col",{attrs:{span:8}},[a("h5",[s._v("分组")]),a("el-menu",{staticClass:"el-menu-vertical-demo",attrs:{mode:"vertical","default-active":"1"}},[a("el-menu-item-group",{attrs:{title:"分组一"}},[a("el-menu-item",{attrs:{index:"1"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航一")]),a("el-menu-item",{attrs:{index:"2"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航二")])],1),a("el-menu-item-group",{attrs:{title:"分组二"}},[a("el-menu-item",{attrs:{index:"3"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航三")]),a("el-menu-item",{attrs:{index:"4"}},[a("i",{staticClass:"el-icon-message"}),s._v("导航四")])],1)],1)],1)],1)],1),a("p",[s._v("通过 "),a("code",[s._v("el-menu-item-group")]),s._v(" 组件可以实现菜单进行分组，分组名可以通过 "),a("code",[s._v("title")]),s._v(" 属性直接设定也可以通过具名 slot 来设定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tac"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("带 icon"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("分组一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-menu"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-setting"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("不带 icon"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@open")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleOpen"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("theme")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-2"')]),s._v(">")]),s._v("选项2"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组2"')]),s._v(">")]),s._v("\n          "),a("span",{
-staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-3"')]),s._v(">")]),s._v("选项3"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"title"')]),s._v(">")]),s._v("选项4"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1-4-1"')]),s._v(">")]),s._v("选项1"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-submenu")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":span")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"8"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("分组"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("h5")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("mode")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("default-active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-menu-vertical-demo"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组一"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"分组二"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("index")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"4"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-message"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("导航四"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu-item-group")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-menu")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-col")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-row")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleOpen(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      },\n      handleClose(key, keyPath) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(key, keyPath);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"navmenu-dao-hang-cai-dan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#navmenu-dao-hang-cai-dan","aria-hidden":"true"}},[s._v("¶")]),s._v(" NavMenu 导航菜单")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ding-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ding-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 顶栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ce-lan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ce-lan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 侧栏")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("mode")]),a("td",[s._v("模式")]),a("td",[s._v("string")]),a("td",[s._v("horizontal,vertical")]),a("td",[s._v("vertical")])]),a("tr",[a("td",[s._v("theme")]),a("td",[s._v("主题色")]),a("td",[s._v("string")]),a("td",[s._v("light,dark")]),a("td",[s._v("light")])]),a("tr",[a("td",[s._v("default-active")]),a("td",[s._v("当前激活菜单的 index")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-openeds")]),a("td",[s._v("当前打开的submenu的 key 数组")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("unique-opened")]),a("td",[s._v("是否只保持一个子菜单的展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("menu-trigger")]),a("td",[s._v("子菜单打开的触发方式(只在 mode 为 horizontal 时有效)")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("hover")])]),a("tr",[a("td",[s._v("router")]),a("td",[s._v("是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳转")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("菜单激活回调")]),a("td",[s._v("index: 选中菜单项的 indexPath: 选中菜单项的 index path")])]),a("tr",[a("td",[s._v("open")]),a("td",[s._v("SubMenu 展开的回调")]),a("td",[s._v("index: 打开的 subMenu 的 index， indexPath: 打开的 subMenu 的 index path")])]),a("tr",[a("td",[s._v("close")]),a("td",[s._v("SubMenu 收起的回调")]),a("td",[s._v("index: 收起的 subMenu 的 index， indexPath: 收起的 subMenu 的 index path")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"submenu-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#submenu-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" SubMenu Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-item-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-item-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Item Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("index")]),a("td",[s._v("唯一标志")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("route")]),a("td",[s._v("Vue Router 路径对象")]),a("td",[s._v("Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"menu-group-attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#menu-group-attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Menu-Group Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("分组标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(393)},function(s,t,a){var l=a(13)(a(394),a(395),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={methods:{open:function(){var s=this;this.$alert("这是一段内容","标题名称",{confirmButtonText:"确定",callback:function(t){s.$message({type:"info",message:"action: "+t})}})},open2:function(){var s=this;this.$confirm("此操作将永久删除该文件, 是否继续?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then(function(){setTimeout(function(){s.$message({message:"删除成功!",type:"success"})},200)}).catch(function(){setTimeout(function(){s.$message({message:"已取消删除",type:"info"})},200)})},open3:function(){var s=this;this.$prompt("请输入邮箱","提示",{confirmButtonText:"确定",cancelButtonText:"取消",inputPattern:/[\w!#$%&'*+\/=?^_`{|}~-]+(?:\.[\w!#$%&'*+\/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,inputErrorMessage:"邮箱格式不正确"}).then(function(t){var a=t.value;setTimeout(function(){s.$message({type:"success",message:"你的邮箱是: "+a})},200)}).catch(function(){setTimeout(function(){s.$message({type:"info",message:"取消输入"})},200)})},open4:function(){var s=this;this.$msgbox({title:"消息",message:"这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容",showCancelButton:!0,confirmButtonText:"确定",cancelButtonText:"取消",beforeClose:function(s,t,a){"confirm"===s?(t.confirmButtonLoading=!0,t.confirmButtonText="执行中...",setTimeout(function(){a(),setTimeout(function(){t.confirmButtonLoading=!1},300)},3e3)):a()}}).then(function(t){setTimeout(function(){s.$message({type:"info",message:"action: "+t})},200)})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("模拟系统的消息提示框而实现的一套模态对话框组件，用于消息提示、成功提示、错误提示、询问信息。")]),s._m(1),a("p",[s._v("当用户进行操作时会被触发，该对话框中断用户操作，直到用户确认知晓后才可关闭。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$alert('这是一段内容', '标题名称', {\n          confirmButtonText: '确定',\n          callback: action => {\n            this.$message({\n              type: 'info',\n              message: `action: ${ action }`\n            });\n          }\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$alert")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("alert")]),s._v("，无法通过按下 ESC 或点击框外关闭。此例中接收了两个参数，"),a("code",[s._v("message")]),s._v("和"),a("code",[s._v("title")]),s._v("。值得一提的是，窗口被关闭后，它默认会返回一个"),a("code",[s._v("Promise")]),s._v("对象便于进行后续操作的处理。若不确定浏览器是否支持"),a("code",[s._v("Promise")]),s._v("，可自行引入第三方 polyfill 或像本例一样使用回调进行后续处理。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$alert("),a("span",{staticClass:"hljs-string"},[s._v("'这是一段内容'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("callback")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n              "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("`action: "),a("span",{staticClass:"hljs-subst"},[s._v("${ action }")]),s._v("`")]),s._v("\n            });\n          }\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("提示用户确认其已经触发的动作，并询问是否进行此操作时会用到此对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open2">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open2() {\n        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          type: 'warning'\n        }).then(() => {\n          this.$message({\n            type: 'success',\n            message: '删除成功!'\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '已取消删除'\n          });          \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open2}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$confirm")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("confirm")]),s._v("。Message Box 组件也拥有极高的定制性，我们可以传入"),a("code",[s._v("options")]),s._v("作为第三个参数，它是一个字面量对象。"),a("code",[s._v("type")]),s._v("字段表明消息类型，可以为"),a("code",[s._v("success")]),s._v("，"),a("code",[s._v("error")]),s._v("，"),a("code",[s._v("info")]),s._v("和"),a("code",[s._v("warning")]),s._v("，无效的设置将会被忽略。注意，第二个参数"),a("code",[s._v("title")]),s._v("必须定义为"),a("code",[s._v("String")]),s._v("类型，如果是"),a("code",[s._v("Object")]),s._v("，会被理解为"),a("code",[s._v("options")]),s._v("。在这里我们用了 Promise 来处理后续响应。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$confirm("),a("span",{staticClass:"hljs-string"},[s._v("'此操作将永久删除该文件, 是否继续?'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'删除成功!'")]),s._v("\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'已取消删除'")]),s._v("\n          });          \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当用户进行操作时会被触发，中断用户操作，提示用户进行输入的对话框。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open3">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$prompt('请输入邮箱', '提示', {\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          inputPattern: /[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/,\n          inputErrorMessage: '邮箱格式不正确'\n        }).then(({ value }) => {\n          this.$message({\n            type: 'success',\n            message: '你的邮箱是: ' + value\n          });\n        }).catch(() => {\n          this.$message({\n            type: 'info',\n            message: '取消输入'\n          });       \n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open3}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("调用"),a("code",[s._v("$prompt")]),s._v("方法即可打开消息提示，它模拟了系统的 "),a("code",[s._v("prompt")]),s._v("。可以用"),a("code",[s._v("inputPattern")]),s._v("字段自己规定匹配模式，或者用"),a("code",[s._v("inputValidator")]),s._v("规定校验函数，可以返回"),a("code",[s._v("Boolean")]),s._v("或"),a("code",[s._v("String")]),s._v("，"),a("code",[s._v("Boolean")]),s._v("为"),a("code",[s._v("false")]),s._v("或字符串时均表示校验未通过，"),a("code",[s._v("String")]),s._v("相当于定义了"),a("code",[s._v("inputErrorMessage")]),s._v("字段。此外，可以用"),a("code",[s._v("inputPlaceholder")]),s._v("字段来定义输入框的占位符。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$prompt("),a("span",{staticClass:"hljs-string"},[s._v("'请输入邮箱'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(", {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputPattern")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/[\\w!#$%&'*+/=?^_`{|}~-]+(?:\\.[\\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\\w](?:[\\w-]*[\\w])?\\.)+[\\w](?:[\\w-]*[\\w])?/")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("inputErrorMessage")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'邮箱格式不正确'")]),s._v("\n        }).then("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("{ value }")]),s._v(") =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'你的邮箱是: '")]),s._v(" + value\n          });\n        }).catch("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消输入'")]),s._v("\n          });       \n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可自定义配置不同内容。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button type="text" @click="open4">点击打开 Message Box</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open4() {\n        this.$msgbox({\n          title: '消息',\n          message: '这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容',\n          showCancelButton: true,\n          confirmButtonText: '确定',\n          cancelButtonText: '取消',\n          beforeClose: (action, instance, done) => {\n            if (action === 'confirm') {\n              instance.confirmButtonLoading = true;\n              instance.confirmButtonText = '执行中...';\n              setTimeout(() => {\n                done();\n                setTimeout(() => {\n                  instance.confirmButtonLoading = false;\n                }, 300);\n              }, 3000);\n            } else {\n              done();\n            }\n          }\n        }).then(action => {\n          this.$message({\n            type: 'info',\n            message: 'action: ' + action\n          });\n        });\n      },\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{type:"text"},on:{click:s.open4}},[s._v("点击打开 Message Box")])]],2),a("p",[s._v("以上三个方法都是对"),a("code",[s._v("$msgbox")]),s._v("方法的再包装。本例直接调用"),a("code",[s._v("$msgbox")]),s._v("方法，使用了"),a("code",[s._v("showCancelButton")]),s._v("字段，用于显示取消按钮。另外可使用"),a("code",[s._v("cancelButtonClass")]),s._v("为其添加自定义样式，使用"),a("code",[s._v("cancelButtonText")]),s._v("来自定义按钮文本（Confirm 按钮也具有相同的字段，在文末的字段说明中有完整的字段列表）。此例还使用了"),a("code",[s._v("beforeClose")]),s._v("属性，它的值是一个方法，会在 MessageBox 的实例关闭前被调用，同时暂停实例的关闭。它有三个参数："),a("code",[s._v("action")]),s._v("、实例本身和"),a("code",[s._v("done")]),s._v("方法。使用它能够在关闭前对实例进行一些操作，比如为确定按钮添加"),a("code",[s._v("loading")]),s._v("状态等；此时若需要关闭实例，可以调用"),a("code",[s._v("done")]),s._v("方法（若在"),a("code",[s._v("beforeClose")]),s._v("中没有调用"),a("code",[s._v("done")]),s._v("，则实例不会关闭）。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("点击打开 Message Box"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{
-staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$msgbox({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容, 这是一段内容'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showCancelButton")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("confirmButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'确定'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("cancelButtonText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'取消'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("beforeClose")]),s._v(": "),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("action, instance, done")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'confirm'")]),s._v(") {\n              instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n              instance.confirmButtonText = "),a("span",{staticClass:"hljs-string"},[s._v("'执行中...'")]),s._v(";\n              setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                done();\n                setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n                  instance.confirmButtonLoading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n                }, "),a("span",{staticClass:"hljs-number"},[s._v("300")]),s._v(");\n              }, "),a("span",{staticClass:"hljs-number"},[s._v("3000")]),s._v(");\n            } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n              done();\n            }\n          }\n        }).then("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("action")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'info'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'action: '")]),s._v(" + action\n          });\n        });\n      },\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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),a("p",[s._v("对应于上述四个全局方法的调用方法依次为：MessageBox, MessageBox.alert, MessageBox.confirm 和 MessageBox.prompt。")]),s._m(10),s._m(11)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"messagebox-dan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#messagebox-dan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" MessageBox 弹框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"que-ren-xiao-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#que-ren-xiao-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 确认消息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ti-jiao-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ti-jiao-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 提交内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 Vue.prototype 添加了如下全局方法：$msgbox, $alert, $confirm 和 $prompt。因此在 vue instance 中可以采用本页面中的方式调用 "),a("code",[s._v("MessageBox")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("单独引入 "),a("code",[s._v("MessageBox")]),s._v("：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { MessageBox } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("MessageBox 标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("MessageBox 消息正文内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("消息类型，用于显示图标")]),a("td",[s._v("string")]),a("td",[s._v("success/info/warning/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("MessageBox 的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("callback")]),a("td",[s._v("若不使用 Promise，可以使用此参数指定 MessageBox 关闭后的回调")]),a("td",[s._v("function(action, instance)，action 的值为'confirm'或'cancel', instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("beforeClose")]),a("td",[s._v("MessageBox 关闭前的回调，会暂停实例的关闭")]),a("td",[s._v("function(action, instance, done)，action 的值为'confirm'或'cancel'；instance 为 MessageBox 实例，可以通过它访问实例上的属性和方法；done 用于关闭 MessageBox 实例")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("lockScroll")]),a("td",[s._v("是否在 MessageBox 出现时将 body 滚动锁定")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("showCancelButton")]),a("td",[s._v("是否显示取消按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 confirm 和 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("showConfirmButton")]),a("td",[s._v("是否显示确定按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("cancelButtonText")]),a("td",[s._v("取消按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("取消")])]),a("tr",[a("td",[s._v("confirmButtonText")]),a("td",[s._v("确定按钮的文本内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("确定")])]),a("tr",[a("td",[s._v("cancelButtonClass")]),a("td",[s._v("取消按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("confirmButtonClass")]),a("td",[s._v("确定按钮的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closeOnClickModal")]),a("td",[s._v("是否可通过点击遮罩关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("closeOnPressEscape")]),a("td",[s._v("是否可通过按下 ESC 键关闭 MessageBox")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true（以 alert 方式调用时为 false）")])]),a("tr",[a("td",[s._v("showInput")]),a("td",[s._v("是否显示输入框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false（以 prompt 方式调用时为 true）")])]),a("tr",[a("td",[s._v("inputPlaceholder")]),a("td",[s._v("输入框的占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValue")]),a("td",[s._v("输入框的初始文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputPattern")]),a("td",[s._v("输入框的校验表达式")]),a("td",[s._v("regexp")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputValidator")]),a("td",[s._v("输入框的校验函数。可以返回布尔值或字符串，若返回一个字符串, 则返回结果会被赋值给 inputErrorMessage")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("inputErrorMessage")]),a("td",[s._v("校验未通过时的提示文本")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("输入的数据不合法!")])])])])}]}},function(s,t,a){s.exports=a(397)},function(s,t,a){var l=a(13)(a(398),a(399),null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){this.$message("这是一条消息提示")},open2:function(){this.$message({message:"恭喜你，这是一条成功消息",type:"success"})},open3:function(){this.$message({message:"警告哦，这是一条警告消息",type:"warning"})},open4:function(){this.$message.error("错了哦，这是一条错误消息")},open5:function(){this.$message({showClose:!0,message:"这是一条消息提示"})},open6:function(){this.$message({showClose:!0,message:"恭喜你，这是一条成功消息",type:"success"})},open7:function(){this.$message({showClose:!0,message:"警告哦，这是一条警告消息",type:"warning"})},open8:function(){this.$message({showClose:!0,message:"错了哦，这是一条错误消息",type:"error"})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用于主动操作后的反馈提示。与 Notification 的区别是后者更多用于系统级通知的被动提醒。")]),s._m(1),a("p",[s._v("从顶部出现，3 秒后自动消失。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open">打开消息提示</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("打开消息提示")])]],2),a("p",[s._v("Message 在配置上与 Notification 非常类似，所以部分 options 在此不做详尽解释，文末有 options 列表，可以结合 Notification 的文档理解它们。Element 注册了一个"),a("code",[s._v("$message")]),s._v("方法用于调用，Message 可以接收一个字符串作为参数，它会被显示为正文内容。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("打开消息提示"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用来显示「成功、警告、消息、错误」类的操作反馈。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open2">成功</el-button>\n  <el-button :plain="true" @click="open3">警告</el-button>\n  <el-button :plain="true" @click="open">消息</el-button>\n  <el-button :plain="true" @click="open4">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        this.$message('这是一条消息提示');\n      },\n      open2() {\n        this.$message({\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open3() {\n        this.$message({\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open4() {\n        this.$message.error('错了哦，这是一条错误消息');\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open2}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open3}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open4}},[s._v("错误")])]],2),a("p",[s._v("当需要自定义更多属性时，Message 也可以接收一个对象为参数。比如，设置"),a("code",[s._v("type")]),s._v("字段可以定义不同的状态，默认为"),a("code",[s._v("info")]),s._v("。此时正文内容以"),a("code",[s._v("message")]),s._v("的值传入。同时，我们也为 Message 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open4")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("成功"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("警告"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open"')]),s._v(">")]),s._v("消息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("错误"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message("),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v(");\n      },\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'错了哦，这是一条错误消息'")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以添加关闭按钮。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button :plain="true" @click="open5">消息</el-button>\n  <el-button :plain="true" @click="open6">成功</el-button>\n  <el-button :plain="true" @click="open7">警告</el-button>\n  <el-button :plain="true" @click="open8">错误</el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open5() {\n        this.$message({\n          showClose: true,\n          message: '这是一条消息提示'\n        });\n      },\n\n      open6() {\n        this.$message({\n          showClose: true,\n          message: '恭喜你，这是一条成功消息',\n          type: 'success'\n        });\n      },\n\n      open7() {\n        this.$message({\n          showClose: true,\n          message: '警告哦，这是一条警告消息',\n          type: 'warning'\n        });\n      },\n\n      open8() {\n        this.$message({\n          showClose: true,\n          message: '错了哦，这是一条错误消息',\n          type: 'error'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:!0},on:{click:s.open5}},[s._v("消息")]),a("el-button",{attrs:{plain:!0},on:{click:s.open6}},[s._v("成功")]),a("el-button",{attrs:{plain:!0},on:{click:s.open7}},[s._v("警告")]),a("el-button",{attrs:{plain:!0},on:{click:s.open8}},[s._v("错误")])]],2),a("p",[s._v("默认的 Message 是不可以被人工关闭的，如果需要可手动关闭的 Message，可以使用"),a("code",[s._v("showClose")]),s._v("字段。此外，和 Notification 一样，Message 拥有可控的"),a("code",[s._v("duration")]),s._v("，设置"),a("code",[s._v("0")]),s._v("为不会被自动关闭，默认为 3000 毫秒。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("消息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("成功"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("警告"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":plain")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open8"')]),s._v(">")]),s._v("错误"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息提示'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'恭喜你，这是一条成功消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告哦，这是一条警告消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open8() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("showClose")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'错了哦，这是一条错误消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'error'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"message-xiao-xi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#message-xiao-xi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Message 消息提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"bu-tong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#bu-tong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 不同状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-guan-bi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-guan-bi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可关闭")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 Vue.prototype 添加了全局方法 $message。因此在 vue instance 中可以采用本页面中的方式调用 "),a("code",[s._v("Message")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("单独引入 "),a("code",[s._v("Message")]),s._v("：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Message } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用方法为 "),a("code",[s._v("Message(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",[s._v("Message.success(options)")]),s._v("。\n并且可以调用 "),a("code",[s._v("Message.closeAll()")]),s._v(" 手动关闭所有实例。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("message")]),a("td",[s._v("消息文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("info")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名，会覆盖 "),a("code",[s._v("type")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("3000")])]),a("tr",[a("td",[s._v("showClose")]),a("td",[s._v("是否显示关闭按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数, 参数为被关闭的 message 实例")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",[s._v("Message")]),s._v(" 或 "),a("code",[s._v("this.$message")]),s._v(" 会返回当前 Message 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Message")])])])])}]}},function(s,t,a){s.exports=a(401)},function(s,t,a){var l=a(13)(a(402),a(403),null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={methods:{open:function(){var s=this.$createElement;this.$notify({title:"标题名称",message:s("p",{style:"color: red"},"这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案")})},open2:function(){this.$notify({title:"提示",message:"这是一条不会自动关闭的消息",duration:0})},open3:function(){this.$notify({title:"成功",message:"这是一条成功的提示消息",type:"success"})},open4:function(){this.$notify({title:"警告",message:"这是一条警告的提示消息",type:"warning"})},open5:function(){this.$notify.info({title:"消息",message:"这是一条消息的提示消息"})},open6:function(){this.$notify.error({title:"错误",message:"这是一条错误的提示消息"})},open7:function(){this.$notify.success({title:"成功",message:"这是一条成功的提示消息",offset:100})},onClose:function(){console.log("Notification 已关闭")}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("悬浮出现在页面右上角，显示全局的通知提醒消息。")]),s._m(1),a("p",[s._v("适用性广泛的通知栏")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open">\n    可自动关闭\n  </el-button>\n  <el-button plain @click="open2">\n    不会自动关闭\n    </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open() {\n        const h = this.$createElement;\n\n        this.$notify({\n          title: '标题名称',\n          message: h('p', { style: 'color: red'}, '这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案')\n        });\n      },\n\n      open2() {\n        this.$notify({\n          title: '提示',\n          message: '这是一条不会自动关闭的消息',\n          duration: 0\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open}},[s._v("\n    可自动关闭\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open2}},[s._v("\n    不会自动关闭\n    ")])]],2),a("p",[s._v("Notification 组件提供通知功能，Element 注册了"),a("code",[s._v("$notify")]),s._v("方法，接收一个"),a("code",[s._v("options")]),s._v("字面量参数，在最简单的情况下，你可以设置"),a("code",[s._v("title")]),s._v("字段和"),a("code",[s._v("message")]),s._v("字段，用于设置通知的标题和正文。默认情况下，经过一段时间后 Notification 组件会自动关闭，但是通过设置"),a("code",[s._v("duration")]),s._v("，可以控制关闭的时间间隔，特别的是，如果设置为"),a("code",[s._v("0")]),s._v("，则不会自动关闭。注意："),a("code",[s._v("duration")]),s._v("接收一个"),a("code",[s._v("Number")]),s._v("，单位为毫秒，默认为"),a("code",[s._v("4500")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"
-},[s._v('"open"')]),s._v(">")]),s._v("\n    可自动关闭\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open2"')]),s._v(">")]),s._v("\n    不会自动关闭\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" h = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$createElement;\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标题名称'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": h("),a("span",{staticClass:"hljs-string"},[s._v("'p'")]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'color: red'")]),s._v("}, "),a("span",{staticClass:"hljs-string"},[s._v("'这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案这是提示文案'")]),s._v(")\n        });\n      },\n\n      open2() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'提示'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条不会自动关闭的消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("duration")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("带有 icon，常用来显示「成功、警告、消息、错误」类的系统消息")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open3">\n    成功\n  </el-button>\n  <el-button plain @click="open4">\n    警告\n  </el-button>\n  <el-button plain @click="open5">\n    消息\n  </el-button>\n  <el-button plain @click="open6">\n    错误\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open3() {\n        this.$notify({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          type: 'success'\n        });\n      },\n\n      open4() {\n        this.$notify({\n          title: '警告',\n          message: '这是一条警告的提示消息',\n          type: 'warning'\n        });\n      },\n\n      open5() {\n        this.$notify.info({\n          title: '消息',\n          message: '这是一条消息的提示消息'\n        });\n      },\n\n      open6() {\n        this.$notify.error({\n          title: '错误',\n          message: '这是一条错误的提示消息'\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open3}},[s._v("\n    成功\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open4}},[s._v("\n    警告\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open5}},[s._v("\n    消息\n  ")]),a("el-button",{attrs:{plain:""},on:{click:s.open6}},[s._v("\n    错误\n  ")])]],2),a("p",[s._v("Element 为 Notification 组件准备了四种通知类型："),a("code",[s._v("success")]),s._v(", "),a("code",[s._v("warning")]),s._v(", "),a("code",[s._v("info")]),s._v(", "),a("code",[s._v("error")]),s._v("。通过"),a("code",[s._v("type")]),s._v("字段来设置，除此以外的值将被忽略。同时，我们也为 Notification 的各种 type 注册了方法，可以在不传入"),a("code",[s._v("type")]),s._v("字段的情况下像"),a("code",[s._v("open5")]),s._v("和"),a("code",[s._v("open6")]),s._v("那样直接调用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open3"')]),s._v(">")]),s._v("\n    成功\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open4"')]),s._v(">")]),s._v("\n    警告\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open5"')]),s._v(">")]),s._v("\n    消息\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open6"')]),s._v(">")]),s._v("\n    错误\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open3() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成功'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v("\n        });\n      },\n\n      open4() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'警告'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条警告的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v("\n        });\n      },\n\n      open5() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.info({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条消息的提示消息'")]),s._v("\n        });\n      },\n\n      open6() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.error({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'错误'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条错误的提示消息'")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("让 Notification 偏移一些位置")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-button plain @click="open7">\n    偏移的消息\n  </el-button>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      open7() {\n        this.$notify.success({\n          title: '成功',\n          message: '这是一条成功的提示消息',\n          offset: 100\n        });\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-button",{attrs:{plain:""},on:{click:s.open7}},[s._v("\n    偏移的消息\n  ")])]],2),a("p",[s._v("Notification 提供设置偏移量的功能，通过设置 "),a("code",[s._v("offset")]),s._v(" 字段，可以使弹出的消息距屏幕顶部偏移一段距离。注意在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("plain")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"open7"')]),s._v(">")]),s._v("\n    偏移的消息\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      open7() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$notify.success({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成功'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("message")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'这是一条成功的提示消息'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("offset")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v("\n        });\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),s._m(6),a("p",[s._v("单独引入 Notification：")]),s._m(7),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"notification-tong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#notification-tong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Notification 通知")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-qing-xiang-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-qing-xiang-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有倾向性")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-pian-yi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-pian-yi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有偏移")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"quan-ju-fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#quan-ju-fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 全局方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Element 为 "),a("code",[s._v("Vue.prototype")]),s._v(" 添加了全局方法 "),a("code",[s._v("$notify")]),s._v("。因此在 vue instance 中可以采用本页面中的方式调用 Notification。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-du-yin-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-du-yin-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单独引用")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Notification } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v(";\n")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("此时调用方法为 "),a("code",[s._v("Notification(options)")]),s._v("。我们也为每个 type 定义了各自的方法，如 "),a("code",[s._v("Notification.success(options)")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("message")]),a("td",[s._v("说明文字")]),a("td",[s._v("string/Vue.VNode")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题样式，如果不在可选值内将被忽略")]),a("td",[s._v("string")]),a("td",[s._v("success/warning/info/error")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("iconClass")]),a("td",[s._v("自定义图标的类名。若设置了 "),a("code",[s._v("type")]),s._v("，则 "),a("code",[s._v("iconClass")]),s._v(" 会被覆盖")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("customClass")]),a("td",[s._v("自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("duration")]),a("td",[s._v("显示时间, 毫秒。设为 0 则不会自动关闭")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4500")])]),a("tr",[a("td",[s._v("onClose")]),a("td",[s._v("关闭时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("onClick")]),a("td",[s._v("点击 Notification 时的回调函数")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("偏移的距离，在同一时刻，所有的 Notification 实例应当具有一个相同的偏移量")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("调用 "),a("code",[s._v("Notification")]),s._v(" 或 "),a("code",[s._v("this.$notify")]),s._v(" 会返回当前 Notification 的实例。如果需要手动关闭实例，可以调用它的 "),a("code",[s._v("close")]),s._v(" 方法。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭当前的 Notification")])])])])}]}},function(s,t,a){s.exports=a(405)},function(s,t,a){a(406);var l=a(13)(a(408),a(409),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";t.__esModule=!0;var l=a(71);t.default={methods:{handleSizeChange:function(s){this.currentPage=s,console.log("每页 "+s+" 条")},handleCurrentChange:function(s){console.log("当前页: "+s)}},data:function(){return{currentPage1:5,currentPage2:5,currentPage3:5,currentPage4:4}},mounted:function(){this.$nextTick(function(){var s=document.querySelectorAll(".source"),t=s[0],a=s[s.length-1];(0,l.addClass)(t,"first"),(0,l.addClass)(a,"last")})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当数据量过多时，使用分页分解数据。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">页数较少时的效果</span>\n  <el-pagination layout="prev, pager, next" :total="50">\n  </el-pagination>\n</div>\n<div class="block">\n  <span class="demonstration">大于 7 页时的效果</span>\n  <el-pagination layout="prev, pager, next" :total="1000">\n  </el-pagination>\n</div>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("页数较少时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:50}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("大于 7 页时的效果")]),a("el-pagination",{attrs:{layout:"prev, pager, next",total:1e3}})],1)]),a("p",[s._v("设置"),a("code",[s._v("layout")]),s._v("，表示需要显示的内容，用逗号分隔，布局元素会依次显示。"),a("code",[s._v("prev")]),s._v("表示上一页，"),a("code",[s._v("next")]),s._v("为下一页，"),a("code",[s._v("pager")]),s._v("表示页码列表，除此以外还提供了"),a("code",[s._v("jumper")]),s._v("和"),a("code",[s._v("total")]),s._v("，"),a("code",[s._v("size")]),s._v("和特殊的布局符号"),a("code",[s._v("->")]),s._v("，"),a("code",[s._v("->")]),s._v("后的元素会靠右显示，"),a("code",[s._v("jumper")]),s._v("表示跳页元素，"),a("code",[s._v("total")]),s._v("表示显示页码总数，"),a("code",[s._v("size")]),s._v("用于设置每页显示的页码数量。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("页数较少时的效果"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("大于 7 页时的效果"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("在空间有限的情况下，可以使用简单的小型分页。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-pagination",{attrs:{small:"",layout:"prev, pager, next",total:50}})],1),a("p",[s._v("只需要一个"),a("code",[s._v("small")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("small")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("根据场景需要，可以添加其他功能模块。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">显示总数</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage1" :page-size="100" layout="total, prev, pager, next" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">调整每页显示条数</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="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">直接前往</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage3" :page-size="100" layout="prev, pager, next, jumper" :total="1000">\n    </el-pagination>\n  </div>\n  <div class="block">\n    <span class="demonstration">完整功能</span>\n    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="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(val) {\n        console.log(`每页 ${val} 条`);\n      },\n      handleCurrentChange(val) {\n        this.currentPage = val;\n        console.log(`当前页: ${val}`);\n      }\n    },\n    data() {\n      return {\n        currentPage1: 5,\n        currentPage2: 5,\n        currentPage3: 5,\n        currentPage4: 4\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示总数")]),a("el-pagination",{attrs:{"current-page":s.currentPage1,"page-size":100,layout:"total, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("调整每页显示条数")]),a("el-pagination",{attrs:{"current-page":s.currentPage2,"page-sizes":[100,200,300,400],"page-size":100,layout:"sizes, prev, pager, next",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("直接前往")]),a("el-pagination",{attrs:{"current-page":s.currentPage3,"page-size":100,layout:"prev, pager, next, jumper",total:1e3},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("完整功能")]),a("el-pagination",{attrs:{"current-page":s.currentPage4,"page-sizes":[100,200,300,400],"page-size":100,layout:"total, sizes, prev, pager, next, jumper",total:400},on:{"size-change":s.handleSizeChange,"current-change":s.handleCurrentChange}})],1)]],2),a("p",[s._v("此例是一个完整的用例，使用了"),a("code",[s._v("size-change")]),s._v("和"),a("code",[s._v("current-change")]),s._v("事件来处理页码大小和当前页变动时候触发的事件。"),a("code",[s._v("page-sizes")]),s._v("接受一个整型数组，数组元素为展示的选择每页显示个数的选项，"),a("code",[s._v("[100, 200, 300, 400]")]),s._v("表示四个选项，每页显示 100 个，200 个，300 个或者 400 个。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("显示总数"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage1"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("调整每页显示条数"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"sizes, prev, pager, next"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("直接前往"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1000"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{
-staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("完整功能"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@size-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSizeChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":current-page")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"currentPage4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-sizes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[100, 200, 300, 400]"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":page-size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("layout")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"total, sizes, prev, pager, next, jumper"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":total")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-pagination")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSizeChange(val) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`每页 "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v(" 条`")]),s._v(");\n      },\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentPage = val;\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-string"},[s._v("`当前页: "),a("span",{staticClass:"hljs-subst"},[s._v("${val}")]),s._v("`")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentPage4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"pagination-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pagination-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Pagination 分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xiao-xing-fen-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xiao-xing-fen-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 小型分页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-jia-gong-neng"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-jia-gong-neng","aria-hidden":"true"}},[s._v("¶")]),s._v(" 附加功能")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("small")]),a("td",[s._v("是否使用小型分页样式")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("page-size")]),a("td",[s._v("每页显示条目个数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("10")])]),a("tr",[a("td",[s._v("total")]),a("td",[s._v("总条目数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("page-count")]),a("td",[s._v("总页数，total 和 page-count 设置任意一个就可以达到显示页码的功能；如果要支持 page-sizes 的更改，则需要使用 total 属性")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("current-page")]),a("td",[s._v("当前页数")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("layout")]),a("td",[s._v("组件布局，子组件名用逗号分隔")]),a("td",[s._v("String")]),a("td",[a("code",[s._v("sizes")]),s._v(", "),a("code",[s._v("prev")]),s._v(", "),a("code",[s._v("pager")]),s._v(", "),a("code",[s._v("next")]),s._v(", "),a("code",[s._v("jumper")]),s._v(", "),a("code",[s._v("->")]),s._v(", "),a("code",[s._v("total")]),s._v(", "),a("code",[s._v("slot")])]),a("td",[s._v("'prev, pager, next, jumper, ->, total'")])]),a("tr",[a("td",[s._v("page-sizes")]),a("td",[s._v("每页显示个数选择器的选项设置")]),a("td",[s._v("Number[]")]),a("td",[s._v("—")]),a("td",[s._v("[10, 20, 30, 40, 50, 100]")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("size-change")]),a("td",[s._v("pageSize 改变时会触发")]),a("td",[s._v("每页条数"),a("code",[s._v("size")])])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("currentPage 改变时会触发")]),a("td",[s._v("当前页"),a("code",[s._v("currentPage")])])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("自定义内容，需要在 "),a("code",[s._v("layout")]),s._v(" 中列出 "),a("code",[s._v("slot")])])])])])}]}},function(s,t,a){s.exports=a(411)},function(s,t,a){a(412);var l=a(13)(a(414),a(415),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{visible2:!1,gridData:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],gridData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],gridData3:[{tag:"家",date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-08",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"家",date:"2016-05-06",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{tag:"公司",date:"2016-05-07",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"}],singleSelection:{},multipleSelection:[],model:""}},watch:{singleSelection:function(s){console.log("selection: ",s)},multipleSelection:function(s){console.log("selection: ",s)}},events:{handleClick:function(s){console.log("you clicked ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),s._m(1),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover1" placement="top-start" title="标题" width="200" trigger="hover" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-popover ref="popover2" placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n</el-popover>\n\n<el-button v-popover:popover1>hover 激活</el-button>\n<el-button v-popover:popover2>click 激活</el-button>\n<el-popover placement="right" title="标题" width="200" trigger="focus" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">\n  <el-button slot="reference">focus 激活</el-button>\n</el-popover>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover1",attrs:{placement:"top-start",title:"标题",width:"200",trigger:"hover",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-popover",{ref:"popover2",attrs:{placement:"bottom",title:"标题",width:"200",trigger:"click",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}}),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover1",arg:"popover1"}]},[s._v("hover 激活")]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover2",arg:"popover2"}]},[s._v("click 激活")]),a("el-popover",{attrs:{placement:"right",title:"标题",width:"200",trigger:"focus",content:"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"}},[a("el-button",{slot:"reference"},[s._v("focus 激活")])],1)],1),a("p",[s._v("设置索引"),a("code",[s._v("ref")]),s._v("，在按钮中，我们注册了自定义指令"),a("code",[s._v("v-popover")]),s._v("，指向索引ID。"),a("code",[s._v("trigger")]),s._v("属性用于设置何时触发 Popover ，提供三种触发方式："),a("code",[s._v("hover")]),s._v(", "),a("code",[s._v("click")]),s._v(" 和 "),a("code",[s._v("focus")]),s._v("。第二种用法通过 "),a("code",[s._v("slot")]),s._v(" 指定 reference。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover1")]),s._v(">")]),s._v("hover 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover2")]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标题"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"focus"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段内容,这是一段内容,这是一段内容,这是一段内容。"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(">")]),s._v("focus 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可以在 Popover 中嵌套多种类型信息，以下为嵌套表格的例子。")]),a("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="日期"></el-table-column>\n    <el-table-column width="100" property="name" label="姓名"></el-table-column>\n    <el-table-column width="300" property="address" label="地址"></el-table-column>\n  </el-table>\n</el-popover>\n\n<el-button v-popover:popover4>click 激活</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        gridData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{ref:"popover4",attrs:{placement:"right",width:"400",trigger:"click"}},[a("el-table",{attrs:{data:s.gridData}},[a("el-table-column",{attrs:{width:"150",property:"date",label:"日期"}}),a("el-table-column",{attrs:{width:"100",property:"name",label:"姓名"}}),a("el-table-column",{attrs:{width:"300",property:"address",label:"地址"}})],1)],1),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover4",arg:"popover4"}]},[s._v("click 激活")])],1),a("p",[s._v("利用分发取代"),a("code",[s._v("content")]),s._v("属性")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"400"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"click"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gridData"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover4")]),s._v(">")]),s._v("click 激活"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("gridData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("当然，你还可以嵌套操作，这相比 Dialog 更为轻量：")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-popover ref="popover5" placement="top" width="160" v-model="visible2">\n  <p>这是一段内容这是一段内容确定删除吗？</p>\n  <div style="text-align: right; margin: 0">\n    <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>\n    <el-button type="primary" size="mini" @click="visible2 = false">确定</el-button>\n  </div>\n</el-popover>\n\n<el-button v-popover:popover5>删除</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        visible2: false,\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-popover",{directives:[{name:"model",rawName:"v-model",value:s.visible2,expression:"visible2"}],ref:"popover5",attrs:{placement:"top",width:"160"},domProps:{value:s.visible2},on:{input:function(t){s.visible2=t}}},[a("p",[s._v("这是一段内容这是一段内容确定删除吗？")]),a("div",{staticStyle:{"text-align":"right",margin:"0"}},[a("el-button",{attrs:{size:"mini",type:"text"},on:{click:function(t){s.visible2=!1}}},[s._v("取消")]),a("el-button",{attrs:{type:"primary",size:"mini"},on:{click:function(t){s.visible2=!1}}},[s._v("确定")])],1)]),a("el-button",{directives:[{name:"popover",rawName:"v-popover:popover5",arg:"popover5"}]},[s._v("删除")])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"popover5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"160"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("这是一段内容这是一段内容确定删除吗？"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text-align: right; margin: 0"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("取消"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"visible2 = false"')]),s._v(">")]),s._v("确定"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-popover:popover5")]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("visible2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"popover-dan-chu-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#popover-dan-chu-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Popover 弹出框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Popover 的属性与 Tooltip 很类似，它们都是基于"),a("code",[s._v("Vue-popper")]),s._v("开发的，因此对于重复属性，请参考 Tooltip 的文档，在此文档中不做详尽解释。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-xin-xi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-xin-xi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套信息")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qian-tao-cao-zuo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qian-tao-cao-zuo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 嵌套操作")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("trigger")]),a("td",[s._v("触发方式")]),a("td",[s._v("String")]),a("td",[s._v("click/focus/hover/manual")]),a("td",[s._v("click")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",[s._v("slot")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("宽度")]),a("td",[s._v("String, Number")]),a("td",[s._v("—")]),a("td",[s._v("最小宽度 150px")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Popover 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("fade-in-linear")])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[a("code",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{
-attrs:{id:"slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("—")]),a("td",[s._v("Popover 内嵌 HTML 文本")])]),a("tr",[a("td",[s._v("reference")]),a("td",[s._v("触发 Popover 显示的 HTML 元素")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("show")]),a("td",[s._v("显示时触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("hide")]),a("td",[s._v("隐藏时触发")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(417)},function(s,t,a){a(418);var l=a(13)(null,a(420),null,null);s.exports=l.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示操作进度，告知用户当前状态和预期。")]),s._m(1),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{percentage:0}}),a("el-progress",{attrs:{percentage:70}}),a("el-progress",{attrs:{percentage:100,status:"success"}}),a("el-progress",{attrs:{percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件设置"),a("code",[s._v("percentage")]),s._v("属性即可，表示进度条对应的百分比，"),a("strong",[s._v("必填")]),s._v("，必须在 0-100。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("百分比不占用额外控件，适用于文件上传等场景。")]),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:0}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:70}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:100,status:"success"}}),a("el-progress",{attrs:{"text-inside":!0,"stroke-width":18,percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件可通过 "),a("code",[s._v("stroke-width")]),s._v(" 属性更改进度条的高度，并可通过 "),a("code",[s._v("text-inside")]),s._v(" 属性来将进度条描述置于进度条内部。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"70"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":text-inside")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":stroke-width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"18"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-progress type="circle" :percentage="0"></el-progress>\n<el-progress type="circle" :percentage="25"></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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-progress",{attrs:{type:"circle",percentage:0}}),a("el-progress",{attrs:{type:"circle",percentage:25}}),a("el-progress",{attrs:{type:"circle",percentage:100,status:"success"}}),a("el-progress",{attrs:{type:"circle",percentage:50,status:"exception"}})],1),a("p",[s._v("Progress 组件可通过 "),a("code",[s._v("type")]),s._v(" 属性来指定使用环形进度条，在环形进度条中，还可以通过 "),a("code",[s._v("width")]),s._v(" 属性来设置其大小。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"0"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"25"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"circle"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":percentage")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"exception"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-progress")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"progress-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#progress-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Progress 进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-wai-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-wai-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比外显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xian-xing-jin-du-tiao-bai-fen-bi-nei-xian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xian-xing-jin-du-tiao-bai-fen-bi-nei-xian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 线形进度条 — 百分比内显")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"huan-xing-jin-du-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#huan-xing-jin-du-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 环形进度条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[a("strong",[s._v("percentage")])]),a("td",[a("strong",[s._v("百分比（必填）")])]),a("td",[s._v("number")]),a("td",[s._v("0-100")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("type")]),a("td",[s._v("进度条类型")]),a("td",[s._v("string")]),a("td",[s._v("line/circle")]),a("td",[s._v("line")])]),a("tr",[a("td",[s._v("stroke-width")]),a("td",[s._v("进度条的宽度，单位 px")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("6")])]),a("tr",[a("td",[s._v("text-inside")]),a("td",[s._v("进度条显示文字内置在进度条内（只在 type=line 时可用）")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("进度条当前状态")]),a("td",[s._v("string")]),a("td",[s._v("success/exception")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("环形进度条画布宽度（只在 type=circle 时可用）")]),a("td",[s._v("number")]),a("td"),a("td",[s._v("126")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示进度条文字内容")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(422)},function(s,t,a){var l=a(13)(null,a(423),null,null);s.exports=l.exports},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"kuai-su-shang-shou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kuai-su-shang-shou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 快速上手")]),a("p",[s._v("本节将介绍如何在项目中使用 Element。")]),a("h3",{attrs:{id:"shi-yong-starter-kit"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shi-yong-starter-kit","aria-hidden":"true"}},[s._v("¶")]),s._v(" 使用 Starter Kit")]),a("p",[s._v("我们提供了通用的"),a("a",{attrs:{href:"https://github.com/ElementUI/element-starter"}},[s._v("项目模板")]),s._v("，你可以直接使用。对于熟悉 "),a("a",{attrs:{href:"https://github.com/ElementUI/element-cooking-starter"}},[s._v("cooking")]),s._v(" 或 "),a("a",{attrs:{href:"https://github.com/ElementUI/element-in-laravel-starter"}},[s._v("Laravel")]),s._v(" 的用户，我们也准备了相应的模板，同样可以直接下载使用。")]),a("p",[s._v("如果不希望使用我们提供的模板，请继续阅读。")]),a("h3",{attrs:{id:"pei-zhi-wen-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pei-zhi-wen-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 配置文件")]),a("p",[s._v("新建项目，项目结构为")]),a("pre",[a("code",{staticClass:"hljs language-text"},[s._v("|- src/  --------------------- 项目源代码\n    |- App.vue\n    |- main.js  -------------- 入口文件\n|- .babelrc  ----------------- babel 配置文件\n|- index.html  --------------- HTML 模板\n|- package.json  ------------- npm 配置文件\n|- README.md  ---------------- 项目帮助文档\n|- webpack.config.js  -------- webpack 配置文件\n")])]),a("p",[s._v("几个配置文件的典型配置如下：")]),a("p",[a("strong",[s._v(".babelrc")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ]\n}\n")])]),a("br"),a("p",[a("strong",[s._v("package.json")])]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"name"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-starter"')]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"scripts"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"dev"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=development webpack-dev-server --inline --hot --port 8086"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"build"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"cross-env NODE_ENV=production webpack --progress --hide-modules"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"dependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"element-ui"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^2.1.6"')]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"devDependencies"')]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-core"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.0.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"babel-preset-es2015"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^6.13.2"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"cross-env"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^1.0.6"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"css-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.23.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"file-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.8.5"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"style-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^0.13.1"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"vue-loader"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"^9.8.0"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v('"webpack-dev-server"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"beta"')]),s._v("\n  }\n}\n")])]),a("br"),a("p",[a("strong",[s._v("webpack.config.js")])]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" path = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'path'")]),s._v(")\n"),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" webpack = "),a("span",{staticClass:"hljs-built_in"},[s._v("require")]),s._v("("),a("span",{staticClass:"hljs-string"},[s._v("'webpack'")]),s._v(")\n\n"),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports = {\n  "),a("span",{staticClass:"hljs-attr"},[s._v("entry")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'./src/main.js'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("output")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("path")]),s._v(": path.resolve(__dirname, "),a("span",{staticClass:"hljs-string"},[s._v("'./dist'")]),s._v("),\n    "),a("span",{staticClass:"hljs-attr"},[s._v("publicPath")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'/dist/'")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filename")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'build.js'")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("module")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("loaders")]),s._v(": [\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.vue$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'vue-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.js$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'babel-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("exclude")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/node_modules/")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.css$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'style-loader!css-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(eot|svg|ttf|woff|woff2)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v("\n      },\n      {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("test")]),s._v(": "),a("span",{staticClass:"hljs-regexp"},[s._v("/\\.(png|jpe?g|gif|svg)(\\?\\S*)?$/")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loader")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'file-loader'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("query")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'[name].[ext]?[hash]'")]),s._v("\n        }\n      }\n    ]\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devServer")]),s._v(": {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("historyApiFallback")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n    "),a("span",{staticClass:"hljs-attr"},[s._v("noInfo")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n  },\n  "),a("span",{staticClass:"hljs-attr"},[s._v("devtool")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#eval-source-map'")]),s._v("\n}\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (process.env.NODE_ENV === "),a("span",{staticClass:"hljs-string"},[s._v("'production'")]),s._v(") {\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.devtool = "),a("span",{staticClass:"hljs-string"},[s._v("'#source-map'")]),s._v("\n  "),a("span",{staticClass:"hljs-comment"},[s._v("// http://vue-loader.vuejs.org/en/workflow/production.html")]),s._v("\n  "),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins = ("),a("span",{staticClass:"hljs-built_in"},[s._v("module")]),s._v(".exports.plugins || []).concat([\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.DefinePlugin({\n      "),a("span",{staticClass:"hljs-string"},[s._v("'process.env'")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("NODE_ENV")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'\"production\"'")]),s._v("\n      }\n    }),\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" webpack.optimize.UglifyJsPlugin({\n      "),a("span",{staticClass:"hljs-attr"},[s._v("compress")]),s._v(": {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("warnings")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      }\n    })\n  ])\n}\n")])]),a("h3",{attrs:{id:"yin-ru-element"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yin-ru-element","aria-hidden":"true"}},[s._v("¶")]),s._v(" 引入 Element")]),a("p",[s._v("你可以引入整个 Element，或是根据需要仅引入部分组件。我们先介绍如何引入完整的 Element。")]),a("h4",{attrs:{id:"wan-zheng-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#wan-zheng-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 完整引入")]),a("p",[s._v("在 main.js 中写入以下内容：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" ElementUI "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui/lib/theme-default/index.css'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.use(ElementUI)\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("以上代码便完成了 Element 的引入。需要注意的是，样式文件需要单独引入。")]),a("h4",{attrs:{id:"an-xu-yin-ru"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-xu-yin-ru","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按需引入")]),a("p",[s._v("借助 "),a("a",{attrs:{href:"https://github.com/QingWei-Li/babel-plugin-component"}},[s._v("babel-plugin-component")]),s._v("，我们可以只引入需要的组件，以达到减小项目体积的目的。")]),a("p",[s._v("首先，安装 babel-plugin-component：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm install babel-plugin-component -D\n")])]),a("p",[s._v("然后，将 .babelrc 修改为：")]),a("pre",[a("code",{staticClass:"hljs language-json"},[s._v("{\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"presets"')]),s._v(": [\n    ["),a("span",{staticClass:"hljs-string"},[s._v('"es2015"')]),s._v(", { "),a("span",{staticClass:"hljs-attr"},[s._v('"modules"')]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(" }]\n  ],\n  "),a("span",{staticClass:"hljs-attr"},[s._v('"plugins"')]),s._v(": [["),a("span",{staticClass:"hljs-string"},[s._v('"component"')]),s._v(", [\n    {\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"libraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"element-ui"')]),s._v(",\n      "),a("span",{staticClass:"hljs-attr"},[s._v('"styleLibraryName"')]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v('"theme-default"')]),s._v("\n    }\n  ]]]\n}\n")])]),a("p",[s._v("接下来，如果你只希望引入部分组件，比如 Button 和 Select，那么需要在 main.js 中写入以下内容：")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" { Button, Select } "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-ui'")]),s._v("\n"),a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" App "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'./App.vue'")]),s._v("\n\nVue.component(Button.name, Button)\nVue.component(Select.name, Select)\n"),a("span",{staticClass:"hljs-comment"},[s._v("/* 或写为\n * Vue.use(Button)\n * Vue.use(Select)\n */")]),s._v("\n\n"),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" Vue({\n  "),a("span",{staticClass:"hljs-attr"},[s._v("el")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'#app'")]),s._v(",\n  "),a("span",{staticClass:"hljs-attr"},[s._v("render")]),s._v(": "),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("h")]),s._v(" =>")]),s._v(" h(App)\n})\n")])]),a("p",[s._v("完整组件列表和引入方式（完整组件列表以 "),a("a",{attrs:{href:"https://github.com/ElemeFE/element/blob/dev/components.json"}},[s._v("components.json")]),s._v(" 为准）")]),a("pre",[a("code",{staticClass:"hljs language-javascript"},[a("span",{staticClass:"hljs-keyword"},[s._v("import")]),s._v(" Vue "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'vue'")]),s._v("\n"),a("span",{staticClass:"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} "),a("span",{staticClass:"hljs-keyword"},[s._v("from")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'element-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")])]),a("h3",{attrs:{id:"kai-shi-shi-yong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#kai-shi-shi-yong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 开始使用")]),a("p",[s._v("至此，一个基于 Vue 和 Element 的开发环境已经搭建完毕，现在就可以编写代码了。启动开发模式：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[a("span",{staticClass:"hljs-comment"},[s._v("# 执行如下命令后访问 localhost:8086")]),s._v("\nnpm run dev\n")])]),a("p",[s._v("编译：")]),a("pre",[a("code",{staticClass:"hljs language-bash"},[s._v("npm run build\n")])]),a("p",[s._v("各个组件的使用方法请参阅它们各自的文档。")])])}]}},function(s,t,a){s.exports=a(425)},function(s,t,a){var l=a(13)(a(426),a(427),null,null);s.exports=l.exports},function(s,t){"use strict";s.exports={data:function(){return{radio:"1",radio1:"选中且禁用",radio2:3,radio3:"上海",radio4:"上海",radio5:"上海"}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("在一组备选项中进行单选")]),s._m(1),a("p",[s._v("由于选项默认可见，不宜过多，若选项过多，建议使用 Select 选择器。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio class="radio" v-model="radio" label="1">备选项</el-radio>\n  <el-radio class="radio" v-model="radio" label="2">备选项</el-radio>\n</template>\n\n\n',
-script:"\n  export default {\n    data () {\n      return {\n        radio: '1'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"1"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},[s._v("备选项")]),a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio,expression:"radio"}],staticClass:"radio",attrs:{label:"2"},domProps:{value:s.radio},on:{input:function(t){s.radio=t}}},[s._v("备选项")])]],2),a("p",[s._v("要使用 Radio 组件，只需要设置"),a("code",[s._v("v-model")]),s._v("绑定变量，选中意味着变量的值为相应 Radio "),a("code",[s._v("label")]),s._v("属性的值，"),a("code",[s._v("label")]),s._v("可以是"),a("code",[s._v("String")]),s._v("或者"),a("code",[s._v("Number")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"2"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("单选框不可用的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio disabled v-model="radio1" label="禁用">备选项</el-radio>\n  <el-radio disabled v-model="radio1" label="选中且禁用">备选项</el-radio>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio1: '选中且禁用'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"禁用"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},[s._v("备选项")]),a("el-radio",{directives:[{name:"model",rawName:"v-model",value:s.radio1,expression:"radio1"}],attrs:{disabled:"",label:"选中且禁用"},domProps:{value:s.radio1},on:{input:function(t){s.radio1=t}}},[s._v("备选项")])]],2),a("p",[s._v("注意：请牢记，选中的条件是绑定的变量值等于"),a("code",[s._v("label")]),s._v("中的值。只要在"),a("code",[s._v("el-radio")]),s._v("元素中设置"),a("code",[s._v("disabled")]),s._v("属性即可，它接受一个"),a("code",[s._v("Boolean")]),s._v("，"),a("code",[s._v("true")]),s._v("为禁用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选中且禁用"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选中且禁用'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("适用于在多个互斥的选项中选择的场景")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio-group v-model="radio2">\n    <el-radio :label="3">备选项</el-radio>\n    <el-radio :label="6">备选项</el-radio>\n    <el-radio :label="9">备选项</el-radio>\n  </el-radio-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio2: 3\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio2,expression:"radio2"}],domProps:{value:s.radio2},on:{input:function(t){s.radio2=t}}},[a("el-radio",{attrs:{label:3}},[s._v("备选项")]),a("el-radio",{attrs:{label:6}},[s._v("备选项")]),a("el-radio",{attrs:{label:9}},[s._v("备选项")])],1)]],2),a("p",[s._v("结合"),a("code",[s._v("el-radio-group")]),s._v("元素和子元素"),a("code",[s._v("el-radio")]),s._v("可以实现单选组，在"),a("code",[s._v("el-radio-group")]),s._v("中绑定"),a("code",[s._v("v-model")]),s._v("，在"),a("code",[s._v("el-radio")]),s._v("中设置好"),a("code",[s._v("label")]),s._v("即可，无需再给每一个"),a("code",[s._v("el-radio")]),s._v("绑定变量，另外，还提供了"),a("code",[s._v("change")]),s._v("事件来响应变化，它会传入一个参数"),a("code",[s._v("value")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio2"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"3"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"6"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"9"')]),s._v(">")]),s._v("备选项"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("按钮样式的单选组合。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-radio-group v-model="radio3">\n    <el-radio-button label="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></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="上海"></el-radio-button>\n    <el-radio-button label="北京" :disabled="true"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></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="上海"></el-radio-button>\n    <el-radio-button label="北京"></el-radio-button>\n    <el-radio-button label="广州"></el-radio-button>\n    <el-radio-button label="深圳"></el-radio-button>\n  </el-radio-group>\n</template>\n\n\n',script:"\n  export default {\n    data () {\n      return {\n        radio3: '上海',\n        radio4: '上海',\n        radio5: '上海'\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio3,expression:"radio3"}],domProps:{value:s.radio3},on:{input:function(t){s.radio3=t}}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio4,expression:"radio4"}],domProps:{value:s.radio4},on:{input:function(t){s.radio4=t}}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京",disabled:!0}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1),a("div",{staticStyle:{margin:"15px 0"}}),a("el-radio-group",{directives:[{name:"model",rawName:"v-model",value:s.radio5,expression:"radio5"}],attrs:{disabled:!0},domProps:{value:s.radio5},on:{input:function(t){s.radio5=t}}},[a("el-radio-button",{attrs:{label:"上海"}}),a("el-radio-button",{attrs:{label:"北京"}}),a("el-radio-button",{attrs:{label:"广州"}}),a("el-radio-button",{attrs:{label:"深圳"}})],1)]],2),a("p",[s._v("只需要把"),a("code",[s._v("el-radio")]),s._v("元素换成"),a("code",[s._v("el-radio-button")]),s._v("元素即可，此外，Element 还提供了"),a("code",[s._v("size")]),s._v("属性给按钮组，支持"),a("code",[s._v("large")]),s._v("和"),a("code",[s._v("small")]),s._v("两种（如果不设定为默认）。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio3"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio4"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin: 15px 0;"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"radio5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"上海"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"北京"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"广州"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"深圳"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-radio-group")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data () {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("radio5")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"radio-dan-xuan-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-dan-xuan-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio 单选框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan-kuang-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan-kuang-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选框组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"an-niu-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#an-niu-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 按钮样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string,number,boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("原生 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("size")]),a("td",[s._v("Radio 按钮组尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fill")]),a("td",[s._v("按钮激活时的填充色和边框色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20a0ff")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("按钮激活时的文本颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#ffffff")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-group-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-group-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-group Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("绑定值变化时触发的事件")]),a("td",[s._v("选中的 Radio label 值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"radio-button-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#radio-button-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Radio-button Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("Radio 的 value")]),a("td",[s._v("string,number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(429)},function(s,t,a){a(430);var l=a(13)(a(432),a(433),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:null,value2:null,value3:null,value4:null,value5:3.7}},mounted:function(){this.$nextTick(function(){var s=document.querySelector(".source");s.style.padding="0"})}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("评分组件")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<div class="block">\n  <span class="demonstration">默认不区分颜色</span>\n  <el-rate v-model="value1"></el-rate>\n</div>\n<div class="block">\n  <span class="demonstration">区分颜色</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() {\n      return {\n        value1: null,\n        value2: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认不区分颜色")]),a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("区分颜色")]),a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{colors:["#99A9BF","#F7BA2A","#FF9900"]},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)]),a("p",[s._v("评分被分为三个等级，可以利用颜色对分数及情感倾向进行分级（默认情况下不区分颜色）。三个等级所对应的颜色用过"),a("code",[s._v("colors")]),s._v("属性设置，而它们对应的两个阈值则通过 "),a("code",[s._v("low-threshold")]),s._v(" 和 "),a("code",[s._v("high-threshold")]),s._v(" 设定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认不区分颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("区分颜色"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("用辅助文字直接地表达对应分数")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value3" show-text>\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"show-text":""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("show-text")]),s._v(" 属性会在右侧显示辅助文字。通过设置 "),a("code",[s._v("texts")]),s._v(" 可以为每一个分值指定对应的辅助文字。"),a("code",[s._v("texts")]),s._v(" 为一个数组，长度应等于最大值 "),a("code",[s._v("max")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{
-staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("当有多层评价时，可以用不同类型的 icon 区分评分层级")]),a("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() {\n      return {\n        value4: null\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],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"]},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1),a("p",[s._v("设置"),a("code",[s._v("icon-classes")]),s._v("属性可以自定义对应 3 个不同分段的图标。本例还使用"),a("code",[s._v("void-icon-class")]),s._v("指定了未选中时的图标类名。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":icon-classes")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['icon-rate-face-1', 'icon-rate-face-2', 'icon-rate-face-3']\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("void-icon-class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"icon-rate-face-off"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":colors")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"['#99A9BF', '#F7BA2A', '#FF9900']\"")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("只读的评分用来展示分数，允许出现半星")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-rate v-model="value5" disabled show-text text-color="#ff9900" text-template="{value}">\n</el-rate>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value5: 3.7\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-rate",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{disabled:"","show-text":"","text-color":"#ff9900","text-template":"{value}"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})],1),a("p",[s._v("为组件设置 "),a("code",[s._v("disabled")]),s._v(" 属性表示组件为只读，支持小数分值。此时若设置 "),a("code",[s._v("show-text")]),s._v("，则会在右侧显示目前的分值。可以提供 "),a("code",[s._v("text-template")]),s._v(" 作为显示模板，模板为一个包含了 "),a("code",[s._v("{value}")]),s._v(" 的字符串，"),a("code",[s._v("{value}")]),s._v(" 会被解析为分值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-text")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#ff9900"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("text-template")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"{value}"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-rate")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3.7")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"rate-ping-fen"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#rate-ping-fen","aria-hidden":"true"}},[s._v("¶")]),s._v(" Rate 评分")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fu-zhu-wen-zi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fu-zhu-wen-zi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 辅助文字")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qi-ta-icon"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qi-ta-icon","aria-hidden":"true"}},[s._v("¶")]),s._v(" 其它 icon")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhi-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhi-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 只读")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大分值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("5")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否为只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-half")]),a("td",[s._v("是否允许半选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("low-threshold")]),a("td",[s._v("低分和中等分数的界限值，值本身被划分在低分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("2")])]),a("tr",[a("td",[s._v("high-threshold")]),a("td",[s._v("高分和中等分数的界限值，值本身被划分在高分中")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("4")])]),a("tr",[a("td",[s._v("colors")]),a("td",[s._v("icon 的颜色数组，共有 3 个元素，为 3 个分段所对应的颜色")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['#F7BA2A', '#F7BA2A', '#F7BA2A']")])]),a("tr",[a("td",[s._v("void-color")]),a("td",[s._v("未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C6D1DE")])]),a("tr",[a("td",[s._v("disabled-void-color")]),a("td",[s._v("只读时未选中 icon 的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#EFF2F7")])]),a("tr",[a("td",[s._v("icon-classes")]),a("td",[s._v("icon 的类名数组，共有 3 个元素，为 3 个分段所对应的类名")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['el-icon-star-on', 'el-icon-star-on','el-icon-star-on']")])]),a("tr",[a("td",[s._v("void-icon-class")]),a("td",[s._v("未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-off")])]),a("tr",[a("td",[s._v("disabled-void-icon-class")]),a("td",[s._v("只读时未选中 icon 的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("el-icon-star-on")])]),a("tr",[a("td",[s._v("show-text")]),a("td",[s._v("是否显示辅助文字")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("text-color")]),a("td",[s._v("辅助文字的颜色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#1F2D3D")])]),a("tr",[a("td",[s._v("texts")]),a("td",[s._v("辅助文字数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("['极差', '失望', '一般', '满意', '惊喜']")])]),a("tr",[a("td",[s._v("text-template")]),a("td",[s._v("只读时的辅助文字模板")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("{value}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("分值改变时触发")]),a("td",[s._v("改变后的分值")])])])])}]}},function(s,t,a){s.exports=a(435)},function(s,t,a){a(436);var l=a(13)(a(438),a(439),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{list:null,options:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶"},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options2:[{value:"选项1",label:"黄金糕"},{value:"选项2",label:"双皮奶",disabled:!0},{value:"选项3",label:"蚵仔煎"},{value:"选项4",label:"龙须面"},{value:"选项5",label:"北京烤鸭"}],options3:[{label:"热门城市",options:[{value:"Shanghai",label:"上海"},{value:"Beijing",label:"北京"}]},{label:"城市名",options:[{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"},{value:"Dalian",label:"大连"}]}],options4:[],options5:[{value:"HTML",label:"HTML"},{value:"CSS",label:"CSS"},{value:"JavaScript",label:"JavaScript"}],cities:[{value:"Beijing",label:"北京"},{value:"Shanghai",label:"上海"},{value:"Nanjing",label:"南京"},{value:"Chengdu",label:"成都"},{value:"Shenzhen",label:"深圳"},{value:"Guangzhou",label:"广州"}],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(s){var t=this;""!==s?(this.loading=!0,setTimeout(function(){t.loading=!1,t.options4=t.list.filter(function(t){return t.label.toLowerCase().indexOf(s.toLowerCase())>-1})},200)):this.options4=[]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("当选项过多时，使用下拉菜单展示并选择内容。")]),s._m(1),a("p",[s._v("适用广泛的基础单选")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value" placeholder="请选择">\n    <el-option v-for="item in options" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value,expression:"value"}],attrs:{placeholder:"请选择"},domProps:{value:s.value},on:{input:function(t){s.value=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[a("code",[s._v("v-model")]),s._v("的值为当前被选中的"),a("code",[s._v("el-option")]),s._v("的 value 属性值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value2" placeholder="请选择">\n    <el-option v-for="item in options2" :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() {\n      return {\n        options2: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶',\n          disabled: true\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value2: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{placeholder:"请选择"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}},s._l(s.options2,function(s){return a("el-option",{attrs:{label:s.label,value:s.value,disabled:s.disabled}})}))]],2),a("p",[s._v("在"),a("code",[s._v("el-option")]),s._v("中，设定"),a("code",[s._v("disabled")]),s._v("值为 true，即可禁用该选项")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options2"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.disabled"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("选择器不可用状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value3" disabled placeholder="请选择">\n    <el-option v-for="item in options" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n  \n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value3: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:"",placeholder:"请选择"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，则整个选择器不可用")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  \n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("包含清空按钮，可将选择器清空为初始状态")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value4" clearable placeholder="请选择">\n    <el-option v-for="item in options" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value4: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{clearable:"",placeholder:"请选择"},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("clearable")]),s._v("属性，则可将选择器清空。需要注意的是，"),a("code",[s._v("clearable")]),s._v("属性仅适用于单选。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("clearable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{
-staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("适用性较广的基础多选，用 Tag 展示已选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value5" multiple placeholder="请选择">\n    <el-option v-for="item in options" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value5: []\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{multiple:"",placeholder:"请选择"},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("设置"),a("code",[s._v("multiple")]),s._v("属性即可启用多选，此时"),a("code",[s._v("v-model")]),s._v("的值为当前选中值所组成的数组")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("可以自定义备选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value6" placeholder="请选择">\n    <el-option v-for="item in cities" :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() {\n      return {\n        cities: [{\n          value: 'Beijing',\n          label: '北京'\n        }, {\n          value: 'Shanghai',\n          label: '上海'\n        }, {\n          value: 'Nanjing',\n          label: '南京'\n        }, {\n          value: 'Chengdu',\n          label: '成都'\n        }, {\n          value: 'Shenzhen',\n          label: '深圳'\n        }, {\n          value: 'Guangzhou',\n          label: '广州'\n        }],\n        value6: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{placeholder:"请选择"},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}},s._l(s.cities,function(t){return a("el-option",{attrs:{label:t.label,value:t.value}},[a("span",{staticStyle:{float:"left"}},[s._v(s._s(t.label))]),a("span",{staticStyle:{float:"right",color:"#8492a6","font-size":"13px"}},[s._v(s._s(t.value))])])}))]],2),a("p",[s._v("将自定义的 HTML 模板插入"),a("code",[s._v("el-option")]),s._v("的 slot 中即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in cities"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: left"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.label "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; color: #8492a6; font-size: 13px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" item.value "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("cities")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Nanjing'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'南京'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("备选项进行分组展示")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value7" placeholder="请选择">\n    <el-option-group v-for="group in options3" :label="group.label">\n      <el-option v-for="item in group.options" :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() {\n      return {\n        options3: [{\n          label: '热门城市',\n          options: [{\n            value: 'Shanghai',\n            label: '上海'\n          }, {\n            value: 'Beijing',\n            label: '北京'\n          }]\n        }, {\n          label: '城市名',\n          options: [{\n            value: 'Chengdu',\n            label: '成都'\n          }, {\n            value: 'Shenzhen',\n            label: '深圳'\n          }, {\n            value: 'Guangzhou',\n            label: '广州'\n          }, {\n            value: 'Dalian',\n            label: '大连'\n          }]\n        }],\n        value7: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{placeholder:"请选择"},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}},s._l(s.options3,function(t){return a("el-option-group",{attrs:{label:t.label}},s._l(t.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))}))]],2),a("p",[s._v("使用"),a("code",[s._v("el-option-group")]),s._v("对备选项进行分组，它的"),a("code",[s._v("label")]),s._v("属性为分组名")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group in options3"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"group.label"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in group.options"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option-group")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'热门城市'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shanghai'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Beijing'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'城市名'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Chengdu'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'成都'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Shenzhen'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'深圳'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Guangzhou'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'广州'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Dalian'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'大连'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("可以利用搜索功能快速查找选项")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value8" filterable placeholder="请选择">\n    <el-option v-for="item in options" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        options: [{\n          value: '选项1',\n          label: '黄金糕'\n        }, {\n          value: '选项2',\n          label: '双皮奶'\n        }, {\n          value: '选项3',\n          label: '蚵仔煎'\n        }, {\n          value: '选项4',\n          label: '龙须面'\n        }, {\n          value: '选项5',\n          label: '北京烤鸭'\n        }],\n        value8: ''\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value8,expression:"value8"}],attrs:{filterable:"",placeholder:"请选择"},domProps:{value:s.value8},on:{input:function(t){s.value8=t}}},s._l(s.options,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为"),a("code",[s._v("el-select")]),s._v("添加"),a("code",[s._v("filterable")]),s._v("属性即可启用搜索功能。默认情况下，Select 会找出所有"),a("code",[s._v("label")]),s._v("属性包含输入值的选项。如果希望使用其他的搜索逻辑，可以通过传入一个"),a("code",[s._v("filter-method")]),s._v("来实现。"),a("code",[s._v("filter-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'黄金糕'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'双皮奶'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'蚵仔煎'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项4'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'龙须面'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'选项5'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'北京烤鸭'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("从服务器搜索数据，输入关键字进行查找")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value9" multiple filterable="" remote placeholder="请输入关键词" :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() {\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() {\n      this.list = this.states.map(item => {\n        return { value: item, label: item };\n      });\n    },\n    methods: {\n      remoteMethod(query) {\n        if (query !== \'\') {\n          this.loading = true;\n          setTimeout(() => {\n            this.loading = false;\n            this.options4 = this.list.filter(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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value9,expression:"value9"}],attrs:{multiple:"",filterable:"",remote:"",placeholder:"请输入关键词","remote-method":s.remoteMethod,loading:s.loading},domProps:{value:s.value9},on:{input:function(t){s.value9=t}}},s._l(s.options4,function(s){return a("el-option",{key:s.value,attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("为了启用远程搜索，需要将"),a("code",[s._v("filterable")]),s._v("和"),a("code",[s._v("remote")]),s._v("设置为"),a("code",[s._v("true")]),s._v("，同时传入一个"),a("code",[s._v("remote-method")]),s._v("。"),a("code",[s._v("remote-method")]),s._v("为一个"),a("code",[s._v("Function")]),s._v("，它会在输入值发生变化时调用，参数为当前输入值。需要注意的是，如果"),a("code",[s._v("el-option")]),s._v("是通过"),a("code",[s._v("v-for")]),s._v("指令渲染出来的，此时需要为"),a("code",[s._v("el-option")]),s._v("添加"),a("code",[s._v("key")]),s._v("属性，且其值需具有唯一性，比如此例中的"),a("code",[s._v("item.value")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("remote")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请输入关键词"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":remote-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"remoteMethod"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":loading")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loading"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options4"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options4")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("list")]),s._v(": [],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("loading")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("states")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v('"Alabama"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Alaska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Arizona"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Arkansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"California"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Colorado"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Connecticut"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Delaware"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Florida"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Georgia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Hawaii"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Idaho"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Illinois"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Indiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Iowa"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kansas"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Kentucky"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Louisiana"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maine"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Maryland"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Massachusetts"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Michigan"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Minnesota"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Mississippi"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Missouri"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Montana"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Nebraska"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Nevada"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New Hampshire"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"New Jersey"')]),s._v(", "),a("span",{staticClass:"hljs-string"
-},[s._v('"New Mexico"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"New York"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"North Carolina"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"North Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Ohio"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Oklahoma"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Oregon"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Pennsylvania"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Rhode Island"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"South Carolina"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"South Dakota"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Tennessee"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Texas"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Utah"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Vermont"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Virginia"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Washington"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"West Virginia"')]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v('"Wisconsin"')]),s._v(",\n        "),a("span",{staticClass:"hljs-string"},[s._v('"Wyoming"')]),s._v("]\n      }\n    },\n    mounted() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".states.map("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" { "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": item, "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": item };\n      });\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      remoteMethod(query) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (query !== "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n          setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".loading = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".list.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("item")]),s._v(" =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" item.label.toLowerCase()\n                .indexOf(query.toLowerCase()) > "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n            });\n          }, "),a("span",{staticClass:"hljs-number"},[s._v("200")]),s._v(");\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".options4 = [];\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("可以创建并选中选项中不存在的条目")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-select v-model="value10" multiple filterable="" allow-create placeholder="请选择文章标签">\n    <el-option v-for="item in options5" :label="item.label" :value="item.value">\n    </el-option>\n  </el-select>\n</template>\n\n\n',script:"\n  export default {\n    data() {\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",slot:"source"},[[a("el-select",{directives:[{name:"model",rawName:"v-model",value:s.value10,expression:"value10"}],attrs:{multiple:"",filterable:"","allow-create":"",placeholder:"请选择文章标签"},domProps:{value:s.value10},on:{input:function(t){s.value10=t}}},s._l(s.options5,function(s){return a("el-option",{attrs:{label:s.label,value:s.value}})}))]],2),a("p",[s._v("使用"),a("code",[s._v("allow-create")]),s._v("属性即可通过在输入框中输入文字来创建新的条目。注意此时"),a("code",[s._v("filterable")]),s._v("必须为真。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value10"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("filterable")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("allow-create")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"请选择文章标签"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item in options5"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.label"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":value")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.value"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-option")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("options5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'HTML'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'CSS'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("value")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'JavaScript'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value10")]),s._v(": []\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16),s._m(17),s._m(18)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"select-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select 选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-jin-yong-xuan-xiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-jin-yong-xuan-xiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有禁用选项")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-qing-kong-dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-qing-kong-dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可清空单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fen-zu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fen-zu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 分组")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yuan-cheng-sou-suo"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yuan-cheng-sou-suo","aria-hidden":"true"}},[s._v("¶")]),s._v(" 远程搜索")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chuang-jian-tiao-mu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chuang-jian-tiao-mu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 创建条目")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("是否多选")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large/small/mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("单选时是否可以清空选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("multiple-limit")]),a("td",[s._v("多选时用户最多可以选择的项目数，为 0 则不限制")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("select input 的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位符")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("请选择")])]),a("tr",[a("td",[s._v("filterable")]),a("td",[s._v("是否可搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("allow-create")]),a("td",[s._v("是否允许用户创建新条目，需配合 "),a("code",[s._v("filterable")]),s._v(" 使用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("自定义过滤方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("remote")]),a("td",[s._v("是否为远程搜索")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("remote-method")]),a("td",[s._v("远程搜索方法")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("loading")]),a("td",[s._v("是否正在从远程获取数据")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("loading-text")]),a("td",[s._v("远程加载时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("加载中")])]),a("tr",[a("td",[s._v("no-match-text")]),a("td",[s._v("搜索条件无匹配时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无匹配数据")])]),a("tr",[a("td",[s._v("no-data-text")]),a("td",[s._v("选项为空时显示的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("无数据")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("Select 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"select-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#select-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Select Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("选中值发生变化时触发")]),a("td",[s._v("目前的选中值")])]),a("tr",[a("td",[s._v("visible-change")]),a("td",[s._v("下拉框出现/隐藏时触发")]),a("td",[s._v("出现则为 true，隐藏则为 false")])]),a("tr",[a("td",[s._v("remove-tag")]),a("td",[s._v("多选模式下移除tag时触发")]),a("td",[s._v("移除的tag值")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-group-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-group-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Group Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("分组的组名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否将该分组下所有选项置为禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"option-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#option-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Option Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("value")]),a("td",[s._v("选项的值")]),a("td",[s._v("string/number/object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项的标签，若不设置则默认与 "),a("code",[s._v("value")]),s._v(" 相同")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用该选项")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(441)},function(s,t,a){a(442);var l=a(13)(a(444),a(445),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:0,value2:50,value3:36,value4:48,value5:42,value6:0,value7:0,value8:0,value9:[4,8]}},methods:{formatTooltip:function(s){return s/100}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过拖动滑块在一个固定区间内进行选择")]),s._m(1),a("p",[s._v("在拖动滑块时，显示当前值")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">默认</span>\n    <el-slider v-model="value1"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">自定义初始值</span>\n    <el-slider v-model="value2"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">隐藏 Tooltip</span>\n    <el-slider v-model="value3" :show-tooltip="false"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">格式化 Tooltip</span>\n    <el-slider v-model="value4" :format-tooltip="formatTooltip"></el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">禁用</span>\n    <el-slider v-model="value5" disabled></el-slider>\n  </div>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value1: 0,\n        value2: 50,\n        value3: 36,\n        value4: 48,\n        value5: 42\n      }\n    },\n    methods: {\n      formatTooltip(val) {\n        return val / 100;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("默认")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("自定义初始值")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("隐藏 Tooltip")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"show-tooltip":!1},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("格式化 Tooltip")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value4,expression:"value4"}],attrs:{"format-tooltip":s.formatTooltip},domProps:{value:s.value4},on:{input:function(t){s.value4=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("禁用")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value5,expression:"value5"}],attrs:{disabled:""},domProps:{value:s.value5},on:{input:function(t){s.value5=t}}})],1)]],2),a("p",[s._v("通过设置绑定值自定义滑块的初始值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("默认"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("自定义初始值"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("隐藏 Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":show-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("格式化 Tooltip"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value4"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":format-tooltip")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatTooltip"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("禁用"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value5"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("36")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value4")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("48")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value5")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("42")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatTooltip(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" val / "),a("span",{staticClass:"hljs-number"},[s._v("100")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项可以是离散的")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <div class="block">\n    <span class="demonstration">不显示间断点</span>\n    <el-slider v-model="value6" :step="10">\n    </el-slider>\n  </div>\n  <div class="block">\n    <span class="demonstration">显示间断点</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}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("不显示间断点")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value6,expression:"value6"}],attrs:{step:10},domProps:{value:s.value6},on:{input:function(t){s.value6=t}}})],1),a("div",{staticClass:"block"},[a("span",{staticClass:"demonstration"},[s._v("显示间断点")]),a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value7,expression:"value7"}],attrs:{step:10,"show-stops":""},domProps:{value:s.value7},on:{input:function(t){s.value7=t}}})],1)]],2),a("p",[s._v("改变"),a("code",[s._v("step")]),s._v("的值可以改变步长，通过设置"),a("code",[s._v("show-step")]),s._v("属性可以显示间断点")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("不显示间断点"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value6"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demonstration"')]),s._v(">")]),s._v("显示间断点"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value7"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":step")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value6")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value7")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("通过输入框设置精确数值")]),a("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() {\n      return {\n        value8: 0\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value8,expression:"value8"}],attrs:{"show-input":""},domProps:{value:s.value8},on:{input:function(t){s.value8=t}}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("show-input")]),s._v("属性会在右侧显示一个输入框")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value8"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-input")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value8")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("支持选择某一数值范围")]),a("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() {\n      return {\n        value9: [4, 8]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("div",{staticClass:"block"},[a("el-slider",{directives:[{name:"model",rawName:"v-model",value:s.value9,expression:"value9"}],attrs:{range:"","show-stops":"",max:10},domProps:{value:s.value9},on:{input:function(t){s.value9=t}}})],1)]],2),a("p",[s._v("设置"),a("code",[s._v("range")]),s._v("即可开启范围选择，此时绑定值是一个数组，其元素分别为最小边界值和最大边界值")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"block"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value9"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("range")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-stops")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":max")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"10"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-slider")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value9")]),s._v(": ["),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v("]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"slider-hua-kuai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#slider-hua-kuai","aria-hidden":"true"}},[s._v("¶")]),s._v(" Slider 滑块")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"chi-san-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#chi-san-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 离散值")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-you-shu-ru-kuang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-you-shu-ru-kuang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带有输入框")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fan-wei-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fan-wei-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 范围选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("min")]),a("td",[s._v("最小值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("max")]),a("td",[s._v("最大值")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("100")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("步长")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("1")])]),a("tr",[a("td",[s._v("show-input")]),a("td",[s._v("是否显示输入框，仅在非范围选择时有效")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-input-controls")]),a("td",[s._v("在显示输入框的情况下，是否显示输入框的控制按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-stops")]),a("td",[s._v("是否显示间断点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-tooltip")]),a("td",[s._v("是否显示 tooltip")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("format-tooltip")]),a("td",[s._v("格式化 tooltip message")]),a("td",[s._v("Function(value)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("range")]),a("td",[s._v("是否为范围选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("值改变时触发（使用鼠标拖曳时，只在松开鼠标后触发）")]),a("td",[s._v("改变后的值")])])])])}]}},function(s,t,a){s.exports=a(447)},function(s,t,a){var l=a(13)(a(448),a(449),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{active:0}},methods:{next:function(){this.active++>2&&(this.active=0)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("引导用户按照流程完成任务的分步导航条，可根据实际应用场景设定步骤，步骤不得少于 2 步。")]),s._m(1),a("p",[s._v("简单的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="active" finish-status="success">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n\n<el-button style="margin-top: 12px;" @click="next">下一步</el-button>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        active: 0\n      };\n    },\n\n    methods: {\n      next() {\n        if (this.active++ > 2) this.active = 0;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:s.active,"finish-status":"success"}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1),a("el-button",{staticStyle:{"margin-top":"12px"},on:{click:s.next}},[s._v("下一步")])],1),a("p",[s._v("设置"),a("code",[s._v("active")]),s._v("属性，接受一个"),a("code",[s._v("Number")]),s._v("，表明步骤的 index，从 0 开始。需要定宽的步骤条时，设置"),a("code",[s._v("space")]),s._v("属性即可，它接受"),a("code",[s._v("Boolean")]),s._v("，单位为"),a("code",[s._v("px")]),s._v("，如果不设置，则为自适应。设置"),a("code",[s._v("finish-status")]),s._v("属性可以改变已经完成的步骤的状态。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"active"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-top: 12px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"next"')]),s._v(">")]),s._v("下一步"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("active")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v("\n      };\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      next() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" ("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active++ > "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".active = "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("每一步骤显示出该步骤的状态。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1" finish-status="success">\n  <el-step title="已完成"></el-step>\n  <el-step title="进行中"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1,"finish-status":"success"}},[a("el-step",{attrs:{title:"已完成"}}),a("el-step",{attrs:{title:"进行中"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("p",[s._v("也可以使用"),a("code",[s._v("title")]),s._v("具名分发，可以用"),a("code",[s._v("slot")]),s._v("的方式来取代属性的设置，在本文档最后的列表中有所有的 slot name 可供参考。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("finish-status")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"已完成"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"进行中"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("每个步骤有其对应的步骤状态描述。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="200" :active="1">\n  <el-step title="步骤 1" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 2" description="这是一段很长很长很长的描述性文字"></el-step>\n  <el-step title="步骤 3" description="这是一段很长很长很长的描述性文字"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:200,active:1}},[a("el-step",{attrs:{title:"步骤 1",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 2",description:"这是一段很长很长很长的描述性文字"}}),a("el-step",{attrs:{title:"步骤 3",description:"这是一段很长很长很长的描述性文字"}})],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"200"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("description")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"这是一段很长很长很长的描述性文字"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("步骤条内可以启用各种自定义的图标。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" :active="1">\n  <el-step title="步骤 1" icon="edit"></el-step>\n  <el-step title="步骤 2" icon="upload"></el-step>\n  <el-step title="步骤 3" icon="picture"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,active:1}},[a("el-step",{attrs:{title:"步骤 1",icon:"edit"}}),a("el-step",{attrs:{title:"步骤 2",icon:"upload"}}),a("el-step",{attrs:{title:"步骤 3",icon:"picture"}})],1)],1),a("p",[s._v("通过"),a("code",[s._v("icon")]),s._v("属性来设置图标，图标的类型可以参考 Icon 组件的文档，除此以外，还能通过具名"),a("code",[s._v("slot")]),s._v("来使用自定义的图标。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"edit"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("icon")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("竖直方向的步骤条。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-steps :space="100" direction="vertical" :active="1">\n  <el-step title="步骤 1"></el-step>\n  <el-step title="步骤 2"></el-step>\n  <el-step title="步骤 3"></el-step>\n</el-steps>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-steps",{attrs:{space:100,direction:"vertical",active:1}},[a("el-step",{attrs:{title:"步骤 1"}}),a("el-step",{attrs:{title:"步骤 2"}}),a("el-step",{attrs:{title:"步骤 3"}})],1)],1),a("p",[s._v("只需要在"),a("code",[s._v("el-steps")]),s._v("元素中设置"),a("code",[s._v("direction")]),s._v("属性为"),a("code",[s._v("vertical")]),s._v("即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-steps")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":space")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("direction")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"vertical"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":active")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"1"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 1"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 2"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"步骤 3"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-step")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"steps-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps 步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"han-zhuang-tai-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#han-zhuang-tai-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 含状态步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"you-miao-shu-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#you-miao-shu-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 有描述的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-tu-biao-de-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-tu-biao-de-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带图标的步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-shi-bu-zou-tiao"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-shi-bu-zou-tiao","aria-hidden":"true"}},[s._v("¶")]),s._v(" 竖式步骤条")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"steps-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#steps-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Steps Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("space")]),a("td",[s._v("每个 step 的间距，不填写将自适应间距。支持百分比。")]),a("td",[s._v("Number,String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("direction")]),a("td",[s._v("显示方向")]),a("td",[s._v("string")]),a("td",[s._v("vertical/horizontal")]),a("td",[s._v("horizontal")])]),a("tr",[a("td",[s._v("active")]),a("td",[s._v("设置当前激活步骤")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("process-status")]),a("td",[s._v("设置当前步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("process")])]),a("tr",[a("td",[s._v("finish-status")]),a("td",[s._v("设置结束步骤的状态")]),a("td",[s._v("string")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("finish")])]),a("tr",[a("td",[s._v("align-center")]),a("td",[s._v("标题描述居中对齐")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("center")]),a("td",[s._v("组件居中显示")]),a("td",[s._v("boolean")]),a("td",[s._v("-")]),a("td",[s._v("false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")]),a("td",[s._v("Element Icon 提供的图标，如果要使用自定义图标可以通过 slot 方式写入")]),a("td",[s._v("string")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("status")]),a("td",[s._v("设置当前步骤的状态，不设置则根据 steps 确定状态")]),a("td",[s._v("wait/process/finish/error/success")]),a("td",[s._v("-")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"step-slot"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#step-slot","aria-hidden":"true"}},[s._v("¶")]),s._v(" Step Slot")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("name")]),a("th",[s._v("说明")])])]),a("tbody",[a("tr",[a("td",[s._v("icon")]),a("td",[s._v("图标")])]),a("tr",[a("td",[s._v("title")]),a("td",[s._v("标题")])]),a("tr",[a("td",[s._v("description")]),a("td",[s._v("描述性文字")])])])])}]}},function(s,t,a){s.exports=a(451)},function(s,t,a){a(452);var l=a(13)(a(454),a(455),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{value1:!0,value2:!0,value3:!0}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("表示两种相互对立的状态间的切换，多用于触发「开/关」。")]),s._m(1),a("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() {\n      return {\n        value1: true,\n        value2: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"on-text":"","off-text":""},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}}),a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"on-color":"#13ce66","off-color":"#ff4949"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1),a("p",[s._v("绑定"),a("code",[s._v("v-model")]),s._v("到一个"),a("code",[s._v("Boolean")]),s._v("类型的变量。可以使用"),a("code",[s._v("on-text")]),s._v("属性与"),a("code",[s._v("off-text")]),s._v("属性来设置开关的文字描述，使用"),a("code",[s._v("on-color")]),s._v("属性与"),a("code",[s._v("off-color")]),s._v("属性来设置开关的背景色。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-color")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"#13ce66"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-color")]),s._v("="),a("span",{
-staticClass:"hljs-string"},[s._v('"#ff4949"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-switch v-model="value3" on-text="" off-text disabled>\n</el-switch>\n<el-switch v-model="value3" disabled>\n</el-switch>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: true\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"on-text":"","off-text":"",disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}}),a("el-switch",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{disabled:""},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})],1),a("p",[s._v("设置"),a("code",[s._v("disabled")]),s._v("属性，接受一个"),a("code",[s._v("Boolean")]),s._v("，设置"),a("code",[s._v("true")]),s._v("即可禁用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("on-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("off-text")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("disabled")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-switch")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v("\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),s._m(5),s._m(6)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"switch-kai-guan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#switch-kai-guan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Switch 开关")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-ben-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-ben-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基本用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jin-yong-zhuang-tai"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jin-yong-zhuang-tai","aria-hidden":"true"}},[s._v("¶")]),s._v(" 禁用状态")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("switch 的宽度（像素）")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("58（有文字）/ 46（无文字）")])]),a("tr",[a("td",[s._v("on-icon-class")]),a("td",[s._v("switch 打开时所显示图标的类名，设置此项会忽略 "),a("code",[s._v("on-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("off-icon-class")]),a("td",[s._v("switch 关闭时所显示图标的类名，设置此项会忽略 "),a("code",[s._v("off-text")])]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-text")]),a("td",[s._v("switch 打开时的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("ON")])]),a("tr",[a("td",[s._v("off-text")]),a("td",[s._v("switch 关闭时的文字")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("OFF")])]),a("tr",[a("td",[s._v("on-color")]),a("td",[s._v("switch 打开时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#20A0FF")])]),a("tr",[a("td",[s._v("off-color")]),a("td",[s._v("switch 关闭时的背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("#C0CCDA")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("switch 对应的 name 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("switch 状态发生变化时的回调函数")]),a("td",[s._v("新状态的布尔值")])])])])}]}},function(s,t,a){s.exports=a(457)},function(s,t,a){a(458);var l=a(13)(a(460),a(461),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tableData:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"家"},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333,tag:"公司"}],tableData2:[{date:"2016-05-02",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-04",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$info:!0},{date:"2016-05-01",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄"},{date:"2016-05-03",name:"王小虎",address:"上海市普陀区金沙江路 1518 弄",$positive:!0}],tableData3:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",detailAddress:"金沙江路 1518 弄",zip:200333}],tableData4:[{date:"2016-05-03",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-02",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-04",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-01",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-08",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-06",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333},{date:"2016-05-07",name:"王小虎",province:"上海",city:"普陀区",address:"上海市普陀区金沙江路 1518 弄",zip:200333}],tableData5:[{id:"12987122",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987123",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987125",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"},{id:"12987126",name:"好滋好味鸡蛋仔",category:"江浙小吃、小吃零食",desc:"荷兰优质淡奶，奶香浓而不腻",address:"上海市普陀区真北路",shop:"王小虎夫妻店",shopId:"10333"}],currentRow:null,multipleSelection:[]}},methods:{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)}},watch:{multipleSelection:function(s){console.log("selection: ",s)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于展示多条结构类似的数据，可对数据进行排序、筛选、对比或其他自定义操作。")]),s._m(1),a("p",[s._v("基础的表格展示用法。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'  <template>\n    <el-table :data="tableData" style="width: 100%">\n      <el-table-column prop="date" label="日期" width="180">\n      </el-table-column>\n      <el-table-column prop="name" label="姓名" width="180">\n      </el-table-column>\n      <el-table-column prop="address" label="地址">\n      </el-table-column>\n    </el-table>\n  </template>\n\n  \n',script:"\n    export default {\n      data() {\n        return {\n          tableData: [{\n            date: '2016-05-02',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1518 弄'\n          }, {\n            date: '2016-05-04',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1517 弄'\n          }, {\n            date: '2016-05-01',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1519 弄'\n          }, {\n            date: '2016-05-03',\n            name: '王小虎',\n            address: '上海市普陀区金沙江路 1516 弄'\n          }]\n        }\n      }\n    }\n  ",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("当"),a("code",[s._v("el-table")]),s._v("元素中注入"),a("code",[s._v("data")]),s._v("对象数组后，在"),a("code",[s._v("el-table-column")]),s._v("中用"),a("code",[s._v("prop")]),s._v("属性来对应对象中的键名即可填入数据，用"),a("code",[s._v("label")]),s._v("属性来定义表格的列名。可以使用"),a("code",[s._v("width")]),s._v("属性来定义列宽。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[s._v("  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n    "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n      data() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n          }]\n        }\n      }\n    }\n  ")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("使用带斑马纹的表格，可以更容易区分出不同行的数据。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,stripe:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[a("code",[s._v("stripe")]),s._v("属性可以创建带斑马纹的表格。它接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即为启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("stripe")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("默认情况下，Table 组件是不具有竖直方向的边框的，如果需要，可以使用"),a("code",[s._v("border")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可启用。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可将表格内容 highlight 显示，方便区分「成功、信息、警告、危险」等内容。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    methods: {\n      tableRowClassName(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() {\n      return {\n        tableData2: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\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"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData2,"row-class-name":s.tableRowClassName}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("可以通过指定 Table 组件的 "),a("code",[s._v("row-class-name")]),s._v(" 属性来为 Table 中的某一行添加 class，表明该行处于某种状态。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":row-class-name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableRowClassName"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".info-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#c9e5f5")]),s._v(";\n  }\n\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-table")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".positive-row")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("background")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#e2f0e4")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      tableRowClassName(row, index) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'info-row'")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (index === "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("'positive-row'")]),s._v(";\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("纵向内容过多时，可选择固定表头。")]),a("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="日期" width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,height:"250",border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址"}})],1)]],2),a("p",[s._v("只要在"),a("code",[s._v("el-table")]),s._v("元素中定义了"),a("code",[s._v("height")]),s._v("属性，即可实现固定表头的表格，而不需要额外的代码。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("横向内容过多时，可选择固定列。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="操作" width="100">\n      <template scope="scope">\n        <el-button @click="handleClick" type="text" size="small">查看</el-button>\n        <el-button type="text" size="small">编辑</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    methods: {\n      handleClick() {\n        console.log(1);\n      }\n    },\n\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"100"},scopedSlots:{default:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},on:{click:s.handleClick}},[s._v("查看")]),a("el-button",{attrs:{type:"text",size:"small"}},[s._v("编辑")])]}}})],1)]],2),a("p",[s._v("固定列需要使用"),a("code",[s._v("fixed")]),s._v("属性，它接受 Boolean 值或者"),a("code",[s._v("left")]),a("code",[s._v("right")]),s._v("，表示左边固定还是右边固定。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("查看"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("编辑"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("横纵内容过多时，可选择固定列和表头。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",
-style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"",height:"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)]],2),a("p",[s._v("固定列和表头可以同时使用，只需要将上述两个属性分别设置好即可。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),a("p",[s._v("当数据量动态变化时，可以为 Table 设置一个最大高度。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="province" label="省份" width="120">\n    </el-table-column>\n    <el-table-column prop="city" label="市区" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" width="300">\n    </el-table-column>\n    <el-table-column prop="zip" label="邮编" width="120">\n    </el-table-column>\n    <el-table-column fixed="right" label="操作" width="120">\n      <template scope="scope">\n        <el-button @click.native.prevent="deleteRow(scope.$index, tableData4)" type="text" size="small">\n          移除\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(index, rows) {\n        rows.splice(index, 1);\n      }\n    },\n    data() {\n      return {\n        tableData4: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData4,border:"","max-height":"250"}},[a("el-table-column",{attrs:{fixed:"",prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}}),a("el-table-column",{attrs:{fixed:"right",label:"操作",width:"120"},scopedSlots:{default:function(t){return[a("el-button",{attrs:{type:"text",size:"small"},nativeOn:{click:function(a){a.preventDefault(),s.deleteRow(t.$index,s.tableData4)}}},[s._v("\n          移除\n        ")])]}}})],1)]],2),a("p",[s._v("通过设置"),a("code",[s._v("max-height")]),s._v("属性为 Table 指定最大高度。此时若表格所需的高度大于最大高度，则会显示一个滚动条。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData4"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("max-height")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"250"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("fixed")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click.native.prevent")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"deleteRow(scope.$index, tableData4)"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"text"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(">")]),s._v("\n          移除\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      deleteRow(index, rows) {\n        rows.splice(index, "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      }\n    },\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData4")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("p",[s._v("数据结构比较复杂的时候，可使用多级表头来展现数据的层次关系。")]),a("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="日期" width="150">\n    </el-table-column>\n    <el-table-column label="配送信息">\n      <el-table-column prop="name" label="姓名" width="120">\n      </el-table-column>\n      <el-table-column label="地址">\n        <el-table-column prop="province" label="省份" width="120">\n        </el-table-column>\n        <el-table-column prop="city" label="市区" width="120">\n        </el-table-column>\n        <el-table-column prop="address" label="地址" width="300">\n        </el-table-column>\n        <el-table-column prop="zip" label="邮编" 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() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          province: '上海',\n          city: '普陀区',\n          address: '上海市普陀区金沙江路 1518 弄',\n          zip: 200333\n        }]\n      }\n    }\n  }\n",
-style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",width:"150"}}),a("el-table-column",{attrs:{label:"配送信息"}},[a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{label:"地址"}},[a("el-table-column",{attrs:{prop:"province",label:"省份",width:"120"}}),a("el-table-column",{attrs:{prop:"city",label:"市区",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",width:"300"}}),a("el-table-column",{attrs:{prop:"zip",label:"邮编",width:"120"}})],1)],1)],1)]],2),a("p",[s._v("只需要在 el-table-column 里面嵌套 el-table-column，就可以实现多级表头。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"150"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配送信息"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n        "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"province"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"省份"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"city"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"市区"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"300"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"zip"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"邮编"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("province")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("city")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'普陀区'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("zip")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("200333")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("p",[s._v("选择单行数据时使用色块表示。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :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="日期" width="120">\n    </el-table-column>\n    <el-table-column property="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column property="address" label="地址">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }],\n        currentRow: null\n      }\n    },\n\n    methods: {\n      handleCurrentChange(val) {\n        this.currentRow = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,"highlight-current-row":""},on:{"current-change":s.handleCurrentChange}},[a("el-table-column",{attrs:{type:"index",width:"50"}}),a("el-table-column",{attrs:{property:"date",label:"日期",width:"120"}}),a("el-table-column",{attrs:{property:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{property:"address",label:"地址"}})],1)]],2),a("p",[s._v("Table 组件提供了单选的支持，只需要配置"),a("code",[s._v("highlight-current-row")]),s._v("属性即可实现单选。之后由"),a("code",[s._v("current-change")]),s._v("事件来管理选中时触发的事件，它会传入"),a("code",[s._v("currentRow")]),s._v("，"),a("code",[s._v("oldCurrentRow")]),s._v("。如果需要显示索引，可以增加一列"),a("code",[s._v("el-table-column")]),s._v("，设置"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("index")]),s._v("即可显示从 1 开始的索引号。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current-row")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@current-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCurrentChange"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"index"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"50"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("property")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("currentRow")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("null")]),s._v("\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCurrentChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".currentRow = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),a("p",[s._v("选择多行数据时使用 Checkbox。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData3" border tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">\n    <el-table-column type="selection" width="55">\n    </el-table-column>\n    <el-table-column label="日期" width="120">\n      <template scope="scope">{{ scope.row.date }}</template>\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="120">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" show-overflow-tooltip>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData3: [{\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-08',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-06',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-07',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }],\n        multipleSelection: []\n      }\n    },\n\n    methods: {\n      handleSelectionChange(val) {\n        this.multipleSelection = val;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData3,border:"","tooltip-effect":"dark"},on:{"selection-change":s.handleSelectionChange}},[a("el-table-column",{attrs:{type:"selection",width:"55"}}),a("el-table-column",{attrs:{label:"日期",width:"120"},scopedSlots:{default:function(t){return[s._v(s._s(t.row.date))]}}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"120"}}),a("el-table-column",{attrs:{prop:"address",label:"地址","show-overflow-tooltip":""}})],1)]],2),a("p",[s._v("实现多选非常简单: 手动添加一个"),a("code",[s._v("el-table-column")]),s._v("，设"),a("code",[s._v("type")]),s._v("属性为"),a("code",[s._v("selection")]),s._v("即可；默认情况下若内容过多会折行显示，若需要单行显示可以使用"),a("code",[s._v("show-overflow-tooltip")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，为"),a("code",[s._v("true")]),s._v("时多余的内容会在 hover 时以 tooltip 的形式显示出来。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("tooltip-effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@selection-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleSelectionChange"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"selection"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"55"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"120"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("show-overflow-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-08'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-06'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-07'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("multipleSelection")]),s._v(": []\n      }\n    },\n\n    "),a("span",{
-staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleSelectionChange(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".multipleSelection = val;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(12),a("p",[s._v("对表格进行排序，可快速查找或对比数据。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%" :default-sort="{prop: \'date\', order: \'descending\'}">\n    <el-table-column prop="date" label="日期" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" :formatter="formatter">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:"","default-sort":{prop:"date",order:"descending"}}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}})],1)]],2),a("p",[s._v("可以通过表的"),a("code",[s._v("default-sort")]),s._v("属性设置默认的排序列和排序顺序。在列中设置"),a("code",[s._v("sortable")]),s._v("属性即可实现以该列为基准的排序，接受一个"),a("code",[s._v("Boolean")]),s._v("，默认为"),a("code",[s._v("false")]),s._v("。在本例中，我们还使用了"),a("code",[s._v("formatter")]),s._v("属性，它用于格式化指定列的值，接受一个"),a("code",[s._v("Function")]),s._v("，会传入两个参数："),a("code",[s._v("row")]),s._v("和"),a("code",[s._v("column")]),s._v("，可以根据自己的需求进行处理。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":default-sort")]),s._v(" = "),a("span",{staticClass:"hljs-string"},[s._v("\"{prop: 'date', order: 'descending'}\"")]),s._v("\n    >")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(13),a("p",[s._v("对表格进行筛选，可快速查找到自己想看的数据。")]),a("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="日期" sortable width="180">\n    </el-table-column>\n    <el-table-column prop="name" label="姓名" width="180">\n    </el-table-column>\n    <el-table-column prop="address" label="地址" :formatter="formatter">\n    </el-table-column>\n    <el-table-column prop="tag" label="标签" width="100" :filters="[{ text: \'家\', value: \'家\' }, { text: \'公司\', value: \'公司\' }]" :filter-method="filterTag">\n      <template scope="scope">\n        <el-tag :type="scope.row.tag === \'家\' ? \'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() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄',\n          tag: '公司'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄',\n          tag: '家'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄',\n          tag: '公司'\n        }]\n      }\n    },\n    methods: {\n      formatter(row, column) {\n        return row.address;\n      },\n      filterTag(value, row) {\n        return row.tag === value;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{prop:"date",label:"日期",sortable:"",width:"180"}}),a("el-table-column",{attrs:{prop:"name",label:"姓名",width:"180"}}),a("el-table-column",{attrs:{prop:"address",label:"地址",formatter:s.formatter}}),a("el-table-column",{attrs:{prop:"tag",label:"标签",width:"100",filters:[{text:"家",value:"家"},{text:"公司",value:"公司"}],"filter-method":s.filterTag},scopedSlots:{default:function(t){return[a("el-tag",{attrs:{type:"家"===t.row.tag?"primary":"success","close-transition":""}},[s._v(s._s(t.row.tag))])]}}})],1)]],2),a("p",[s._v("在列中设置"),a("code",[s._v("filters")]),a("code",[s._v("filter-method")]),s._v("属性即可开启该列的筛选，filters 是一个数组，"),a("code",[s._v("filter-method")]),s._v("是一个方法，它用于决定某些数据是否显示，会传入两个参数："),a("code",[s._v("value")]),s._v("和"),a("code",[s._v("row")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"date"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("sortable")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"address"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"地址"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":formatter")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"formatter"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"标签"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filters")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"[{ text: '家', value: '家' }, { text: '公司', value: '公司' }]\"")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterTag"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"scope.row.tag === '家' ? 'primary' : 'success'\"")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("close-transition")]),s._v(">")]),a("span",[s._v("{{")]),s._v("scope.row.tag"),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'家'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'公司'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'家'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("tag")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'公司'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      formatter(row, column) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.address;\n      },\n      filterTag(value, row) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" row.tag === value;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(14),a("p",[s._v("自定义列的显示内容，可组合其他组件使用。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData" border style="width: 100%">\n    <el-table-column label="日期" width="180">\n      <template 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="姓名" width="180">\n      <template scope="scope">\n        <el-popover trigger="hover" placement="top">\n          <p>姓名: {{ scope.row.name }}</p>\n          <p>住址: {{ 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="操作">\n      <template scope="scope">\n        <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>\n        <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>\n      </template>\n    </el-table-column>\n  </el-table>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData: [{\n          date: '2016-05-02',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1518 弄'\n        }, {\n          date: '2016-05-04',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1517 弄'\n        }, {\n          date: '2016-05-01',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1519 弄'\n        }, {\n          date: '2016-05-03',\n          name: '王小虎',\n          address: '上海市普陀区金沙江路 1516 弄'\n        }]\n      }\n    },\n    methods: {\n      handleEdit(index, row) {\n        console.log(index, row);\n      },\n      handleDelete(index, row) {\n        console.log(index, row);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData,border:""}},[a("el-table-column",{attrs:{label:"日期",width:"180"},scopedSlots:{default:function(t){return[a("el-icon",{attrs:{name:"time"}}),a("span",{staticStyle:{"margin-left":"10px"}},[s._v(s._s(t.row.date))])]}}}),a("el-table-column",{attrs:{label:"姓名",width:"180"},scopedSlots:{default:function(t){return[a("el-popover",{attrs:{trigger:"hover",placement:"top"}},[a("p",[s._v("姓名: "+s._s(t.row.name))]),a("p",[s._v("住址: "+s._s(t.row.address))]),a("div",{staticClass:"name-wrapper",slot:"reference"},[a("el-tag",[s._v(s._s(t.row.name))])],1)])]}}}),a("el-table-column",{attrs:{label:"操作"},scopedSlots:{default:function(t){return[a("el-button",{attrs:{size:"small"},on:{click:function(a){s.handleEdit(t.$index,t.row)}}},[s._v("编辑")]),a("el-button",{attrs:{size:"small",type:"danger"},on:{click:function(a){s.handleDelete(t.$index,t.row)}}},[s._v("删除")])]}}})],1)]],2),a("p",[s._v("通过 "),a("code",[s._v("Scoped slot")]),s._v(" 可以获取到 row, column, $index 和 store（table 内部的状态管理）的数据，用法参考 demo。("),a("code",[s._v("1.1")]),s._v(" 后支持通过 "),a("a",{attrs:{href:"https://vuejs.org/v2/guide/components.html#Scoped-Slots"}},[s._v("Scoped slot")]),s._v(" 自定义模板。之前的 "),a("code",[s._v("inline-template")]),s._v(" 同样适用，但不推荐。)")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("border")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"日期"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"time"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-icon")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px"')]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.date "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"姓名"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"180"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("trigger")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"hover"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("姓名: "),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("住址: "),a("span",[s._v("{{")]),s._v(" scope.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("p")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"reference"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name-wrapper"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" scope.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-popover")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"操作"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"scope"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleEdit(scope.$index, scope.row)"')]),s._v(">")]),s._v("编辑"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v("\n          "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleDelete(scope.$index, scope.row)"')]),s._v(">")]),s._v("删除"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-02'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1518 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-04'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1517 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-01'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1519 弄'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("date")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2016-05-03'")]),s._v(",\n          "),a("span",{
-staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区金沙江路 1516 弄'")]),s._v("\n        }]\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleEdit(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      },\n      handleDelete(index, row) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(index, row);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(15),a("p",[s._v("当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-table :data="tableData5" style="width: 100%">\n    <el-table-column type="expand">\n      <template scope="props">\n        <el-form label-position="left" inline class="demo-table-expand">\n          <el-form-item label="商品名称">\n            <span>{{ props.row.name }}</span>\n          </el-form-item>\n          <el-form-item label="所属店铺">\n            <span>{{ props.row.shop }}</span>\n          </el-form-item>\n          <el-form-item label="商品 ID">\n            <span>{{ props.row.id }}</span>\n          </el-form-item>\n          <el-form-item label="店铺 ID">\n            <span>{{ props.row.shopId }}</span>\n          </el-form-item>\n          <el-form-item label="商品分类">\n            <span>{{ props.row.category }}</span>\n          </el-form-item>\n          <el-form-item label="店铺地址">\n            <span>{{ props.row.address }}</span>\n          </el-form-item>\n          <el-form-item label="商品描述">\n            <span>{{ props.row.desc }}</span>\n          </el-form-item>\n        </el-form>\n      </template>\n    </el-table-column>\n    <el-table-column label="商品 ID" prop="id">\n    </el-table-column>\n    <el-table-column label="商品名称" prop="name">\n    </el-table-column>\n    <el-table-column label="描述" prop="desc">\n    </el-table-column>\n  </el-table>\n</template>\n\n\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tableData5: [{\n          id: '12987122',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987123',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987125',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }, {\n          id: '12987126',\n          name: '好滋好味鸡蛋仔',\n          category: '江浙小吃、小吃零食',\n          desc: '荷兰优质淡奶，奶香浓而不腻',\n          address: '上海市普陀区真北路',\n          shop: '王小虎夫妻店',\n          shopId: '10333'\n        }]\n      }\n    }\n  }\n",style:"\n  .demo-table-expand {\n    font-size: 0;\n  }\n  .demo-table-expand label {\n    width: 90px;\n    color: #99a9bf;\n  }\n  .demo-table-expand .el-form-item {\n    margin-right: 0;\n    margin-bottom: 0;\n    width: 50%;\n  }\n"}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-table",{staticStyle:{width:"100%"},attrs:{data:s.tableData5}},[a("el-table-column",{attrs:{type:"expand"},scopedSlots:{default:function(t){return[a("el-form",{staticClass:"demo-table-expand",attrs:{"label-position":"left",inline:""}},[a("el-form-item",{attrs:{label:"商品名称"}},[a("span",[s._v(s._s(t.row.name))])]),a("el-form-item",{attrs:{label:"所属店铺"}},[a("span",[s._v(s._s(t.row.shop))])]),a("el-form-item",{attrs:{label:"商品 ID"}},[a("span",[s._v(s._s(t.row.id))])]),a("el-form-item",{attrs:{label:"店铺 ID"}},[a("span",[s._v(s._s(t.row.shopId))])]),a("el-form-item",{attrs:{label:"商品分类"}},[a("span",[s._v(s._s(t.row.category))])]),a("el-form-item",{attrs:{label:"店铺地址"}},[a("span",[s._v(s._s(t.row.address))])]),a("el-form-item",{attrs:{label:"商品描述"}},[a("span",[s._v(s._s(t.row.desc))])])],1)]}}}),a("el-table-column",{attrs:{label:"商品 ID",prop:"id"}}),a("el-table-column",{attrs:{label:"商品名称",prop:"name"}}),a("el-table-column",{attrs:{label:"描述",prop:"desc"}})],1)]],2),a("p",[s._v('通过设置 type="expand" 和 '),a("code",[s._v("Scoped slot")]),s._v(" 可以开启展开行功能，"),a("code",[s._v("el-table-column")]),s._v(" 的模板会被渲染成为展开行的内容，展开行可访问的属性与使用自定义列模板时的 "),a("code",[s._v("Scoped slot")]),s._v(" 相同。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tableData5"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"width: 100%"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"expand"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("scope")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label-position")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("inline")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"demo-table-expand"')]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品名称"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.name "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"所属店铺"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.shop "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品 ID"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.id "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"店铺 ID"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.shopId "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品分类"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.category "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"店铺地址"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.address "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品描述"')]),s._v(">")]),s._v("\n            "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),a("span",[s._v("{{")]),s._v(" props.row.desc "),a("span",[s._v("}}")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n          "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form-item")]),s._v(">")]),s._v("\n        "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-form")]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品 ID"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"商品名称"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"name"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"描述"')]),s._v("\n      "),a("span",{staticClass:"hljs-attr"},[s._v("prop")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"desc"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table-column")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-table")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("label")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("90px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#99a9bf")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".demo-table-expand")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-form-item")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-right")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("margin-bottom")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("50%")]),s._v(";\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tableData5")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987122'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987123'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987125'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'12987126'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'好滋好味鸡蛋仔'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("category")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'江浙小吃、小吃零食'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("desc")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'荷兰优质淡奶，奶香浓而不腻'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("address")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'上海市普陀区真北路'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shop")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'王小虎夫妻店'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("shopId")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'10333'")]),s._v("\n        }]\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(16),s._m(17),s._m(18),s._m(19),s._m(20),s._m(21),s._m(22),s._m(23)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"table-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table 表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-ban-ma-wen-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-ban-ma-wen-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带斑马纹表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-bian-kuang-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-bian-kuang-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带边框表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dai-zhuang-tai-biao-ge"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dai-zhuang-tai-biao-ge","aria-hidden":"true"}},[s._v("¶")]),s._v(" 带状态表格")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-lie-he-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-lie-he-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定列和表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"liu-ti-gao-du"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#liu-ti-gao-du","aria-hidden":"true"}},[s._v("¶")]),s._v(" 流体高度")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-ji-biao-tou"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-ji-biao-tou","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多级表头")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dan-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dan-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 单选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"duo-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#duo-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 多选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"pai-xu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#pai-xu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 排序")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shai-xuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shai-xuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 筛选")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-lie-mo-ban"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-lie-mo-ban","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义列模板")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhan-kai-xing"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhan-kai-xing","aria-hidden":"true"}},[s._v("¶")]),s._v(" 展开行")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("显示的数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("height")]),a("td",[s._v("Table 的高度，默认为自动高度。如果 height 为 number 类型，单位 px；如果 height 为 string 类型，则 Table 的高度受控于外部样式。")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("max-height")]),a("td",[s._v("Table 的最大高度")]),a("td",[s._v("string/number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("stripe")]),a("td",[s._v("是否为斑马纹 table")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("border")]),a("td",[s._v("是否带有纵向边框")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("fit")]),a("td",[s._v("列的宽度是否自撑开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("show-header")]),a("td",[s._v("是否显示表头")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("highlight-current-row")]),a("td",[s._v("是否要高亮当前行")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-row-key")]),a("td",[s._v("当前行的 key，只写属性")]),a("td",[s._v("String,Number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-class-name")]),a("td",[s._v("行的 className 的回调方法，也可以使用字符串为所有行设置一个固定的 className。")]),a("td",[s._v("Function(row, index)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-style")]),a("td",[s._v("行的 style 的回调方法，也可以使用一个固定的 Object 为所有行设置一样的 Style。")]),a("td",[s._v("Function(row, index)/Object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("row-key")]),a("td",[s._v("行数据的 Key，用来优化 Table 的渲染；在使用 reserve-selection 功能的情况下，该属性是必填的")]),a("td",[s._v("Function(row)/String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("空数据时显示的文本内容，也可以通过 "),a("code",[s._v('slot="empty"')]),s._v(" 设置")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("暂无数据")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v('是否默认展开所有行，当 Table 中存在 type="expand" 的 Column 的时候有效')]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-row-keys")]),a("td",[s._v("可以通过该属性设置 Table 目前的展开行，需要设置 row-key 属性才能使用，该属性为展开行的 keys 数组。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td")]),a("tr",[a("td",[s._v("default-sort")]),a("td",[s._v("默认的排序列的prop和顺序。它的"),a("code",[s._v("prop")]),s._v("属性指定默认的排序的列，"),a("code",[s._v("order")]),s._v("指定默认排序的顺序")]),a("td",[s._v("Object")]),a("td",[a("code",[s._v("order")]),s._v(": ascending, descending")]),a("td",[s._v("如果只指定了"),a("code",[s._v("prop")]),s._v(", 没有指定"),a("code",[s._v("order")]),s._v(", 则默认顺序是ascending")])]),a("tr",[a("td",[s._v("tooltip-effect")]),a("td",[s._v("tooltip "),a("code",[s._v("effect")]),s._v(" 属性")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td")])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("select")]),a("td",[s._v("当用户手动勾选数据行的 Checkbox 时触发的事件")]),a("td",[s._v("selection, row")])]),a("tr",[a("td",[s._v("select-all")]),a("td",[s._v("当用户手动勾选全选 Checkbox 时触发的事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("selection-change")]),a("td",[s._v("当选择项发生变化时会触发该事件")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("cell-mouse-enter")]),a("td",[s._v("当单元格 hover 进入时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-mouse-leave")]),a("td",[s._v("当单元格 hover 退出时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-click")]),a("td",[s._v("当某个单元格被点击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("cell-dblclick")]),a("td",[s._v("当某个单元格被双击击时会触发该事件")]),a("td",[s._v("row, column, cell, event")])]),a("tr",[a("td",[s._v("row-click")]),a("td",[s._v("当某一行被点击时会触发该事件")]),a("td",[s._v("row, event, column")])]),a("tr",[a("td",[s._v("row-contextmenu")]),a("td",[s._v("当某一行被鼠标右键点击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("row-dblclick")]),a("td",[s._v("当某一行被双击时会触发该事件")]),a("td",[s._v("row, event")])]),a("tr",[a("td",[s._v("header-click")]),a("td",[s._v("当某一列的表头被点击时会触发该事件")]),a("td",[s._v("column, event")])]),a("tr",[a("td",[s._v("sort-change")]),a("td",[s._v("当表格的排序条件发生变化的时候会触发该事件")]),a("td",[s._v("{ column, prop, order }")])]),a("tr",[a("td",[s._v("filter-change")]),a("td",[s._v("当表格的筛选条件发生变化的时候会触发该事件，参数的值是一个对象，对象的 key 是 column 的 columnKey，对应的 value 为用户选择的筛选条件的数组。")]),a("td",[s._v("filters")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当表格的当前行发生变化的时候会触发该事件，如果要高亮当前行，请打开表格的 highlight-current-row 属性")]),a("td",[s._v("currentRow, oldCurrentRow")])]),a("tr",[a("td",[s._v("header-dragend")]),a("td",[s._v("当拖动表头改变了列的宽度的时候会触发该事件")]),a("td",[s._v("newWidth, oldWidth, column, event")])]),a("tr",[a("td",[s._v("expand")]),a("td",[s._v("当用户对某一行展开或者关闭的上会触发该事件")]),a("td",[s._v("row, expanded")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearSelection")]),a("td",[s._v("清空用户的选择，当使用 reserve-selection 功能的时候，可能会需要使用此方法")]),a("td",[s._v("selection")])]),a("tr",[a("td",[s._v("toggleRowSelection")]),a("td",[s._v("切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否（selected 为 true 则选中）")]),a("td",[s._v("row, selected")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"table-column-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#table-column-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Table-column Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("对应列的类型。如果设置了 "),a("code",[s._v("selection")]),s._v(" 则显示多选框；如果设置了 "),a("code",[s._v("index")]),s._v(" 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮")]),a("td",[s._v("string")]),a("td",[s._v("selection/index/expand")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("column-key")]),a("td",[s._v("column 的 key，如果需要使用 filter-change 事件，则需要此属性标识是哪个 column 的筛选条件")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label")]),a("td",[s._v("显示的标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("prop")]),a("td",[s._v("对应列内容的字段名，也可以使用 property 属性")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("width")]),a("td",[s._v("对应列的宽度")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("min-width")]),a("td",[s._v("对应列的最小宽度，与 width 的区别是 width 是固定的，min-width 会把剩余宽度按比例分配给设置了 min-width 的列")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("fixed")]),a("td",[s._v("列是否固定在左侧或者右侧，true 表示固定在左侧")]),a("td",[s._v("string, boolean")]),a("td",[s._v("true, left, right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-header")]),a("td",[s._v("列标题 Label 区域渲染使用的 Function")]),a("td",[s._v("Function(h, { column, $index })")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("sortable")]),a("td",[s._v("对应列是否可以排序，如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件")]),a("td",[s._v("boolean, string")]),a("td",[s._v("true, false, 'custom'")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("sort-method")]),a("td",[s._v("对数据进行排序的时候使用的方法，仅当 sortable 设置为 true 的时候有效")]),a("td",[s._v("Function(a, b)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("resizable")]),a("td",[s._v("对应列是否可以通过拖动改变宽度（需要在 el-table 上设置 border 属性为真）")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("formatter")]),a("td",[s._v("用来格式化内容")]),a("td",[s._v("Function(row, column)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-overflow-tooltip")]),a("td",[s._v("当内容过长被隐藏时显示 tooltip")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("header-align")]),a("td",[s._v("表头对齐方式，若不设置该项，则使用表格的对齐方式")]),a("td",[s._v("String")]),a("td",[s._v("left/center/right")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("class-name")]),a("td",[s._v("列的 className")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("label-class-name")]),a("td",[s._v("当前列标题的自定义类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("selectable")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Function，Function 的返回值用来决定这一行的 CheckBox 是否可以勾选")]),a("td",[s._v("Function(row, index)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("reserve-selection")]),a("td",[s._v("仅对 type=selection 的列有效，类型为 Boolean，为 true 则代表会保留之前数据的选项，需要配合 Table 的 clearSelection 方法使用。")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("filters")]),a("td",[s._v("数据过滤的选项，数组格式，数组中的元素需要有 text 和 value 属性。")]),a("td",[s._v("Array[{ text, value }]")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-multiple")]),a("td",[s._v("数据过滤的选项是否多选")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("filter-method")]),a("td",[s._v("数据过滤使用的方法，如果是多选的筛选项，对每一条数据会执行多次，任意一次返回 true 就会显示。")]),a("td",[s._v("Function(value, row)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filtered-value")]),a("td",[s._v("选中的数据过滤项，如果需要自定义表头过滤的渲染方式，可能会需要此属性。")]),a("td",[s._v("Array")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])]);
-}]}},function(s,t,a){s.exports=a(463)},function(s,t,a){var l=a(13)(a(464),a(465),null,null);s.exports=l.exports},function(s,t){"use strict";t.__esModule=!0,t.default={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(s,t){var a=this;if("add"===t){var l=++this.tabIndex+"";this.editableTabs.push({title:"New Tab",name:l,content:"New Tab content"}),this.editableTabsValue=l}"remove"===t&&!function(){var t=a.editableTabs,l=a.editableTabsValue;l===s&&t.forEach(function(a,n){if(a.name===s){var e=t[n+1]||t[n-1];e&&(l=e.name)}}),a.editableTabsValue=l,a.editableTabs=t.filter(function(t){return t.name!==s})}()},addTab:function(s){var t=++this.tabIndex+"";this.editableTabs2.push({title:"New Tab",name:t,content:"New Tab content"}),this.editableTabsValue2=t},removeTab:function(s){var t=this.editableTabs2,a=this.editableTabsValue2;a===s&&t.forEach(function(l,n){if(l.name===s){var e=t[n+1]||t[n-1];e&&(a=e.name)}}),this.editableTabsValue2=a,this.editableTabs2=t.filter(function(t){return t.name!==s})}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("分隔内容上有关联但属于不同类别的数据集合。")]),s._m(1),a("p",[s._v("基础的、简洁的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName: 'second'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.activeName,expression:"activeName"}],domProps:{value:s.activeName},on:{"tab-click":s.handleClick,input:function(t){s.activeName=t}}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("Tabs 组件提供了选项卡功能，默认选中第一个标签页，你也可以通过 "),a("code",[s._v("value")]),s._v(" 属性来指定当前选中的标签页。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'second'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("选项卡样式的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tabs v-model="activeName2" type="card" @tab-click="handleClick">\n    <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>\n    <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>\n    <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>\n    <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>\n  </el-tabs>\n</template>\n\n',script:"\n  export default {\n    data() {\n      return {\n        activeName2: 'first'\n      };\n    },\n    methods: {\n      handleClick(tab, event) {\n        console.log(tab, event);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.activeName2,expression:"activeName2"}],attrs:{type:"card"},domProps:{value:s.activeName2},on:{"tab-click":s.handleClick,input:function(t){s.activeName2=t}}},[a("el-tab-pane",{attrs:{label:"用户管理",name:"first"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理",name:"second"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理",name:"third"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿",name:"fourth"}},[s._v("定时任务补偿")])],1)]],2),a("p",[s._v("只需要设置 "),a("code",[s._v("type")]),s._v(" 属性为 "),a("code",[s._v("card")]),s._v(" 就可以使选项卡改变为标签风格。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"activeName2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClick"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"first"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"second"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"third"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fourth"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("activeName2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'first'")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClick(tab, event) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(tab, event);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("卡片化的标签页。")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tabs type="border-card">\n  <el-tab-pane label="用户管理">用户管理</el-tab-pane>\n  <el-tab-pane label="配置管理">配置管理</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",{attrs:{label:"用户管理"}},[s._v("用户管理")]),a("el-tab-pane",{attrs:{label:"配置管理"}},[s._v("配置管理")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("p",[s._v("将"),a("code",[s._v("type")]),s._v("设置为"),a("code",[s._v("border-card")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"用户管理"')]),s._v(">")]),s._v("用户管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"配置管理"')]),s._v(">")]),s._v("配置管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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> 我的行程</span>\n    我的行程\n  </el-tab-pane>\n  <el-tab-pane label="消息中心">消息中心</el-tab-pane>\n  <el-tab-pane label="角色管理">角色管理</el-tab-pane>\n  <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>\n</el-tabs>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{attrs:{type:"border-card"}},[a("el-tab-pane",[a("span",{slot:"label"},[a("i",{staticClass:"el-icon-date"}),s._v(" 我的行程")]),s._v("\n    我的行程\n  ")]),a("el-tab-pane",{attrs:{label:"消息中心"}},[s._v("消息中心")]),a("el-tab-pane",{attrs:{label:"角色管理"}},[s._v("角色管理")]),a("el-tab-pane",{attrs:{label:"定时任务补偿"}},[s._v("定时任务补偿")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"border-card"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"label"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-date"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v(" 我的行程"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("span")]),s._v(">")]),s._v("\n    我的行程\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"消息中心"')]),s._v(">")]),s._v("消息中心"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"角色管理"')]),s._v(">")]),s._v("角色管理"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"定时任务补偿"')]),s._v(">")]),s._v("定时任务补偿"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("增减标签页按钮只能在选项卡样式的标签页下使用")]),a("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" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\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(targetName, action) {\n        if (action === 'add') {\n          let 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          let tabs = this.editableTabs;\n          let activeName = this.editableTabsValue;\n          if (activeName === targetName) {\n            tabs.forEach((tab, index) => {\n              if (tab.name === targetName) {\n                let 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(tab => tab.name !== targetName);\n        }\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.editableTabsValue,expression:"editableTabsValue"}],attrs:{type:"card",editable:""},domProps:{value:s.editableTabsValue},on:{edit:s.handleTabsEdit,input:function(t){s.editableTabsValue=t}}},s._l(s.editableTabs,function(t,l){return a("el-tab-pane",{attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("editable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@edit")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleTabsEdit"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabs")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleTabsEdit(targetName, action) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'add'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs.push({\n            "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n            "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n          });\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = newTabName;\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (action === "),a("span",{staticClass:"hljs-string"},[s._v("'remove'")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n            tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n                "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                  activeName = nextTab.name;\n                }\n              }\n            });\n          }\n          \n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue = activeName;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n        }\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("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" :label="item.title" :name="item.name">\n    {{item.content}}\n  </el-tab-pane>\n</el-tabs>\n\n',script:"\n  export default {\n    data() {\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(targetName) {\n        let 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(targetName) {\n        let tabs = this.editableTabs2;\n        let activeName = this.editableTabsValue2;\n        if (activeName === targetName) {\n          tabs.forEach((tab, index) => {\n            if (tab.name === targetName) {\n              let 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(tab => tab.name !== targetName);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticStyle:{"margin-bottom":"20px"}},[a("el-button",{attrs:{size:"small"},on:{click:function(t){s.addTab(s.editableTabsValue2)}}},[s._v("\n    add tab\n  ")])],1),a("el-tabs",{directives:[{name:"model",rawName:"v-model",value:s.editableTabsValue2,expression:"editableTabsValue2"}],attrs:{type:"card",closable:""},domProps:{value:s.editableTabsValue2},on:{"tab-remove":s.removeTab,input:function(t){s.editableTabsValue2=t}}},s._l(s.editableTabs2,function(t,l){return a("el-tab-pane",{attrs:{label:t.title,name:t.name}},[s._v("\n    "+s._s(t.content)+"\n  ")])}))],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-bottom: 20px;"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"addTab(editableTabsValue2)"')]),s._v("\n  >")]),s._v("\n    add tab\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"editableTabsValue2"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"card"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("closable")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@tab-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"removeTab"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"(item, index) in editableTabs2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":label")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.title"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":name")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item.name"')]),s._v("\n  >")]),s._v("\n    "),a("span",[s._v("{{")]),s._v("item.content"),a("span",[s._v("}}")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tab-pane")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tabs")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("editableTabsValue2")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n        "),a("span",{
-staticClass:"hljs-attr"},[s._v("editableTabs2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 1 content'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'Tab 2 content'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tabIndex")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v("\n      }\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      addTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" newTabName = ++"),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".tabIndex + "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2.push({\n          "),a("span",{staticClass:"hljs-attr"},[s._v("title")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": newTabName,\n          "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'New Tab content'")]),s._v("\n        });\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = newTabName;\n      },\n      removeTab(targetName) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" tabs = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" activeName = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (activeName === targetName) {\n          tabs.forEach("),a("span",{staticClass:"hljs-function"},[s._v("("),a("span",{staticClass:"hljs-params"},[s._v("tab, index")]),s._v(") =>")]),s._v(" {\n            "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (tab.name === targetName) {\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" nextTab = tabs[index + "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("] || tabs[index - "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("];\n              "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (nextTab) {\n                activeName = nextTab.name;\n              }\n            }\n          });\n        }\n        \n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabsValue2 = activeName;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".editableTabs2 = tabs.filter("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("tab")]),s._v(" =>")]),s._v(" tab.name !== targetName);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tabs-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs 标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"xuan-xiang-qia-yang-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#xuan-xiang-qia-yang-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 选项卡样式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"qia-pian-hua"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#qia-pian-hua","aria-hidden":"true"}},[s._v("¶")]),s._v(" 卡片化")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("可以通过具名 "),a("code",[s._v("slot")]),s._v(" 来实现自定义标签页的内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-zeng-jian-biao-qian-ye"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-zeng-jian-biao-qian-ye","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态增减标签页")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-zeng-jia-biao-qian-ye-hong-fa-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义增加标签页触发器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("风格类型")]),a("td",[s._v("string")]),a("td",[s._v("card/border-card")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("addable")]),a("td",[s._v("标签是否可增加")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("标签是否同时可增加和关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("active-name(deprecated)")]),a("td",[s._v("选中选项卡的 name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("第一个选项卡的 name")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值，选中选项卡的 name")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("第一个选项卡的 name")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tabs-events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tabs-events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tabs Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("tab-click")]),a("td",[s._v("tab 被选中时触发")]),a("td",[s._v("被选中的标签 tab 实例")])]),a("tr",[a("td",[s._v("tab-remove")]),a("td",[s._v("点击 tab 移除按钮后触发")]),a("td",[s._v("被删除的标签的 name")])]),a("tr",[a("td",[s._v("tab-add")]),a("td",[s._v("点击 tabs 的新增按钮后触发")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("edit")]),a("td",[s._v("点击 tabs 的新增按钮或 tab 被关闭后触发")]),a("td",[s._v("(targetName, action)")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tab-pane-attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tab-pane-attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tab-pane Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("选项卡标题")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("是否禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("与选项卡 activeName 对应的标识符，表示选项卡别名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("该选项卡在选项卡列表中的顺序值，如第一个选项卡则为'1'")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("标签是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])])])])}]}},function(s,t,a){s.exports=a(467)},function(s,t,a){a(468);var l=a(13)(a(470),a(471),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{tags:[{name:"标签一",type:""},{name:"标签二",type:"gray"},{name:"标签三",type:"primary"},{name:"标签四",type:"success"},{name:"标签五",type:"warning"},{name:"标签六",type:"danger"}],dynamicTags:["标签一","标签二","标签三"],inputVisible:!1,inputValue:""}},methods:{handleClose:function(s){this.dynamicTags.splice(this.dynamicTags.indexOf(s),1)},showInput:function(){var s=this;this.inputVisible=!0,this.$nextTick(function(t){s.$refs.saveTagInput.$refs.input.focus()})},handleInputConfirm:function(){var s=this.inputValue;s&&this.dynamicTags.push(s),this.inputVisible=!1,this.inputValue=""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于标记和选择。")]),s._m(1),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag>标签一</el-tag>\n<el-tag type="gray">标签二</el-tag>\n<el-tag type="primary">标签三</el-tag>\n<el-tag type="success">标签四</el-tag>\n<el-tag type="warning">标签五</el-tag>\n<el-tag type="danger">标签六</el-tag>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tag",[s._v("标签一")]),a("el-tag",{attrs:{type:"gray"}},[s._v("标签二")]),a("el-tag",{attrs:{type:"primary"}},[s._v("标签三")]),a("el-tag",{attrs:{type:"success"}},[s._v("标签四")]),a("el-tag",{attrs:{type:"warning"}},[s._v("标签五")]),a("el-tag",{attrs:{type:"danger"}},[s._v("标签六")])],1),a("p",[s._v("由"),a("code",[s._v("type")]),s._v("属性来选择tag的类型，也可以通过"),a("code",[s._v("color")]),s._v("属性来自定义背景色。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("标签一"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"gray"')]),s._v(">")]),s._v("标签二"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("标签三"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(">")]),s._v("标签四"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"warning"')]),s._v(">")]),s._v("标签五"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"danger"')]),s._v(">")]),s._v("标签六"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tag v-for="tag in tags" :closable="true" :type="tag.type">\n{{tag.name}}\n</el-tag>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        tags: [\n          { name: '标签一', type: '' },\n          { name: '标签二', type: 'gray' },\n          { name: '标签三', type: 'primary' },\n          { name: '标签四', type: 'success' },\n          { name: '标签五', type: 'warning' },\n          { name: '标签六', type: 'danger' }\n        ]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},s._l(s.tags,function(t){return a("el-tag",{attrs:{closable:!0,type:t.type}},[s._v("\n"+s._s(t.name)+"\n")])})),a("p",[s._v("设置"),a("code",[s._v("closable")]),s._v("属性可以定义一个标签是否可移除。默认的标签移除时会附带渐变动画，如果不想使用，可以设置"),a("code",[s._v("close-transition")]),s._v("属性，它接受一个"),a("code",[s._v("Boolean")]),s._v("，true 为关闭。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in tags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag.type"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag.name"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("tags")]),s._v(": [\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签一'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签二'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'gray'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签三'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'primary'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签四'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'success'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签五'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'warning'")]),s._v(" },\n          { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'标签六'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'danger'")]),s._v(" }\n        ]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),s._m(4),a("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() {\n      return {\n        dynamicTags: ['标签一', '标签二', '标签三'],\n        inputVisible: false,\n        inputValue: ''\n      };\n    },\n    methods: {\n      handleClose(tag) {\n        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);\n      },\n\n      showInput() {\n        this.inputVisible = true;\n        this.$nextTick(_ => {\n          this.$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        let 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}}},[a("div",{staticClass:"source",slot:"source"},[s._l(s.dynamicTags,function(t){return a("el-tag",{key:t,attrs:{closable:!0,"close-transition":!1},on:{close:function(a){s.handleClose(t)}}},[s._v("\n"+s._s(t)+"\n")])}),s.inputVisible?a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.inputValue,expression:"inputValue"}],ref:"saveTagInput",staticClass:"input-new-tag",attrs:{size:"mini"},domProps:{value:s.inputValue},on:{blur:s.handleInputConfirm,input:function(t){s.inputValue=t}},nativeOn:{keyup:function(t){s._k(t.keyCode,"enter",13)||s.handleInputConfirm(t)}}}):a("el-button",{staticClass:"button-new-tag",attrs:{size:"small"},on:{click:s.showInput}},[s._v("+ New Tag")])],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-for")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tag in dynamicTags"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":closable")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"true"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":close-transition")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@close")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleClose(tag)"')]),s._v("\n>")]),s._v("\n"),a("span",[s._v("{{")]),s._v("tag"),a("span",[s._v("}}")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tag")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"input-new-tag"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputVisible"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"inputValue"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"saveTagInput"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@keyup.enter.native")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@blur")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleInputConfirm"')]),s._v("\n>")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"button-new-tag"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"showInput"')]),s._v(">")]),s._v("+ New Tag"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dynamicTags")]),s._v(": ["),a("span",{staticClass:"hljs-string"},[s._v("'标签一'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标签二'")]),s._v(", "),a("span",{staticClass:"hljs-string"},[s._v("'标签三'")]),s._v("],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("inputValue")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleClose(tag) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.splice("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.indexOf(tag), "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(");\n      },\n\n      showInput() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$nextTick("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("_")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.saveTagInput.$refs.input.focus();\n        });\n      },\n\n      handleInputConfirm() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("let")]),s._v(" inputValue = "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (inputValue) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dynamicTags.push(inputValue);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".inputValue = "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),s._m(6),s._m(7),s._m(8)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tag-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tag-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tag 标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-yi-chu-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-yi-chu-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可移除标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dong-tai-bian-ji-biao-qian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dong-tai-bian-ji-biao-qian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 动态编辑标签")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("动态编辑标签可以通过点击标签关闭按钮后触发的 "),a("code",[s._v("close")]),s._v(" 事件来实现")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("type")]),a("td",[s._v("主题")]),a("td",[s._v("string")]),a("td",[s._v("primary/gray/success/warning/danger")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("closable")]),a("td",[s._v("是否可关闭")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("close-transition")]),a("td",[s._v("是否禁用关闭时的渐变动画")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("hit")]),a("td",[s._v("是否有边框描边")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("color")]),a("td",[s._v("背景色")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("close")]),a("td",[s._v("关闭tag时触发的事件")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){s.exports=a(473)},function(s,t,a){a(474);var l=a(13)(a(476),a(477),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用于选择或输入日期")]),s._m(1),a("p",[s._v("提供几个固定的时间点供用户选择")]),a("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=\"选择时间\">\n</el-time-select>\n\n\n",script:"\n  export default {\n    data() {\n      return {\n        value1: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.value1,expression:"value1"}],attrs:{"picker-options":{start:"08:30",step:"00:15",end:"18:30"},placeholder:"选择时间"},domProps:{value:s.value1},on:{input:function(t){s.value1=t}}})],1),a("p",[s._v("使用 el-time-select 标签，分别通过"),a("code",[s._v("star")]),s._v("、"),a("code",[s._v("end")]),s._v("和"),a("code",[s._v("step")]),s._v("指定可选的起始时间、结束时间和步长")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value1"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n    start: '08:30',\n    step: '00:15',\n    end: '18:30'\n  }\"")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value1")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("可以选择任意时间")]),a("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="任意时间点">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value2: new Date(2016, 9, 10, 18, 40)\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"picker-options":{selectableRange:"18:30:00 - 20:30:00"},placeholder:"任意时间点"},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})]],2),a("p",[s._v("使用 el-time-picker 标签，通过"),a("code",[s._v("selectableRange")]),s._v("限制可选时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value2"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      selectableRange: '18:30:00 - 20:30:00'\n    }\"")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"任意时间点"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"
-},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value2")]),s._v(": "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("18")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("若先选择开始时间，则结束时间内备选项的状态会随之改变")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:"<template>\n  <el-time-select placeholder=\"起始时间\" 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=\"结束时间\" 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() {\n      return {\n        startTime: '',\n        endTime: ''\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.startTime,expression:"startTime"}],attrs:{placeholder:"起始时间","picker-options":{start:"08:30",step:"00:15",end:"18:30"}},domProps:{value:s.startTime},on:{input:function(t){s.startTime=t}}}),a("el-time-select",{directives:[{name:"model",rawName:"v-model",value:s.endTime,expression:"endTime"}],attrs:{placeholder:"结束时间","picker-options":{start:"08:30",step:"00:15",end:"18:30",minTime:s.startTime}},domProps:{value:s.endTime},on:{input:function(t){s.endTime=t}}})]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"起始时间"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"startTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30'\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"结束时间"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"endTime"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v(":picker-options")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v("\"{\n      start: '08:30',\n      step: '00:15',\n      end: '18:30',\n      minTime: startTime\n    }\"")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-select")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("startTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("endTime")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("可选择任意的时间范围")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-time-picker is-range v-model="value3" placeholder="选择时间范围">\n  </el-time-picker>\n</template>\n\n\n',script:"\n  export default {\n    data() {\n      return {\n        value3: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)]\n      };\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-time-picker",{directives:[{name:"model",rawName:"v-model",value:s.value3,expression:"value3"}],attrs:{"is-range":"",placeholder:"选择时间范围"},domProps:{value:s.value3},on:{input:function(t){s.value3=t}}})]],2),a("p",[s._v("添加"),a("code",[s._v("is-range")]),s._v("属性即可选择时间范围")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("is-range")]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"value3"')]),s._v("\n    "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"选择时间范围"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-time-picker")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("value3")]),s._v(": ["),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v("), "),a("span",{staticClass:"hljs-keyword"},[s._v("new")]),s._v(" "),a("span",{staticClass:"hljs-built_in"},[s._v("Date")]),s._v("("),a("span",{staticClass:"hljs-number"},[s._v("2016")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(", "),a("span",{staticClass:"hljs-number"},[s._v("40")]),s._v(")]\n      };\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"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)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"timepicker-shi-jian-xuan-ze-qi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#timepicker-shi-jian-xuan-ze-qi","aria-hidden":"true"}},[s._v("¶")]),s._v(" TimePicker 时间选择器")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-dian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-dian","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间点")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gu-ding-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gu-ding-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 固定时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ren-yi-shi-jian-fan-wei"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ren-yi-shi-jian-fan-wei","aria-hidden":"true"}},[s._v("¶")]),s._v(" 任意时间范围")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("readonly")]),a("td",[s._v("完全只读")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("禁用")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("editable")]),a("td",[s._v("文本框可输入")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("clearable")]),a("td",[s._v("是否显示清除按钮")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("size")]),a("td",[s._v("输入框尺寸")]),a("td",[s._v("string")]),a("td",[s._v("large, small, mini")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placeholder")]),a("td",[s._v("占位内容")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("value")]),a("td",[s._v("绑定值")]),a("td",[s._v("TimePicker: DateTimeSelect: String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("align")]),a("td",[s._v("对齐方式")]),a("td",[s._v("string")]),a("td",[s._v("left, center, right")]),a("td",[s._v("left")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("TimePicker 下拉框的类名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("picker-options")]),a("td",[s._v("当前时间日期选择器特有的选项参考下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("{}")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-select-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-select-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Select Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("start")]),a("td",[s._v("开始时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("09:00")])]),a("tr",[a("td",[s._v("end")]),a("td",[s._v("结束时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("18:00")])]),a("tr",[a("td",[s._v("step")]),a("td",[s._v("间隔时间")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:30")])]),a("tr",[a("td",[s._v("minTime")]),a("td",[s._v("最小时间，小于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("00:00")])]),a("tr",[a("td",[s._v("maxTime")]),a("td",[s._v("最大时间，大于该时间的时间段将被禁用")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"time-picker-options"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#time-picker-options","aria-hidden":"true"}},[s._v("¶")]),s._v(" Time Picker Options")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("selectableRange")]),a("td",[s._v("可选时间段，例如"),a("code",[s._v("'18:30:00 - 20:30:00'")]),s._v("或者传入数组"),a("code",[s._v("['09:30:00 - 12:00:00', '14:30:00 - 18:30:00']")])]),a("td",[s._v("string/array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("format")]),a("td",[s._v("时间格式化(TimePicker)")]),a("td",[s._v("string")]),a("td",[s._v("小时："),a("code",[s._v("HH")]),s._v("，分："),a("code",[s._v("mm")]),s._v("，秒："),a("code",[s._v("ss")])]),a("td",[s._v("'HH:mm:ss'")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("Event Name")]),a("th",[s._v("Description")]),a("th",[s._v("Parameters")])])]),a("tbody",[a("tr",[a("td",[s._v("change")]),a("td",[s._v("当 input 的值改变时触发，返回值和文本框一致")]),a("td",[s._v("formatted value")])])])])}]}},function(s,t,a){s.exports=a(479)},function(s,t,a){a(480);var l=a(13)(a(482),a(483),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{disabled:!1}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("常用于展示鼠标 hover 时的提示信息。")]),s._m(1),a("p",[s._v("在这里我们提供 9 种不同方向的展示方式，可以通过以下完整示例来理解，选择你要的效果。")]),a("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 提示文字" placement="top-start">\n      <el-button>上左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Center 提示文字" placement="top">\n      <el-button>上边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Top Right 提示文字" placement="top-end">\n      <el-button>上右</el-button>\n    </el-tooltip>\n  </div>\n  <div class="left">\n    <el-tooltip class="item" effect="dark" content="Left Top 提示文字" placement="left-start">\n      <el-button>左上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Center 提示文字" placement="left">\n      <el-button>左边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Left Bottom 提示文字" placement="left-end">\n      <el-button>左下</el-button>\n    </el-tooltip>\n  </div>\n\n  <div class="right">\n    <el-tooltip class="item" effect="dark" content="Right Top 提示文字" placement="right-start">\n      <el-button>右上</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Center 提示文字" placement="right">\n      <el-button>右边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Right Bottom 提示文字" placement="right-end">\n      <el-button>右下</el-button>\n    </el-tooltip>\n  </div>\n  <div class="bottom">\n    <el-tooltip class="item" effect="dark" content="Bottom Left 提示文字" placement="bottom-start">\n      <el-button>下左</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Center 提示文字" placement="bottom">\n      <el-button>下边</el-button>\n    </el-tooltip>\n    <el-tooltip class="item" effect="dark" content="Bottom Right 提示文字" placement="bottom-end">\n      <el-button>下右</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: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\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"}}},[a("div",{staticClass:"source",slot:"source"},[a("div",{staticClass:"box"},[a("div",{staticClass:"top"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Left 提示文字",placement:"top-start"}},[a("el-button",[s._v("上左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Center 提示文字",placement:"top"}},[a("el-button",[s._v("上边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Top Right 提示文字",placement:"top-end"}},[a("el-button",[s._v("上右")])],1)],1),a("div",{staticClass:"left"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Top 提示文字",placement:"left-start"}},[a("el-button",[s._v("左上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Center 提示文字",placement:"left"}},[a("el-button",[s._v("左边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Left Bottom 提示文字",placement:"left-end"}},[a("el-button",[s._v("左下")])],1)],1),a("div",{staticClass:"right"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Top 提示文字",placement:"right-start"}},[a("el-button",[s._v("右上")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Center 提示文字",placement:"right"}},[a("el-button",[s._v("右边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Right Bottom 提示文字",placement:"right-end"}},[a("el-button",[s._v("右下")])],1)],1),a("div",{staticClass:"bottom"},[a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Left 提示文字",placement:"bottom-start"}},[a("el-button",[s._v("下左")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Center 提示文字",placement:"bottom"}},[a("el-button",[s._v("下边")])],1),a("el-tooltip",{staticClass:"item",attrs:{effect:"dark",content:"Bottom Right 提示文字",placement:"bottom-end"}},[a("el-button",[s._v("下右")])],1)],1)])]),a("p",[s._v("使用"),a("code",[s._v("content")]),s._v("属性来决定"),a("code",[s._v("hover")]),s._v("时的提示信息。由"),a("code",[s._v("placement")]),s._v("属性决定展示效果："),a("code",[s._v("placement")]),s._v("属性值为："),a("code",[s._v("方向-对齐位置")]),s._v("；四个方向："),a("code",[s._v("top")]),s._v("、"),a("code",[s._v("left")]),s._v("、"),a("code",[s._v("right")]),s._v("、"),a("code",[s._v("bottom")]),s._v("；三种对齐位置："),a("code",[s._v("start")]),s._v(", "),a("code",[s._v("end")]),s._v("，默认为空。如"),a("code",[s._v('placement="left-end"')]),s._v("，则提示信息出现在目标元素的左侧，且提示信息的底部与目标元素的底部对齐。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"box"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Left 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上左"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top Right 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("上右"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Top 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左上"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Left Bottom 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"left-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("左下"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Top 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右上"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右边"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Right Bottom 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"right-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("右下"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Left 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-start"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下左"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Center 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下边"),a("span",{
-staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"item"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dark"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom Right 提示文字"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom-end"')]),s._v(">")]),s._v("\n      "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("下右"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{staticClass:"undefined"},[s._v("\n  .box {\n    width: 400px;\n\n    .top {\n      text-align: center;\n    }\n\n    .left {\n      float: left;\n      width: 60px;\n    }\n\n    .right {\n      float: right;\n      width: 60px;\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")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{content:"Top center",placement:"top"}},[a("el-button",[s._v("Dark")])],1),a("el-tooltip",{attrs:{content:"Bottom center",placement:"bottom",effect:"light"}},[a("el-button",[s._v("Light")])],1)],1),a("p",[s._v("通过设置"),a("code",[s._v("effect")]),s._v("属性来改变主题，默认为"),a("code",[s._v("dark")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Top center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Dark"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"Bottom center"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Light"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("p",[s._v("展示多行文本或者是设置文本内容的格式")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-tooltip placement="top">\n  <div slot="content">多行信息<br>第二行信息</div>\n  <el-button>Top center</el-button>\n</el-tooltip>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tooltip",{attrs:{placement:"top"}},[a("div",{slot:"content"},[s._v("多行信息"),a("br"),s._v("第二行信息")]),a("el-button",[s._v("Top center")])],1)],1),a("p",[s._v("用具名 slot 分发"),a("code",[s._v("content")]),s._v("，替代"),a("code",[s._v("tooltip")]),s._v("中的"),a("code",[s._v("content")]),s._v("属性。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"top"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"content"')]),s._v(">")]),s._v("多行信息"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("br")]),s._v("/>")]),s._v("第二行信息"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("Top center"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("除了这些基本设置外，还有一些属性可以让使用者更好的定制自己的效果：")]),s._m(6),s._m(7),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<template>\n  <el-tooltip :disabled="disabled" content="点击关闭 tooltip 功能" placement="bottom" effect="light">\n    <el-button @click="disabled = !disabled">点击{{disabled ? \'开启\' : \'关闭\'}} tooltip 功能</el-button>\n  </el-tooltip>\n</template>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[[a("el-tooltip",{attrs:{disabled:s.disabled,content:"点击关闭 tooltip 功能",placement:"bottom",effect:"light"}},[a("el-button",{on:{click:function(t){s.disabled=!s.disabled}}},[s._v("点击"+s._s(s.disabled?"开启":"关闭")+" tooltip 功能")])],1)]],2),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":disabled")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"点击关闭 tooltip 功能"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("placement")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"bottom"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("effect")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"light"')]),s._v(">")]),s._v("\n    "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"disabled = !disabled"')]),s._v(">")]),s._v("点击"),a("span",[s._v("{{")]),s._v("disabled ? '开启' : '关闭'"),a("span",[s._v("}}")]),s._v(" tooltip 功能"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tooltip")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("template")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tooltip-wen-zi-ti-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tooltip-wen-zi-ti-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tooltip 文字提示")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhu-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhu-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 主题")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("Tooltip 组件提供了两个不同的主题："),a("code",[s._v("dark")]),s._v("和"),a("code",[s._v("light")]),s._v("。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"geng-duo-content"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#geng-duo-content","aria-hidden":"true"}},[s._v("¶")]),s._v(" 更多 Content")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"gao-ji-kuo-zhan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#gao-ji-kuo-zhan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 高级扩展")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("transition")]),s._v(" 属性可以定制显隐的动画效果，默认为"),a("code",[s._v("fade-in-linear")]),s._v("。\n如果需要关闭 "),a("code",[s._v("tooltip")]),s._v(" 功能，"),a("code",[s._v("disabled")]),s._v(" 属性可以满足这个需求，它接受一个"),a("code",[s._v("Boolean")]),s._v("，设置为"),a("code",[s._v("true")]),s._v("即可。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("事实上，这是基于 "),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")]),s._v(" 的扩展，你可以自定义任意 Vue-popper 中允许定义的字段。\n当然 Tooltip 组件实际上十分强大，文末的API文档会做一一说明。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"tip"},[a("p",[s._v("tooltip 内不支持 "),a("code",[s._v("router-link")]),s._v(" 组件，请使用 "),a("code",[s._v("vm.$router.push")]),s._v(" 代替。")]),a("p",[s._v("tooltip 内不支持 disabled form 元素，参考"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter"}},[s._v("MDN")]),s._v("，请在 disabled form 元素外层添加一层包裹元素。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("effect")]),a("td",[s._v("默认提供的主题")]),a("td",[s._v("String")]),a("td",[s._v("dark/light")]),a("td",[s._v("dark")])]),a("tr",[a("td",[s._v("content")]),a("td",[s._v("显示的内容，也可以通过 "),a("code",[s._v("slot#content")]),s._v(" 传入 DOM")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("placement")]),a("td",[s._v("Tooltip 的出现位置")]),a("td",[s._v("String")]),a("td",[s._v("top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end")]),a("td",[s._v("bottom")])]),a("tr",[a("td",[s._v("value(v-model)")]),a("td",[s._v("状态是否可见")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("disabled")]),a("td",[s._v("Tooltip 是否可用")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("offset")]),a("td",[s._v("出现位置的偏移量")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("transition")]),a("td",[s._v("定义渐变动画")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[a("code",[s._v("fade-in-linear")])])]),a("tr",[a("td",[s._v("visible-arrow")]),a("td",[s._v("是否显示 Tooltip 箭头，更多参数可见"),a("a",{attrs:{href:"https://github.com/element-component/vue-popper"}},[s._v("Vue-popper")])]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("popper-options")]),a("td",[a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 的参数")]),a("td",[s._v("Object")]),a("td",[s._v("参考 "),a("a",{attrs:{href:"https://popper.js.org/documentation.html"}},[s._v("popper.js")]),s._v(" 文档")]),a("td",[s._v("{ boundariesElement: 'body', gpuAcceleration: false }")])]),a("tr",[a("td",[s._v("open-delay")]),a("td",[s._v("延迟出现，单位毫秒")]),a("td",[s._v("Number")]),a("td",[s._v("—")]),a("td",[s._v("0")])]),a("tr",[a("td",[s._v("manual")]),a("td",[s._v("手动控制模式，设置为 true 后，mouseenter 和 mouseleave 事件将不会生效")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("popper-class")]),a("td",[s._v("为 Tooltip 的 popper 添加类名")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("enterable")]),a("td",[s._v("鼠标是否可进入到 tooltip 中")]),a("td",[s._v("Boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])])])])}]}},function(s,t,a){s.exports=a(485)},function(s,t,a){a(486);var l=a(13)(a(488),a(489),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0;var a=[{label:"一级 1",children:[{label:"二级 1-1",children:[{label:"三级 1-1-1"}]}]},{label:"一级 2",children:[{label:"二级 2-1",children:[{label:"三级 2-1-1"}]},{label:"二级 2-2",children:[{label:"三级 2-2-1"}]}]},{label:"一级 3",children:[{label:"二级 3-1",children:[{label:"三级 3-1-1"}]},{label:"二级 3-2",children:[{label:"三级 3-2-1"}]}]}],l=[{id:1,label:"一级 1",children:[{id:4,label:"二级 1-1",children:[{id:9,label:"三级 1-1-1"},{id:10,label:"三级 1-1-2"}]}]},{id:2,label:"一级 2",children:[{id:5,label:"二级 2-1"},{id:6,label:"二级 2-2"}]},{id:3,label:"一级 3",children:[{id:7,label:"二级 3-1"},{id:8,label:"二级 3-2"}]}],n=1e3,e=[{name:"region1"},{name:"region2"}],i=1,v={label:"name",children:"zones"},_={children:"children",label:"label"};t.default={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){if(0===s.level)return t([{name:"region1"},{name:"region2"}]);if(s.level>3)return t([]);var a;a="region1"===s.data.name||"region2"!==s.data.name&&Math.random()>.5,setTimeout(function(){var s;s=a?[{name:"zone"+i++},{name:"zone"+i++}]:[],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:n++,label:"testtest",children:[]},t)},remove:function(s,t){s.remove(t)},renderContent:function(s,t){var a=this,l=t.node,n=t.data,e=t.store;return s("span",null,[s("span",null,[s("span",null,[l.label])]),s("span",{style:"float: right; margin-right: 20px"},[s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.append(e,n)}}},["Append"]),s("el-button",{attrs:{size:"mini"},on:{click:function(){return a.remove(e,n)}}},["Delete"])])])},filterNode:function(s,t){return!s||t.label.indexOf(s)!==-1}},data:function(){return{data:a,data2:l,regions:e,defaultProps:_,props:v,defaultCheckedKeys:[5],defaultExpandedKeys:[2,3],filterText:""}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("用清晰的层级结构展示信息，可展开或折叠。")]),s._m(1),a("p",[s._v("基础的树形结构展示。")]),a("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: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),a("p",[s._v("适用于需要选择层级时使用。在下例中，由于在点击时才进行该层数据的获取，导致层级不可预知，如果没有下层数据，则点击后下拉按钮会消失。")]),a("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: 'region1' }, { name: 'region2' }]);\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(() => {\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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.regions,props:s.props,load:s.loadNode,lazy:"","show-checkbox":""},on:{"check-change":s.handleCheckChange}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"regions"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"props"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":load")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"loadNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("lazy")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@check-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleCheckChange"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("regions")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v("\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("props")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'name'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zones'")]),s._v("\n        },\n        "),a("span",{staticClass:"hljs-attr"},[s._v("count")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleCheckChange(data, checked, indeterminate) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data, checked, indeterminate);\n      },\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      },\n      loadNode(node, resolve) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level === "),a("span",{staticClass:"hljs-number"},[s._v("0")]),s._v(") {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([{ "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(" }, { "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(" }]);\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.level > "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(") "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" resolve([]);\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" hasChild;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region1'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (node.data.name === "),a("span",{staticClass:"hljs-string"},[s._v("'region2'")]),s._v(") {\n          hasChild = "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v(";\n        } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n          hasChild = "),a("span",{staticClass:"hljs-built_in"},[s._v("Math")]),s._v(".random() > "),a("span",{staticClass:"hljs-number"},[s._v("0.5")]),s._v(";\n        }\n\n        setTimeout("),a("span",{staticClass:"hljs-function"},[a("span",{staticClass:"hljs-params"},[s._v("()")]),s._v(" =>")]),s._v(" {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("var")]),s._v(" data;\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (hasChild) {\n            data = [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'zone'")]),s._v(" + "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".count++\n            }];\n          } "),a("span",{staticClass:"hljs-keyword"},[s._v("else")]),s._v(" {\n            data = [];\n          }\n\n          resolve(data);\n        }, "),a("span",{staticClass:"hljs-number"},[s._v("500")]),s._v(");\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(3),a("p",[s._v("可将 Tree 的某些节点设置为默认展开或默认选中")]),a("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() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,"show-checkbox":"","node-key":"id","default-expanded-keys":[2,3],"default-checked-keys":[5],props:s.defaultProps}})],1),a("p",[s._v("分别通过"),a("code",[s._v("default-expanded-keys")]),s._v("和"),a("code",[s._v("default-checked-keys")]),s._v("设置默认展开和默认选中的节点。需要注意的是，此时必须设置"),a("code",[s._v("node-key")]),s._v("，其值为节点数据中的一个字段名，该字段在整棵树中是唯一的。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"
-},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-expanded-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[2, 3]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":default-checked-keys")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"[5]"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),a("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">通过 node 获取</el-button>\n  <el-button @click="getCheckedKeys">通过 key 获取</el-button>\n  <el-button @click="setCheckedNodes">通过 node 设置</el-button>\n  <el-button @click="setCheckedKeys">通过 key 设置</el-button>\n  <el-button @click="resetChecked">清空</el-button>\n</div>\n\n\n',script:"\n  export default {\n    methods: {\n      getCheckedNodes() {\n        console.log(this.$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        console.log(this.$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        this.$refs.tree.setCheckedNodes([{\n          id: 5,\n          label: '二级 2-1'\n        }, {\n          id: 9,\n          label: '三级 1-1-1'\n        }]);\n      },\n      setCheckedKeys() {\n        this.$refs.tree.setCheckedKeys([3]);\n      },\n      resetChecked() {\n        this.$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{ref:"tree",attrs:{data:s.data2,"show-checkbox":"","default-expand-all":"","node-key":"id","highlight-current":"",props:s.defaultProps}}),a("div",{staticClass:"buttons"},[a("el-button",{on:{click:s.getCheckedNodes}},[s._v("通过 node 获取")]),a("el-button",{on:{click:s.getCheckedKeys}},[s._v("通过 key 获取")]),a("el-button",{on:{click:s.setCheckedNodes}},[s._v("通过 node 设置")]),a("el-button",{on:{click:s.setCheckedKeys}},[s._v("通过 key 设置")]),a("el-button",{on:{click:s.resetChecked}},[s._v("清空")])],1)],1),a("p",[s._v("本例展示如何获取和设置选中节点。获取和设置各有两种方式：通过 node 或通过 key。如果需要通过 key 来获取或设置，则必须设置"),a("code",[s._v("node-key")]),s._v("。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("highlight-current")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"buttons"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedNodes"')]),s._v(">")]),s._v("通过 node 获取"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"getCheckedKeys"')]),s._v(">")]),s._v("通过 key 获取"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedNodes"')]),s._v(">")]),s._v("通过 node 设置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"setCheckedKeys"')]),s._v(">")]),s._v("通过 key 设置"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"resetChecked"')]),s._v(">")]),s._v("清空"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      getCheckedNodes() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedNodes());\n      },\n      getCheckedKeys() {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log("),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.getCheckedKeys());\n      },\n      setCheckedNodes() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedNodes([{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n        }]);\n      },\n      setCheckedKeys() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys(["),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v("]);\n      },\n      resetChecked() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree.setCheckedKeys([]);\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(5),a("p",[s._v("节点的内容支持自定义，可以在节点区添加按钮或图标等内容")]),a("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  let id = 1000;\n\n  export default {\n    data() {\n      return {\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: 'testtest', children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\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={ () => this.append(store, data) }>Append</el-button>\n              <el-button size=\"mini\" on-click={ () => this.remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data2,props:s.defaultProps,"show-checkbox":"","node-key":"id","default-expand-all":"","expand-on-click-node":!1,"render-content":s.renderContent}})],1),a("p",[s._v("使用"),a("code",[s._v("render-content")]),s._v("指定渲染函数，该函数返回需要的节点区内容即可。渲染函数的用法请参考 Vue 文档。注意：由于 jsfiddle 不支持 JSX 语法，所以本例在 jsfiddle 中无法运行。但是在实际的项目中，只要正确地配置了相关依赖，就可以正常运行。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("show-checkbox")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("node-key")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"id"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":expand-on-click-node")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":render-content")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"renderContent"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"actionscript"},[s._v("\n  let id = "),a("span",{staticClass:"hljs-number"},[s._v("1000")]),s._v(";\n\n  export "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        data2: [{\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            children: [{\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              id: "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              label: "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          id: "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          children: [{\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            id: "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            label: "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        defaultProps: {\n          children: "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          label: "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      }\n    },\n\n    methods: {\n      append(store, data) {\n        store.append({ id: id++, label: "),a("span",{staticClass:"hljs-string"},[s._v("'testtest'")]),s._v(", children: [] }, data);\n      },\n\n      remove(store, data) {\n        store.remove(data);\n      },\n\n      renderContent(h, { node, data, store }) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" (\n          <span>\n            <span>\n              <span>{node.label}</span>\n            </span>\n            <span style="),a("span",{staticClass:"hljs-string"},[s._v('"float: right; margin-right: 20px"')]),s._v(">\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".append(store, data) }>Append</el-button>\n              <el-button size="),a("span",{staticClass:"hljs-string"},[s._v('"mini"')]),s._v(" on-click={ () => "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".remove(store, data) }>Delete</el-button>\n            </span>\n          </span>);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("p",[s._v("通过关键字过滤树节点")]),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-input placeholder="输入关键字进行过滤" 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(val) {\n        this.$refs.tree2.filter(val);\n      }\n    },\n\n    methods: {\n      filterNode(value, data) {\n        if (!value) return true;\n        return data.label.indexOf(value) !== -1;\n      }\n    },\n\n    data() {\n      return {\n        filterText: '',\n        data2: [{\n          id: 1,\n          label: '一级 1',\n          children: [{\n            id: 4,\n            label: '二级 1-1',\n            children: [{\n              id: 9,\n              label: '三级 1-1-1'\n            }, {\n              id: 10,\n              label: '三级 1-1-2'\n            }]\n          }]\n        }, {\n          id: 2,\n          label: '一级 2',\n          children: [{\n            id: 5,\n            label: '二级 2-1'\n          }, {\n            id: 6,\n            label: '二级 2-2'\n          }]\n        }, {\n          id: 3,\n          label: '一级 3',\n          children: [{\n            id: 7,\n            label: '二级 3-1'\n          }, {\n            id: 8,\n            label: '二级 3-2'\n          }]\n        }],\n        defaultProps: {\n          children: 'children',\n          label: 'label'\n        }\n      };\n    }\n  };\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-input",{directives:[{name:"model",rawName:"v-model",value:s.filterText,expression:"filterText"}],attrs:{placeholder:"输入关键字进行过滤"},domProps:{value:s.filterText},on:{input:function(t){s.filterText=t}}}),a("el-tree",{ref:"tree2",staticClass:"filter-tree",attrs:{data:s.data2,props:s.defaultProps,"default-expand-all":"","filter-node-method":s.filterNode}})],1),a("p",[s._v("在需要对节点进行过滤时，调用 Tree 实例的"),a("code",[s._v("filter")]),s._v("方法，参数为关键字。需要注意的是，此时需要设置"),a("code",[s._v("filter-node-method")]),s._v("，值为过滤函数。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("placeholder")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"输入关键字进行过滤"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterText"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-input")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filter-tree"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("default-expand-all")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":filter-node-method")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"filterNode"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tree2"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attr"},[s._v("watch")]),s._v(": {\n      filterText(val) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.tree2.filter(val);\n      }\n    },\n\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      filterNode(value, data) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!value) "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" data.label.indexOf(value) !== "),a("span",{staticClass:"hljs-number"},[s._v("-1")]),s._v(";\n      }\n    },\n\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("filterText")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data2")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("4")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("9")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }, {\n              "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("10")]),s._v(",\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-2'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("5")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v("\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("3")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{
-staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("7")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v("\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("id")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("8")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v("\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),a("p",[s._v("每次只打开一个同级树节点展开")]),a("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() {\n      return {\n        data: [{\n          label: '一级 1',\n          children: [{\n            label: '二级 1-1',\n            children: [{\n              label: '三级 1-1-1'\n            }]\n          }]\n        }, {\n          label: '一级 2',\n          children: [{\n            label: '二级 2-1',\n            children: [{\n              label: '三级 2-1-1'\n            }]\n          }, {\n            label: '二级 2-2',\n            children: [{\n              label: '三级 2-2-1'\n            }]\n          }]\n        }, {\n          label: '一级 3',\n          children: [{\n            label: '二级 3-1',\n            children: [{\n              label: '三级 3-1-1'\n            }]\n          }, {\n            label: '二级 3-2',\n            children: [{\n              label: '三级 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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-tree",{attrs:{data:s.data,props:s.defaultProps,accordion:""},on:{"node-click":s.handleNodeClick}})],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":data")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"data"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":props")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"defaultProps"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("accordion")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("@node-click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleNodeClick"')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-tree")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("data")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 1'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 1-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 1-1-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 2'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 2-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 2-2-1'")]),s._v("\n            }]\n          }]\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'一级 3'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-1'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-1-1'")]),s._v("\n            }]\n          }, {\n            "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'二级 3-2'")]),s._v(",\n            "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": [{\n              "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'三级 3-2-1'")]),s._v("\n            }]\n          }]\n        }],\n        "),a("span",{staticClass:"hljs-attr"},[s._v("defaultProps")]),s._v(": {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("children")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'children'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("label")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'label'")]),s._v("\n        }\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleNodeClick(data) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(data);\n      }\n    }\n  };\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(8),s._m(9),s._m(10),s._m(11),s._m(12),s._m(13),s._m(14),s._m(15),s._m(16)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"tree-shu-xing-kong-jian"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tree-shu-xing-kong-jian","aria-hidden":"true"}},[s._v("¶")]),s._v(" Tree 树形控件")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ji-chu-yong-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ji-chu-yong-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 基础用法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"ke-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ke-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 可选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"mo-ren-zhan-kai-he-mo-ren-xuan-zhong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#mo-ren-zhan-kai-he-mo-ren-xuan-zhong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 默认展开和默认选中")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shu-jie-dian-de-xuan-ze"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shu-jie-dian-de-xuan-ze","aria-hidden":"true"}},[s._v("¶")]),s._v(" 树节点的选择")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zi-ding-yi-jie-dian-nei-rong"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ding-yi-jie-dian-nei-rong","aria-hidden":"true"}},[s._v("¶")]),s._v(" 自定义节点内容")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"jie-dian-guo-lu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#jie-dian-guo-lu","aria-hidden":"true"}},[s._v("¶")]),s._v(" 节点过滤")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-feng-qin-mo-shi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-feng-qin-mo-shi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手风琴模式")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attributes"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attributes","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attributes")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("data")]),a("td",[s._v("展示数据")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("empty-text")]),a("td",[s._v("内容为空的时候展示的文本")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("node-key")]),a("td",[s._v("每个树节点用来作为唯一标识的属性，整颗树应该是唯一的")]),a("td",[s._v("String")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("props")]),a("td",[s._v("配置选项，具体看下表")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("load")]),a("td",[s._v("加载子树数据的方法")]),a("td",[s._v("function(node, resolve)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("render-content")]),a("td",[s._v("树节点的内容区的渲染 Function")]),a("td",[s._v("Function(h, { node }")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("highlight-current")]),a("td",[s._v("是否高亮当前选中节点，默认值是 false。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("current-node-key")]),a("td",[s._v("当前选中节点的 key，只写属性")]),a("td",[s._v("string, number")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("default-expand-all")]),a("td",[s._v("是否默认展开所有节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("expand-on-click-node")]),a("td",[s._v("是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("auto-expand-parent")]),a("td",[s._v("展开子节点的时候是否自动展开父节点")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("default-expanded-keys")]),a("td",[s._v("默认展开的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("show-checkbox")]),a("td",[s._v("节点是否可被选择")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("check-strictly")]),a("td",[s._v("在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("default-checked-keys")]),a("td",[s._v("默认勾选的节点的 key 的数组")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("filter-node-method")]),a("td",[s._v("对树节点进行筛选时执行的方法，返回 true 表示这个节点可以显示，返回 false 则表示这个节点会被隐藏")]),a("td",[s._v("Function(value, data, node)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("accordion")]),a("td",[s._v("是否每次只打开一个同级树节点展开")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("indent")]),a("td",[s._v("相邻级节点间的水平缩进，单位为像素")]),a("td",[s._v("number")]),a("td",[s._v("—")]),a("td",[s._v("16")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"props"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#props","aria-hidden":"true"}},[s._v("¶")]),s._v(" props")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("label")]),a("td",[s._v("指定节点标签为节点对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("children")]),a("td",[s._v("指定子树为节点对象的某个属性值")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"fang-fa"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#fang-fa","aria-hidden":"true"}},[s._v("¶")]),s._v(" 方法")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[a("code",[s._v("Tree")]),s._v(" 拥有如下方法，返回目前被选中的节点数组：")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("filter")]),a("td",[s._v("对树节点进行筛选操作")]),a("td",[s._v("接收一个任意类型的参数，该参数会在 filter-node-method 中作为第一个参数")])]),a("tr",[a("td",[s._v("getCheckedNodes")]),a("td",[s._v("若节点可被选择（即 "),a("code",[s._v("show-checkbox")]),s._v(" 为 "),a("code",[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅返回被选中的叶子节点，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedNodes")]),a("td",[s._v("设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(nodes) 接收勾选节点数据的数组")])]),a("tr",[a("td",[s._v("getCheckedKeys")]),a("td",[s._v("若节点可被选择（即 "),a("code",[s._v("show-checkbox")]),s._v(" 为 "),a("code",[s._v("true")]),s._v("），则返回目前被选中的节点所组成的数组")]),a("td",[s._v("(leafOnly) 接收一个 boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅返回被选中的叶子节点的 keys，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setCheckedKeys")]),a("td",[s._v("通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(keys, leafOnly) 接收两个参数，1. 勾选节点的 key 的数组 2. boolean 类型的参数，若为 "),a("code",[s._v("true")]),s._v(" 则仅设置叶子节点的选中状态，默认值为 "),a("code",[s._v("false")])])]),a("tr",[a("td",[s._v("setChecked")]),a("td",[s._v("通过 key / data 设置某个节点的勾选状态，使用此方法必须设置 node-key 属性")]),a("td",[s._v("(key/data, checked, deep) 接收三个参数，1. 勾选节点的 key 或者 data 2. boolean 类型，节点是否选中  3. boolean 类型，是否设置子节点 ，默认为 false")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"events"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#events","aria-hidden":"true"}},[s._v("¶")]),s._v(" Events")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("事件名称")]),a("th",[s._v("说明")]),a("th",[s._v("回调参数")])])]),a("tbody",[a("tr",[a("td",[s._v("node-click")]),a("td",[s._v("节点被点击时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("check-change")]),a("td",[s._v("节点选中状态发生变化时的回调")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点")])]),a("tr",[a("td",[s._v("current-change")]),a("td",[s._v("当前选中节点变化时触发的事件")]),a("td",[s._v("共两个参数，依次为：当前节点的数据，当前节点的 Node 对象")])]),a("tr",[a("td",[s._v("node-expand")]),a("td",[s._v("节点被展开时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])]),a("tr",[a("td",[s._v("node-collapse")]),a("td",[s._v("节点被关闭时触发的事件")]),a("td",[s._v("共三个参数，依次为：传递给 "),a("code",[s._v("data")]),s._v(" 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。")])])])])}]}},function(s,t,a){s.exports=a(491)},function(s,t,a){a(492);var l=a(13)(null,a(494),null,null);s.exports=l.exports},function(s,t){},,function(s,t){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[a("h2",{attrs:{id:"typography-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#typography-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" Typography 字体")]),a("p",[s._v("我们对字体进行统一规范，力求在各个操作系统下都有最佳展示效果。")]),a("h3",{attrs:{id:"zhong-wen-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhong-wen-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 中文字体")]),a("div",{staticClass:"demo-typo-box typo-PingFang"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("PingFang SC")])]),a("div",{staticClass:"demo-typo-box typo-Hiragino"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Hiragino Sans GB")])]),a("div",{staticClass:"demo-typo-box typo-Microsoft"},[s._v("\n  和畅惠风\n  "),a("div",{staticClass:"name"},[s._v("Microsoft YaHei")])]),a("h3",{attrs:{id:"ying-wen-shu-zi-zi-ti"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#ying-wen-shu-zi-zi-ti","aria-hidden":"true"}},[s._v("¶")]),s._v(" 英文／数字字体")]),a("div",{staticClass:"demo-typo-box typo-Helvetica-neue"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica Neue")])]),a("div",{staticClass:"demo-typo-box typo-Helvetica"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Helvetica")])]),a("div",{staticClass:"demo-typo-box typo-Arial"},[s._v("\n  RGag\n  "),a("div",{staticClass:"name"},[s._v("Arial")])]),a("h3",{attrs:{id:"font-family-dai-ma"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#font-family-dai-ma","aria-hidden":"true"}},[s._v("¶")]),s._v(" Font-family 代码")]),a("pre",[a("code",{staticClass:"hljs language-css"},[a("span",{staticClass:"hljs-selector-tag"},[s._v("font-family")]),s._v(': "'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Neue")]),s._v('",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Helvetica")]),s._v(',"'),a("span",{staticClass:"hljs-selector-tag"},[s._v("PingFang")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("SC")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Hiragino")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("Sans")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("GB")]),s._v('","'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Microsoft")]),s._v(" "),a("span",{staticClass:"hljs-selector-tag"},[s._v("YaHei")]),s._v('","微软雅黑",'),a("span",{staticClass:"hljs-selector-tag"},[s._v("Arial")]),s._v(","),a("span",{staticClass:"hljs-selector-tag"},[s._v("sans-serif")]),s._v(";\n")])]),a("h3",{attrs:{id:"zi-ti-shi-yong-gui-fan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zi-ti-shi-yong-gui-fan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 字体使用规范")]),a("table",{staticClass:"demo-typo-size"},[a("tbody",[a("tr",[a("td",{staticClass:"h1"},[s._v("主标题")]),a("td",{staticClass:"h1"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("20px  Extra large")])]),a("tr",[a("td",{staticClass:"h2"},[s._v("标题")]),a("td",{staticClass:"h2"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("18px large")])]),a("tr",[a("td",{staticClass:"h3"},[s._v("小标题")]),a("td",{staticClass:"h3"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("16px Medium")])]),a("tr",[a("td",{staticClass:"text-regular"},[s._v("正文")]),a("td",{staticClass:"text-regular"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("14px Small")])]),a("tr",[a("td",{staticClass:"text-small"},[s._v("正文（小）")]),a("td",{staticClass:"text-small"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("13px Extra Small")])]),a("tr",[a("td",{staticClass:"text-smaller"},[s._v("辅助文字")]),a("td",{staticClass:"text-smaller"},[s._v("用 Element 快速搭建页面")]),a("td",{staticClass:"color-dark-light"},[s._v("12px Extra Extra Small")])])])])])}]}},function(s,t,a){s.exports=a(496)},function(s,t,a){a(497);var l=a(13)(a(499),a(500),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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!(s.size>4e7)||(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,a=s.size/1024/1024<2;return t||this.$message.error("上传头像图片只能是 JPG 格式!"),a||this.$message.error("上传头像图片大小不能超过 2MB!"),t&&a},handleChange:function(s,t){this.fileList3=t.slice(-3)}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("section",[s._m(0),a("p",[s._v("通过点击或者拖拽上传文件")]),s._m(1),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("p",[s._v("通过 slot 你可以传入自定义的上传按钮类型和文字提示。")]),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(2),s._m(3),a("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() {\n      return {\n        imageUrl: ''\n      };\n    },\n    methods: {\n      handleAvatarSuccess(res, file) {\n        this.imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        const isJPG = file.type === 'image/jpeg';\n        const isLt2M = file.size / 1024 / 1024 < 2;\n\n        if (!isJPG) {\n          this.$message.error('上传头像图片只能是 JPG 格式!');\n        }\n        if (!isLt2M) {\n          this.$message.error('上传头像图片大小不能超过 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"}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"avatar-uploader",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","show-file-list":!1,"on-success":s.handleAvatarSuccess,"before-upload":s.beforeAvatarUpload}},[s.imageUrl?a("img",{staticClass:"avatar",attrs:{src:s.imageUrl}}):a("i",{staticClass:"el-icon-plus avatar-uploader-icon"})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar-uploader"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":show-file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-success")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleAvatarSuccess"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":before-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"beforeAvatarUpload"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-if")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"imageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"avatar"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-else")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus avatar-uploader-icon"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),a("span",{
-staticClass:"css"},[s._v("\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("1px")]),s._v(" dashed "),a("span",{staticClass:"hljs-number"},[s._v("#d9d9d9")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-radius")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("6px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("cursor")]),s._v(": pointer;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("position")]),s._v(": relative;\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("overflow")]),s._v(": hidden;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader")]),s._v(" "),a("span",{staticClass:"hljs-selector-class"},[s._v(".el-upload")]),a("span",{staticClass:"hljs-selector-pseudo"},[s._v(":hover")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("border-color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#20a0ff")]),s._v(";\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar-uploader-icon")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("font-size")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("28px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("color")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("#8c939d")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("line-height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("text-align")]),s._v(": center;\n  }\n  "),a("span",{staticClass:"hljs-selector-class"},[s._v(".avatar")]),s._v(" {\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("width")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("height")]),s._v(": "),a("span",{staticClass:"hljs-number"},[s._v("178px")]),s._v(";\n    "),a("span",{staticClass:"hljs-attribute"},[s._v("display")]),s._v(": block;\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("style")]),s._v(">")]),s._v("\n\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("imageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleAvatarSuccess(res, file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".imageUrl = URL.createObjectURL(file.raw);\n      },\n      beforeAvatarUpload(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isJPG = file.type === "),a("span",{staticClass:"hljs-string"},[s._v("'image/jpeg'")]),s._v(";\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("const")]),s._v(" isLt2M = file.size / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" / "),a("span",{staticClass:"hljs-number"},[s._v("1024")]),s._v(" < "),a("span",{staticClass:"hljs-number"},[s._v("2")]),s._v(";\n\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isJPG) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'上传头像图片只能是 JPG 格式!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("if")]),s._v(" (!isLt2M) {\n          "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$message.error("),a("span",{staticClass:"hljs-string"},[s._v("'上传头像图片大小不能超过 2MB!'")]),s._v(");\n        }\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" isJPG && isLt2M;\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(4),s._m(5),a("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() {\n      return {\n        dialogImageUrl: '',\n        dialogVisible: false\n      };\n    },\n    methods: {\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        this.dialogImageUrl = file.url;\n        this.dialogVisible = true;\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{attrs:{action:"https://jsonplaceholder.typicode.com/posts/","list-type":"picture-card","on-preview":s.handlePictureCardPreview,"on-remove":s.handleRemove}},[a("i",{staticClass:"el-icon-plus"})]),a("el-dialog",{directives:[{name:"model",rawName:"v-model",value:s.dialogVisible,expression:"dialogVisible"}],attrs:{size:"tiny"},domProps:{value:s.dialogVisible},on:{input:function(t){s.dialogVisible=t}}},[a("img",{attrs:{width:"100%",src:s.dialogImageUrl,alt:""}})])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture-card"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePictureCardPreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-plus"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("v-model")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogVisible"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tiny"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("img")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("width")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"100%"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v(":src")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"dialogImageUrl"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("alt")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('""')]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-dialog")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogImageUrl")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("''")]),s._v(",\n        "),a("span",{staticClass:"hljs-attr"},[s._v("dialogVisible")]),s._v(": "),a("span",{staticClass:"hljs-literal"},[s._v("false")]),s._v("\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePictureCardPreview(file) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogImageUrl = file.url;\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".dialogVisible = "),a("span",{staticClass:"hljs-literal"},[s._v("true")]),s._v(";\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(6),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\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(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList2,"list-type":"picture"}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList2"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("list-type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"picture"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList2")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(7),s._m(8),a("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">点击上传</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n\n',script:"\n  export default {\n    data() {\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(file, fileList) {\n        this.fileList3 = fileList.slice(-3);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-change":s.handleChange,"file-list":s.fileList3}},[a("el-button",{attrs:{size:"small",type:"primary"}},[s._v("点击上传")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-change")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleChange"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList3"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList3")]),s._v(": [{\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }, {\n          "),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v(",\n          "),a("span",{staticClass:"hljs-attr"},[s._v("status")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'finished'")]),s._v("\n        }]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      handleChange(file, fileList) {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".fileList3 = fileList.slice("),a("span",{staticClass:"hljs-number"},[s._v("-3")]),s._v(");\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(9),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" multiple>\n  <i class="el-icon-upload"></i>\n  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>\n  <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>\n</el-upload>\n',script:null,style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{staticClass:"upload-demo",attrs:{drag:"",action:"https://jsonplaceholder.typicode.com/posts/",multiple:""}},[a("i",{staticClass:"el-icon-upload"}),a("div",{staticClass:"el-upload__text"},[s._v("将文件拖到此处，或"),a("em",[s._v("点击上传")])]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])])],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("drag")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("multiple")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-icon-upload"')]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("i")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__text"')]),s._v(">")]),s._v("将文件拖到此处，或"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),s._v("点击上传"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("em")]),s._v(">")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n")])])])]),s._m(10),a("demo-block",{staticClass:"demo-box",attrs:{jsfiddle:{html:'<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">\n  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>\n  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>\n  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过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      submitUpload() {\n        this.$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        console.log(file, fileList);\n      },\n      handlePreview(file) {\n        console.log(file);\n      }\n    }\n  }\n",style:null}}},[a("div",{staticClass:"source",slot:"source"},[a("el-upload",{ref:"upload",staticClass:"upload-demo",attrs:{action:"https://jsonplaceholder.typicode.com/posts/","on-preview":s.handlePreview,"on-remove":s.handleRemove,"file-list":s.fileList,"auto-upload":!1}},[a("el-button",{attrs:{size:"small",type:"primary"},slot:"trigger"},[s._v("选取文件")]),a("el-button",{staticStyle:{"margin-left":"10px"},attrs:{size:"small",type:"success"},on:{click:s.submitUpload}},[s._v("上传到服务器")]),a("div",{staticClass:"el-upload__tip",slot:"tip"},[s._v("只能上传jpg/png文件，且不超过500kb")])],1)],1),a("div",{staticClass:"highlight",slot:"highlight"},[a("pre",[a("code",{staticClass:"hljs language-html"},[a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload-demo"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("ref")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"upload"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v("action")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"https://jsonplaceholder.typicode.com/posts/"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-preview")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handlePreview"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":on-remove")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"handleRemove"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":file-list")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"fileList"')]),s._v("\n  "),a("span",{staticClass:"hljs-attr"},[s._v(":auto-upload")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"false"')]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"trigger"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"primary"')]),s._v(">")]),s._v("选取文件"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("style")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"margin-left: 10px;"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("size")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"small"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("type")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"success"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("@click")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"submitUpload"')]),s._v(">")]),s._v("上传到服务器"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-button")]),s._v(">")]),s._v("\n  "),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("slot")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"tip"')]),s._v(" "),a("span",{staticClass:"hljs-attr"},[s._v("class")]),s._v("="),a("span",{staticClass:"hljs-string"},[s._v('"el-upload__tip"')]),s._v(">")]),s._v("只能上传jpg/png文件，且不超过500kb"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("div")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("el-upload")]),s._v(">")]),s._v("\n"),a("span",{staticClass:"hljs-tag"},[s._v("<"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),a("span",{staticClass:"javascript"},[s._v("\n  "),a("span",{staticClass:"hljs-keyword"},[s._v("export")]),s._v(" "),a("span",{staticClass:"hljs-keyword"},[s._v("default")]),s._v(" {\n    data() {\n      "),a("span",{staticClass:"hljs-keyword"},[s._v("return")]),s._v(" {\n        "),a("span",{staticClass:"hljs-attr"},[s._v("fileList")]),s._v(": [{"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}, {"),a("span",{staticClass:"hljs-attr"},[s._v("name")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'food2.jpeg'")]),s._v(", "),a("span",{staticClass:"hljs-attr"},[s._v("url")]),s._v(": "),a("span",{staticClass:"hljs-string"},[s._v("'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'")]),s._v("}]\n      };\n    },\n    "),a("span",{staticClass:"hljs-attr"},[s._v("methods")]),s._v(": {\n      submitUpload() {\n        "),a("span",{staticClass:"hljs-keyword"},[s._v("this")]),s._v(".$refs.upload.submit();\n      },\n      handleRemove(file, fileList) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file, fileList);\n      },\n      handlePreview(file) {\n        "),a("span",{staticClass:"hljs-built_in"},[s._v("console")]),s._v(".log(file);\n      }\n    }\n  }\n")]),a("span",{staticClass:"hljs-tag"},[s._v("</"),a("span",{staticClass:"hljs-name"},[s._v("script")]),s._v(">")]),s._v("\n")])])])]),s._m(11),s._m(12),s._m(13),s._m(14)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h2",{attrs:{id:"upload-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#upload-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" Upload 上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"dian-ji-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#dian-ji-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 点击上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"yong-hu-tou-xiang-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#yong-hu-tou-xiang-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 用户头像上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("before-upload")]),s._v(" 限制用户上传的图片格式和大小。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"zhao-pian-qiang"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#zhao-pian-qiang","aria-hidden":"true"}},[s._v("¶")]),s._v(" 照片墙")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("使用 "),a("code",[s._v("list-type")]),s._v(" 属性来设置文件列表的样式。")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tu-pian-lie-biao-suo-lue-tu"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tu-pian-lie-biao-suo-lue-tu","aria-hidden":"true"
-}},[s._v("¶")]),s._v(" 图片列表缩略图")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shang-chuan-wen-jian-lie-biao-kong-zhi"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shang-chuan-wen-jian-lie-biao-kong-zhi","aria-hidden":"true"}},[s._v("¶")]),s._v(" 上传文件列表控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("p",[s._v("通过 "),a("code",[s._v("on-change")]),s._v(" 钩子函数来对列表进行控制")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"tuo-zhuai-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#tuo-zhuai-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 拖拽上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"shou-dong-shang-chuan"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#shou-dong-shang-chuan","aria-hidden":"true"}},[s._v("¶")]),s._v(" 手动上传")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"attribute"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#attribute","aria-hidden":"true"}},[s._v("¶")]),s._v(" Attribute")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("参数")]),a("th",[s._v("说明")]),a("th",[s._v("类型")]),a("th",[s._v("可选值")]),a("th",[s._v("默认值")])])]),a("tbody",[a("tr",[a("td",[s._v("action")]),a("td",[s._v("必选参数, 上传的地址")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("headers")]),a("td",[s._v("可选参数, 设置上传的请求头部")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("multiple")]),a("td",[s._v("可选参数, 是否支持多选文件")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("data")]),a("td",[s._v("可选参数, 上传时附带的额外参数")]),a("td",[s._v("object")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("name")]),a("td",[s._v("可选参数, 上传的文件字段名")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("file")])]),a("tr",[a("td",[s._v("with-credentials")]),a("td",[s._v("支持发送 cookie 凭证信息")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("show-file-list")]),a("td",[s._v("是否显示已上传文件列表")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("drag")]),a("td",[s._v("是否启用拖拽上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("false")])]),a("tr",[a("td",[s._v("accept")]),a("td",[s._v("可选参数, 接受上传的"),a("a",{attrs:{href:"https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept"}},[s._v("文件类型")]),s._v("（thumbnail-mode 模式下此参数无效）")]),a("td",[s._v("string")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-preview")]),a("td",[s._v("可选参数, 点击已上传的文件链接时的钩子, 可以通过 file.response 拿到服务端返回数据")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-remove")]),a("td",[s._v("可选参数, 文件列表移除文件时的钩子")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-success")]),a("td",[s._v("可选参数, 文件上传成功时的钩子")]),a("td",[s._v("function(response, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-error")]),a("td",[s._v("可选参数, 文件上传失败时的钩子")]),a("td",[s._v("function(err, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-progress")]),a("td",[s._v("可选参数, 文件上传时的钩子")]),a("td",[s._v("function(event, file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("on-change")]),a("td",[s._v("可选参数, 文件状态改变时的钩子，上传成功或者失败时都会被调用")]),a("td",[s._v("function(file, fileList)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("before-upload")]),a("td",[s._v("可选参数, 上传文件之前的钩子，参数为上传的文件，若返回 false 或者 Promise 则停止上传。")]),a("td",[s._v("function(file)")]),a("td",[s._v("—")]),a("td",[s._v("—")])]),a("tr",[a("td",[s._v("list-type")]),a("td",[s._v("文件列表的类型")]),a("td",[s._v("string")]),a("td",[s._v("text/picture/picture-card")]),a("td",[s._v("text")])]),a("tr",[a("td",[s._v("auto-upload")]),a("td",[s._v("是否在选取文件后立即进行上传")]),a("td",[s._v("boolean")]),a("td",[s._v("—")]),a("td",[s._v("true")])]),a("tr",[a("td",[s._v("file-list")]),a("td",[s._v("上传的文件列表, 例如: [{name: 'food.jpeg', url: 'https://fuss10.elemecdn.com/3/63/4e7f3a15429bfda99bce42a18cdd1jpeg.jpeg?imageMogr2/thumbnail/360x360/format/webp/quality/100'}]")]),a("td",[s._v("array")]),a("td",[s._v("—")]),a("td",[s._v("[]")])]),a("tr",[a("td",[s._v("http-request")]),a("td",[s._v("覆盖默认的上传行为，可以自定义上传的实现")]),a("td",[s._v("function")]),a("td",[s._v("—")]),a("td",[s._v("—")])])])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("h3",{attrs:{id:"methods"}},[a("a",{staticClass:"header-anchor",attrs:{href:"#methods","aria-hidden":"true"}},[s._v("¶")]),s._v(" Methods")])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("table",{staticClass:"table"},[a("thead",[a("tr",[a("th",[s._v("方法名")]),a("th",[s._v("说明")]),a("th",[s._v("参数")])])]),a("tbody",[a("tr",[a("td",[s._v("clearFiles")]),a("td",[s._v("清空已上传的文件列表")]),a("td",[s._v("—")])])])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/guide.vue":502,"./zh-CN/guide.vue":507};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=501},function(s,t,a){a(503);var l=a(13)(a(505),a(506),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"Design Disciplines"},{path:"/nav",name:"Navigation"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){a(508);var l=a(13)(a(510),a(511),null,null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={data:function(){return{lang:this.$route.meta.lang,navsData:[{path:"/design",name:"设计原则"},{path:"/nav",name:"导航"}]}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"page-container page-guide"},[a("el-row",[a("el-col",{attrs:{xs:24,sm:5}},[a("side-nav",{attrs:{data:s.navsData,base:"/"+s.lang+"/guide"}})],1),a("el-col",{attrs:{xs:24,sm:19}},[a("router-view",{staticClass:"content"})],1)],1)],1)},staticRenderFns:[]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/design.vue":513,"./zh-CN/design.vue":521};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=512},function(s,t,a){a(514);var l=a(13)(null,a(516),"data-v-f413aa2a",null);s.exports=l.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Design Disciplines")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(517),alt:"Consistency"}}),l("h4",[s._v("Consistency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(518),alt:"Feedback"}}),l("h4",[s._v("Feedback")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(519),alt:"Efficiency"}}),l("h4",[s._v("Efficiency")]),l("span")])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(520),alt:"Controllability"}}),l("h4",[s._v("Controllability")]),l("span")])])],1),l("h3",[s._v("Consistency")]),s._m(0),l("h3",[s._v("Feedback")]),s._m(1),l("h3",[s._v("Efficiency")]),s._m(2),l("h3",[s._v("Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("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.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Operation feedback: ")]),s._v("enable the users to clearly perceive their operations by style updates and interactive effects.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Simplify the process: ")]),s._v("keep operating process simple and intuitive.")]),a("li",[a("strong",[s._v("Definite and clear: ")]),s._v("enunciate your intentions clearly so that the users can quickly understand and make decisions.")]),a("li",[a("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,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("Decision making: ")]),s._v("giving advices about operations is acceptable, but do not make decisions for the users.")]),a("li",[a("strong",[s._v("Controlled consequences: ")]),s._v("users should be granted the freedom to operate, including canceling, aborting or terminating current operation.")])])}]}},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAESRJREFUeAHtnW2IHdUZx88zu+vuvZtk12gikYoIyoJFEPvBqEVCrLTWqKWIUomCGPxoIa1WpSBS32ratM3HNlKIYjHkQ9VYC9YgoWryoSJtFZYIQQSDiYm72d177ya78/T/zL1ze/fufZm5d2bumZln4DJv5+U5/+d3z5kzc2YOGV1WKHCW+WJTNlPLZKaI3SnDZoMhWov1Wibjram2NrKWhc0ctue4tqba2jDL8VNMzvQQm2lTMNPriL5ekWHOdyiv5Wfm8dlFcxPguY5cd4qJBLYpNrw+Tk3I0BlAOU3M0+w409j+aGLUvE9EC3Hma2vauQEQwI3OV8zmJdfdihptKwp+PY6N2OAYwHeejTmKGvPQsOMcWjNmjuDYog22xW1DpgGcrfBVaBbvhmNvgYNvxLoQt6CRpE9UhmM+wB/lXTT3BybG6Fgk6VqYSOYAnGVezyVzryG+HzXcDRZqHtok1IYfGqaXqWhemyA04RlaMgGgNKUzJXM7ATr4Zhv2L8iQj+pFAYjnsHOQAeNk0bwlTXf9ZEo3Ug3gPPMlS2V3J2qHh9B5uCilPujJbHRmTqOWf2m44OxeQ/RVT4lYECmVAJZKfNmicR+DE3agthuzQMeBmYBasII/395R47xYLNIXAzOkx4xTBSA6FVfysvs4Ls4fkGa3xzJnMprXHDPvoyHnBXRaPktLIVMBoNebdd2njaF7AN5QWsQdhJ0AcRl3xveT4zyVht6z1QACtsJMyX0Soj6K7dFBODSteUKzRWi2a7LoPIftsq3lsBbAsxXe5rq8ByJeYat4abAL8B13HHpk3RgdtNFe6wAsl/nyCvMfcNP4LhsFS61NRK+PEf20UKDPbSqDY4sxqOmGZsr8OOD7VOGLwSv4Q4u2orFoHUMOPSVpRQ24wLzpfJlfhTBbeiqFRgqlAJrl90YKdN840YlQEWMIPHAAZyp8q1nmV3Ava2MM5dMk2yiAe6gnzRBtnxyjd9oESeTwwJpgr8ldWH7GuPx3hS8RX6/IxNMc2s/AB4NskgdSAy4s8KXniP+Ca72bV6iiO4NRgOjwBUw/GR+nL5M2IHEAZ0ss4/DexD9wQ9KF1fzaK4Am+RSuDe+YKNLR9qGiP5NoE4wnGre5hg8pfNE7st8UxSfiG/FRv2mFiZ8YgLNl3s4uv4FmtxjGQA2boALwjfhIfJVUrokA+E2Jd6LZ3YffcFIF03x6U0B8JL4Sn/WWQrhYsV4DoiA0W3Z/jWHxj4YzS0PboABeB9g1UXB+gWtDvNEQzxIbgB58JfdPsPyheEzXVJNQAIDsnSg6D8cFYWxNsFfzKXxJMBJrHqhAdogv48oklhrQu35g97dxGa3pDkABcn52YZF2R51z5AB6vd1qhyPytKMuvKYXXAFpgvF7YKJArwSP1T1kpJDIPSTpxktPqnvWGiJtCgDAJXLoToy0fjsq2yMDUJ5wyI1Mvc8XlWssTYeo5BjaGtUTk0gAlGe75w1/rE84LIUmYrPksd2IoWujeHbcdy8Yze2QDCxQ+CL2ssXJia89n0cwsLVvAGdLeFtNR7VYjEtMpsHnnu/7TL6vJtgbTCrj+Zj7BrnPcmj0ASiATolrHPpBP4NaewbQG0Zf8q77dCTzAJxvS5YysnqkiOvBHof391RzyXWf9w6HDqO3hYOB2YHrwY2193l6etGpJwBnK0ZeFN8ysFJrxlYpICwIE70YFboJrr23K69O6ri+XhTPahzcH8R7x1eHfe84dA2Id0v3KHxZpaiPcqFC8tgImUQoAOVzGYDvzpB5aPC8KAA2PEZClDdwE4x2voCBBp9gfUWI9DVozhTArZnjGLDwbawDfRApcA0oX6lS+HJGUw/FFUaElaBRA9WA1e/z8X+ReCa/vRxULA0XTAHUfosYNXNNkO8TBqoBGR+HVPiCiR91qMMffh51krGnB1ZGhZkgGXUFELXflfJl0iCJaZjoFRAA0wihMFNlp7MmXQGUbzKD6J7ucnfOWs8GVSCNEAoz3ve8uxSyI4DyNXr5IHiXNPR0AgqkEUJhx2Oogz4dAZSpEECyfo2+g4BJnkobhMKOMNRJo7YAyiQwGOmwo1NkPZe8AmmDUBgSltop1RZAmYEIBOd6Eph2og36eJogFIa82azaiNYSQK/ZxfRXbeLoYQsUSBOE3lRqbS7lWgIoE/9hnFeu5l6zgKnQJqQFQmFJmGpVwJYA1madbBVej1mmQFogbMfUqkdx3ny7ZT6BZtjKx26fHT9j/vbOMXN2PhcTigfG/eYbLjfys3XB47lzVKBNzfMdr6oBZbJnW+ETcRW+1ojZXhMKU95E4k3mrwIQc9DqjecmkXQ3IgWqE4qvSGwFgN6oF+bNK0JYtvPDW68y69bovIXNbrG9CRZ7UQveIIw12r7iGhDTOD2BUQzPNQbQ7cEq8Mzuw10NSAN8fiEwjeyTkwV63t9fUQMC0Vv8E7pOhwJpgs9TtImxOoCoHkfxNcwb0yG7WikKpA4+2CyMCWu+B+sAzlfMZtSABf+Eru1WII3weYqCMY+1mrx1AJdcd6vdkqt1vgKpha9WgEbW6gBi7JYC6HvY4nXa4fOkbWDNAxBt8ji6w9dbrLuaBgUyAR/KIawJc+JUD8DZRXMTDujAU1HE0iUr8Im8wpowJ9vVJpjNdbKji50KZAm+usI15jwAyXWn6id0wyoFMgkfFPaZq14DEimAVmH3f2MEwCwumHTEY85vghXALHrZ5jKx8Zijs8wXL5fcUzbbqrZlU4GhorPBMeUqidksopbKagXAnrNMCqDVTsqwccKeQ6w94Az72OqiCXsA0Og0C1a7KbvGCXsOusNrs1tELZnNCgh7DgZoKYA2eynLtoE9zLypAGbZx1aXDew5zGaN1UaqcZlVQNhzSGvAzDrY9oIJe3oNaLuXsmyfXgNm2bspKJtXA6bATjUxuwpIEzyX3eJpyaxWAOwN4zbMHCBMzbcA/3nCmGf+Rear8oqPOtR1vqTA5pffYfPdTfVDHTfyll5HMZI+CfbomwX33xilf03Sefea3/cPkjnZBj4/TYHw79vwCnSAJW/pBZAkwSD0H7kRnaomuBt8ol672rGVsnlLr5UGAzsG9mQwQqoAHJhYmnHkCgh7qasBI1dBExycAtUakOcHZ4HmnGsFmOcwHMuczLUIWvjBKUDmFAB0pgdngeacZwWEPWeIjQKYZwoGWHZhzzEFBXCAPsh31mDPWUf0NSaUO5NvJbT0SSsgzAl71S8jkNaCSTsg9/nVmKt+nIhZrwNzT0SyAlCNuerHiRztCScrv+bGNeb8JvgjlUQVSFQBMh5zHoATo+Z9TCZ3PlEDNLPcKiCsCXMiQPUakGgBg5eO5lYRLXiiCghrgHBBMq02wbLFfEhWuqgCsSvQwFodwGHHUQBjV14zEAUaWasDuGbMHMFcIWWVSBWIVQEw5rFWy6QOINrkRbxl8UGsmWviuVdAGBPWfCHqAHoHiN71T+haFYhFgSbGVgCITyUciCVTTVQVqCnQzNgKACfG6Biqxw9VLVUgDgWELWGsMe0VAHonmF5uDKDbqkBkCrRgaxWAVDSvgdRzkWWqCakCUECYEraaxVgF4AR5YwMPNgfUfVWgTwUO1thakcwqAOUst6gqV8TSHVUgpALtmGoJ4GTRvIURq6dD5qHBVYGWCghLwlSrky0BRHt93hC/1CqCHlMFQisAljymWkRsCaCEGy44uxGp0iKOHlIFAisgDAlL7SK0BXAN0VdseG+7iHpcFQiigDAkLLUL2xZAiTBqnBfbVZ3tEtTjqoCvgLAjDPn7rdYdASwW6Qt0ife1iqjHVIGuCoAdj6EOATsCKPFoyHkBJC93SCPRU8tL3e+RBwnjGx0kbJAwaUnPtzPutTAj7HTLpyuAeHb3Ge4M7u+WUFLnT5/4wnQCQs5JmKBL3tILqkv/4Xh/lZ3OKQ13Pl09S47zlHH5x8w8GiR8nGFK82dN6dgnkWWRt/QiE65DQqj9FsmhpzoEqZ/qWgNKSBnBAPh21WPphirQQQFhpXnUS7vggQCUyJNF5zmQfbxdQkkdv3TtSNesNgUI4yeSt/T8cse1FkaElaDpBwYQCZcdhx4JmnBc4X637VumEzRy7vcIE3TJW3pBdek1nDAirASN33qyjQ6xvym5f8Wtmbs6BNFTeVWA6PULi86PwhQ/NIDlMl9eYf4UEBbDZKRhM64AUWmM6OpCgT4PU9LATbCfqGSAKvZX/r6uVQFRQJgIC58Xrxf50MsZmi3zP7De0kt8jZMtBQDfexMF+h7WoR9YhG6CfekWmDedL/HHeNi80T+m6/wpgLF+J0eKdO04EWbxC7+EboL9LLwMh2g7qHf9Y7rOlwKe78FAr/CJWj0DKJEnx+gddEael21dcqgAfO8x0EfRe26C/TzlenCmjC9rMd/sH9N1DhQgOjxZoK29XPc1qtM3gJLYwgJfet5414MbGhPX7WwqgOu+UyMG133j9GW/JeyrCfYzF0PwT7gDffGSf0zXGVUAPhZfRwGfKBQJgJLQRJGO4jHM3TBuSfZ1yZ4C4lvxsfg6qtJFBqAYhBEQb8PIB/HDV1h1yZIC4lPxrfg4ynJFCqAYhhuSr7Chn0dppKY1eAXEp+LbqC2JHEAx8MIi4ZVOo+MHo/bWgNITX4pP48g+kl5wK8Nwe4ZmS+4f0RbvaHVej6VDAQCyd6LoPBzXZVUsNaBIKwZXDdeaMB2orbZSar444fM4WZ1t9Ee+KfFOMvwbqRWjT11TjFoBqTzkmi+uZrfR3sSAwOiZ7QDwz/gFehGq0UjdTk4BwLeE34NxdDhalSIxACXz2Qrf5rp8QAeztnKFBcdwk9m7zxfxrZZOJUsUQDFktsTXoxZ8E8O49LFdJ88kfE4er6HmuyPKm8xBihBbJ6Rd5lJAeY6IXsrhdmH0eMIKwBfik6Thk1ImDqBkKs8RvZEUxjyLf52OJxRRBrCI9mgCnxVfRPVsN2wxEm+Cmw2cqfCtZpnx9ERHVjdrE+e+jGQ2GEza73i+fm0cOIBSAG94f5lfxbXhln4LpPG7K4Ca772RAt3Xz0jm7rkECzGQJrjZNBHCe6nFcZ7QIV3N6kS4L0OpoLFobQN8UjIrasBGiWvvHe/BrZo7G4/rdp8KEL2B93Yf6eXVyT5z7hjdOgB9a89WeBvuGe5Bs3yFf0zX4RVAc3tcPpexboysnPvFWgBFasBXmCm5T0LEx7B9QXj58xsDmi1Cs121j0oF/lZL0opZDaAvBp6gXMWu+zSuGO6BqEP+cV2vVgDg4eVw3i/fdAz6ibTVqSR3JBUA+nIAxCt52X0cHZUHAGL377T5EXOwBnh4L4z3yWdxAR6+apuOJVUA+pKWSnzZonEfw72sHQBxzD+exzXAq8hUCPI1+m4fBLdRn1QC6As5z3zJUtndaZgeghMu8o/nYY0/32mZzUomgek0D4ftWqQaQF9caY5nSuZ2DGO7H8e2YT+THRbUdjJFwEGZ+M+bz0+a3ZQvmQCw0QezzOu5ZO5F7SDXiZsbz6V1G+AdQS2/T+bbbTXlaVrLJXZnDsBGZ3i9ZzZ34+L8FrybciPWhcbz1m7jE7dwzAfobL2LYfEH0tCb7VXLTAPYKApqw9H5itm85Lpb4ditKLiMS7SiJy09WPxBjuIPcmjYcQ6tGTNHcGyx0f6sbucGwGYHAr7x2UVzk2FzHbnuFN66nsL2FDoz65vDRrmPzsMZtDvTeOtimh1nGtsfTYya9wHcQpT5pCWt3ALYzkFnmS82ZTO1TGaK2MXPbAScawHnWsCyFm/roNOJ7dq+lw6bOZybw7k5nJvHOW8fkM3hNayTTM70EJtpUzDT64i+bpd3Ho//Dw7/YlbG4ZiJAAAAAElFTkSuQmCC"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAE5hJREFUeAHtnXuMXFd9x3+/u7vendm113b8itsUTB5bldKmBCkmaYK7KREWdqpWAQQKQcgW/7RNWoPTJIVGiFeK20gE9Z9iVNVEVIT8g2OUFojrBiXYUklpBVVXQJ0ojeN4be+OvTsz6925p9/fnZ31zOw87ty5j3Nnflca3dd5/M73fOace+49DybdahS4ZMwmKtBEiWmCjTtBhjYT81rs1xomb8/Le5K9bIYu4/iyWd7z8p6MkevThp2pAUNTlKGpdcznayLs8xPu1/QbY0ZzC3Q74Hknu+6EYRbYJgyZjVFqwsQXAeUUGzNlHGcKxy+PD9OLzDwfZby2ht03AAK44bki7Vxy3UmUaJNI+K24NmRDxgC+RUN0CiXm8UHHOT42QidxbcEG26K2oacBzBXNjagW70XG3oUMvg37TNSChhI+cwEZ8xL+KM+jun9mfIR/Hkq4FgbScwDmjNlo8vQhYvNRlHDvtlDzjk1CafgjMvwNztK3xhlVeA9tPQGgVKWzeXo/AzrkzR6cr+mhPFpJCkC8gpNjBjCuz9J3pepeuZnSg1QDOGfM1qWCewClwz40Hq5JaR4EMhuNmQso5b8+mHGeGGN+M1AgFnhKJYD5vLlugdyHkAn7UdqNWKBjYiagFCziz3d4mJwvZ7P8WmKGBIw4VQCiUXGDKbkP4+H8fql2A6a5J7151bExR3jAeRyNll+kJZGpANBrzbruZ4n4gwBvIC3iJmEnQCzhzfjT7DiPpaH1bDWAgC0zm3cfhagHcTycRIamNU5otgDNDq3POl/EccHWdFgL4KWi2eO65kmIuMNW8dJgF+A77Tj8wLoRPmajvdYBWCiYtxSN+QpeGv+BjYKl1ibm74wwP5jJ8Ks2pcGxxRiUdAOzBfMw4PtvhS+CXMEfWrQVjUXrCGIIFKQVJeC8MdcuFsw3IcyuQKlQTx0pgGr5xFCGPzLK/EZHHiNwnDiAs0XzXiqZp/Aua0sE6dMgmyiAd6jnaIDvWz/C32/iJJbLiVXBXpU7X/o8ueafFb5Y8romEk9zaD+LPEiySk6kBJyfN9uvsPknPOvdWaOKniSjAPMLawx/eHSUz8RtQOwA5vJG+uE9i3/g5rgTq/E1VwBV8jSeDfeOZ/lUc1fh34m1CsYXjd0umeMKX/gZ2W2IkieSN5JH3YbVif/YAMwVzH3GNUdR7WY7MVDdxqgA8kbySPIqrlhjAXAmbw6g2j2C32BcCdN4gikgeSR5JXkWLITOfEX6DIiEcK7g/jW6xR/szCx1bYMCGA5waDzj/AWeDTGiIZotMgA9+PLu12D5vmhM11DjUACAHB7POp+ICsLIqmCv5FP44mAk0jhQgOyXvIwqkkhKQO/5wbh/G5XRGm4CCrDzyQ1ZfiLsmEMH0GvtlhscoYcdduI1PP8KSBWM3/3jGX7Kv6/2LkOFRN4hSTNeWlLto1YXaVMAAC6xw/egp/VzYdkeGoDyhUNeZOp7vrCyxtJwmPMO8WRYX0xCAVC+7S6S+Yl+4bAUmpDNks92Q8Q3h/HtuOtWMKrbAelYoPCFnMsWByd57eV5CB1buwYwl8doNe3VYjEuEZmGPPfyvsvgu6qCvc6k0p/PmK5B7jId6j0BBdAoccnh93XTqTUwgF43+rz33Kc9mRPIfFuilJ7VQ1k8Dwbs3h+o5JLnPm8Mh3ajt4WDxOzA8+CW5fE8gQY6BQIwVyQZKL4rsVRrxFYpICwIE0GM6rgKXh63K0MntV9fEMV71Q/eD2Lc8W90Ou644xIQY0ufVPh6laIu0oUCyWOjwyA6KgFluoxSyX22wzgic+6iq8bLmHP+xBmm/8J+GjOgnC8SLWE6+17cBtEtbxMmo9ucIfqtTUS7tmOGdewdi5I7MODs7WQaEN+mo57PoKPBz7DfYUPmfu81oq/+lOn/5nwnwQazQ7fhV8cM/elvGrr7utCDDhQgXs2cRoeFt2Pva0Ik37k3M1/6HCz6dCCrQvQ0i7njD55k+vdzvk0PMXZ7g3rXFkOHdhpab8ccYp/fMDrwGT9q+crF8vx85qco/RKde/mVy0R//EOmM/O+zPaT/p5ys33U0N/dYeit5eVzEksbSr8F9Jp5h5/5CX01Qgwmh0waPin5FL7WTMkfUzQSrZLcwMqwMOPHhrZFCUq/G9DH738QaKAXjX6M8ONm/wmmH0+3NddPUD3v5pbNhg7vimwckS/9UAqWUAr+ervpgtuWgDInc9Lw/QsaHAqfr3z3HIlWolmSmzDjzefdxoiWRYrMRn+FzC8RWGITgsurlnueY3pdn/vaZGXt7V/B8+DR3SbRVzQoBRfXEF/favb+liWgLIWQJHwi6X/g/Z7CVwuXnzPRTLRLchN2hKFWNjQFUBaBQU+H/a08x3HvX19vWUjHYUJq47BBO2FIWGomYlMAZQUiEJz4IjD/eaGZ6Xq9nQI2aCcMeatZNTG2IYBetYvlr5r4ifXyOV/v02M1KTWRWaOdLKXWpB3REEBZ+A/9vKxYe02+7eoWTAFbtBOWhKlGqWgI4PKqk43cx37N7dGOBXEIaZN2zZhaBaCstwtx9sQhkMbRVwrsWWarJtGrAJTFnlFfJ/rNt8ZCPekJBYQpbyHxutSsAhBr0N5f50ZPVYFwFCgvKF4TVg2AXq8XY3bWuNATVSAkBVAKvlsYqw6uBkDMZHpv9U09bqzANoyG+codRKc+UP7JsVzTrb0C9YzVAIixHne1D6K/XQhoz92D79NvI9qCY/nJsVxTCH2wUcfYCoAoHofx3f82H0H0tZNHbqGGvY6lJ7Lc0621AsKYsFZxtQLgXJF2ogTEcBfdWimwc1vzu63uNffVZ3fAmMfacrJXAFxy3ck+k0KTm5AC1aytAEjMCqCPDDl5trmjVvea++rDO1WseQCiTh5Fp6db+1CKjpP8pR9TwzEXMg5D7unWXgFhTZgTlx6AuQW6HRcS6/Xc3mR7XJzNE+0+SnT0f4nO4Vh+cizX5J5u7RUQ1oQ5cVmeTBwD7Nt7UxcVBQS0B39YOdN9IAXKzH3PKwHZdScCBaKeVIGAClSYKz8DMiuAAYVUb8EUwKIjHnMegGRIAQymo/oKqsAyc84lYzahx6r0AdRNFYhNAWFO2HOooKVfbKprRLUKgL3BEgPAZGdxqDXK8rPTH2tt4I5/bH1f715VQNhz2GgL+KokehSnAsIeAKQtcUaqcakCFQWEPQfN4YRnk6uYo/t+U0DYc/D8pwD2W87bkl6wh5U3FUBb8qPv7AB7Dvroj/VdwjXBVigg7DmsJaAVmdGPRgh7+gzYjzlvS5r1GdCWnOhTO7wSsE/Trsm2QwGpgrH6hm6qQAIKgD15DaMAJqC9RgkFwJ68hlEAlYZEFBD2tARMRHqN1FNASkB8ENYSUHlIRAFhT0vARKTXSD0FyiWgmVM5VIFEFDAGjRCmc4lErpGqAkzTANCZUiVUgSQUEPacAUMKYBLqa5wk7DmUUQCVhYQUAHuD65jPz867F3VssL9M0FFv/nRq5wqLGF4U9sozI7CWgu0E0/shK7DMXHlyImP0OTBkfTW41grwMnPlyYkcbQm3lkvvhq2AWWauUgW/HHYEGp4q0FIBJo85D8DxYXqRmRdbetCbqVPALS1ZabOwJsyJceVnQOZ5TA9zykpr1ajACpSW7CxThDVAOC8JK1fBcmTMcdnp1jsKLF7BzOk2blWsrQA46DgKoI2Z1YVNhblcF76j81rN2gqAYyN0EmuFFKKLVkOOVQHj0uCihR2dwJjH2rIYKwCiTl7A+g0vxSqSRhaZApdmztO20ZXsjSyeTgMWxoS1ir9aC5mfr9zQfXoVkNZv7vxZun7jsH2JqGOsBkBMlfCMfRarRR0pgJE+58+8SqVSiXbftK4jr3E4rmesBsDxEf45iscfxWGIxhGNAjPnXqf83CUaGmB6303j0UQSMFRhSxir9l4DoHfD8DeqHehxOhQwrouS7xXKXZz2DN73rk20MTtgl/EN2FoFIGfpWyD1il2WqzWtFCjOX6Y3XpmiudyM52zdyAAdvGNrKy+x3xOmhK36iMtrxVVdHWe+OJt3j+HSH1Vd1kPLFJCGRmH+Es3NXsT+6shaPGPR1/7w1+wr/YiOCVv1Mq4CUBwYr6g0qQRwDq8fFoo9umwlGhilpSVaWrpCi1eKyKf67CT6wt3b6e4b7Wt8lJlabW9DANdn6bu5PF9AL+lrVnux90ruwlmaOfeGvQZGaNnwINNX915HH3jHhghjCRY0ej9fGAdTjXyvegYUR6ivF4nN1xt5sPVaP8N3x44x+sG+m6yEz+MFLHlMNYAHTwyNtzljti4VzCtYXHiksYt4rv7Otxv+R2oi70f4pKFx9w3r6MO/vYEmr7d3oQOAVxzM8FvHmN+sybTlk4ZVsNwTDzP50mEc/smyWyt38sZ/ZvpqtfuxW66hm6/NWGlrt0YNOUxbxgbp2rVraGLzCA21/292G2XX/vEYd3iMnYbwSeBNS0C5mc+b666Q+aUssS7nSWytSsB6+P7s9q302F3bkjBT42yggFS7a4ivz2b5tQa3vUst/0OeR2OONPOc5PV6+P78dxW+JPOjYdxgpxV84qclgOKAB5zHQXJJjm3ZGsH3V5Na8tmSP2KHMCPstLOpLYD4dvcLvBl8ul1Acd3PnX+j5pnvAN74K3xxqd9JPObpMjut/bQFULyz4zwGolf6cLUOMrq7ZfjOrkTwScD3md/Tkm9FEEsOhBVhxo85vgCUHgxoiBzyE2BUbnJo6c5M18L3aYUvKrm7CldYqe/10izAlq3gak8INJMrmJ9hv6P6etTH0gquL/k+dedW+stdWvJFrX2Q8FH6nR7P8Nux9zW8w1cJKIZIgI7DDwQxqhs/Cl836sXvVxjxC59Y5xtAcbxuhI+BxO/IcVxbdbV78M5tWvLFJXyQeMCGx0gHfjsCUMIdYX4QEMbe3eSh92yjR3fZ1cetA5173ymY8NjoMKUdA5jJ8KsoYj/XYTxdORf4HnmPwteViBF7FiaEjU6j8d0IqQ4YDZEBNEh+gP2u6utRHD/+b2/SwwpfFNKGFibgO4GGx+9j3/EHi0AAiuXzxly7mDc/wcfmLaGlRANKnQLo63duKMs3jzJf7RHSQSo6roIrYXsRDvB9oN6tXNN9fyng5T0YCAqfqBUYQPG8foS/j37hX5Jj3fpQAeS9x0AXSQ9cBVfilOfB2QJm1jLmzso13feBAswvrM/wZJDnvmp1ugZQApufN9sXyXse3FwduB73pgJ47pseIjz3jfKZblPYVRVciVwMwT9hbxLvBys26D4mBfC+T/I6DPjE4lAAlIDGs3wKn2HuhXF2zgsrRurWlQKSt5LHktddBVTlOTQAJUz0gHgORn4cvwYjVqti1cPUKSB5KnkreRym8aECKIbhheRThvhTYRqpYSWvgOSp5G3YloQOoBi4IctPYIqIRPsPhi1UP4cneSl5GoUGobSCGxmG1zOcy7t/j7p4f6P7ei0dCgCQw+NZ5xNRPVZFUgKKtGJw2XAtCdOB2morpeSLEj6Pk9XRhn9lJm8OMJm/kVIx/NA1xLAVkMJDnvmiqnar7Y0NCPSeuQ8A/gN+TWdjqDZMj5NRAPAt4ffxKBocjVIUG4ASea5odruueQaf7bKNjNFrCSuAl8zee76QX7W0SlWsAIohuby5FaXgs+jGpZ/tWuVMzPfk8xpKvr1hvmT2k4TIGiHNIpcEyndEtFJeaOZGr8esAPJC8iRu+CSVsQMokcp3RK8nBSb0xL9O+xOKKAlsoj2qwC9IXoT1bbfTZMReBdcbOFs076WSwdcT7Vldr02U59KTmdCZtNv+fN3amDiAkgCve3/BfBPPhru6TZD6b68ASr4TQxn+SDc9mdvH4s9FIlVwvWkihDeoxXEe0S5d9eqEeC5dqaCxaG0DfJIyK0rAaokLBfOWojFP4lXNPdXX9bhLBZiPYtzuA0GGTnYZc0vv1gFYsfZS0ezBO8MnUS3vqFzTfecKoLo9LdNldDpjQecxBfNhLYCSHMCXwaI5j0LEh3C8JlgS+9MXNFuAZofWZ50v4tjXREFJKGU1gBVB8AXlRqyF9lk8MXwQolq2AFrFSjv2gA2Dw83TMj+f3ynSkrQ8FQBWBAKIN5iS+zAaKvcDxMQmTq/YY9Me4GFcmDki0+ICPMxqm44tVQBWJJXZ+xfIfQjvsvYDxETXManYlNQe4BVlKYRhcr7cbkLwpGxsFW8qAawkqLyYjnuADO9DJqRqWbFKGoLu8ee7IKtZDWacJ5otAhM07Dj9pRrAilBSHc/m6f3oxvZRXNuD855ssKC0k2V0j8nCf7Ken1ftVkRI6b4nAKzWPmfMRpOnD6F0kOfEndX30noM0E6ilD8i6+02WvI0rekSu3sOwOrM8FrPhu7Fw/ldGJtyG/bpWMMLr02QMS+hsfU8usU/k4bWbLXunRz3NIDVQqA0HJ4r0s4l151Exk4i4dIv0YqWtFSl+IOcwh/k+KDjHB8boZO4lviyGNX6RXXcNwDWCwj4RnMLdDsZeie77gRGXU/geAKNmY31bsM8R+PhIuqdKYy6mDKOM4Xjl8eH6UUANx9mPGkJq28BbJZBl4zZRAWaKDFNsHHxoy2Acy3gXAtY1mK0DhqdOF4+98IxdBn3LuPeZdybwz3vHJBdxjCsc4adqQFDU5ShqXXM55vF3Y/X/x+UKbnM5rRzPQAAAABJRU5ErkJggg=="},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAHapJREFUeAHtXWuMZMV1rrrdM9Pd857Zx8yyT/Yx2IBjIwdjLEVobUuxjMlDyAiEkSwQfxJhidjYcSIhKwnYJkEKfyIlWFGwZcsWedjGsiXEClmyASdCCbDALCy7yy47uzszO+/unkffyvfdmTvb09Pdc191X9s1Gt3b91adOufUd0+9TlVJ0QobNDCr1DZREiMVKUakMkeEEtuFlN24disprKtcuwpeGZSYw/2cWrvKtatQis/HlTRGM0qMirwY7ZFyYkOGV/kPebXKr5TqnFkUnwJ4bpKmOaKkJNhGlFADOnUihbwMUI5KpUaVYYzi/tXeDvEbKeWCznzjSvuqASAA1zFfFresmOZRWLSjEPwTeNYWh4IB+JaVEK/AYh7LGsaxrpx4Gc8W48Cbbh5SDcCZsjqMavFOFOynUcC34prXrdBA6EtZQsH8Fh/KC6jun+3NyXcCoRtDIqkD4IxSA6oo7hJSfQkW7pMx1LlrlmANXxJKfl8WxI97JarwFIVUAJBV6XRRfF4CdCib2/G7PUVltC4KgLiEH88pgLGvIH7Bqnv9ZUJvEg3AeaV2rpTMh2Ed7kfnYTChZeCJbXRmJmHlv5fNG092SXnRE5EYJEokAItFtWdRmI+gEB6AtcvFQI+RsQArWMbH93SHML5bKMizkTHiMeNEARCdikOqYn4DjfP7WO16lDmVyazqWKlnZMb4Njot7yZFyEQA0OrNmua3hJBfBPAySVFuFHwCiBWMjP9EGsajSeg9xxqAAFt+umh+E0r9Gu47oijQpOYJnS1CZ0/0FYzHcF+KqxyxBeBsWd1umuopKPFAXJWXBL4AvlOGIR/qycnn4shv7ABYKql9ZaX+EYPGfxRHhSWWJyl/mpPyK/m8PBMnGYy4MANLl5kuqW8AfG+2wKehVPBBU7fUMXWtIQdPJGNhAReUGl4uqR9CMbd5kqKVyJUGUC2/2JaX93RKOeYqoYbIkQNwuqw+KyrqBxjL2qFBvhbJBhrAGOolkZH39uXk8w2ihPI4sirYqnIXKn8rTPWrFvhCKesNmVg6h+6nUQZRVsmRWMCFBbVrSaofoa33Bxu00voRjQak/HW7knd3dsrzYTMQOgBniop+eD/HF7g9bGFb+TXWAKrkcbQNv9BbkK80jhX8m1CrYMxofM4U6lgLfMEXpF+KLBOWDcvILy036UMD4ExJ3atM9TNUuwU3DLbihqgBlA3LiGUVVq6hAHCqqB5GtfsM/rNhCdbKx5sGWEYsK5aZNwruUmltA0IQOVMyvwO3+K+5Y6sVOw4awHKAJ3rzxtfRNsSKBj1BGwAt8BXNfwHn9+thvUU1DA0AIE/3FowHdYFQWxVsWb4W+MLAiNY8YEAeYFnqykSLBbTaD8r8B11Mt+hGoAFp/EV/QT4ZdM6BA9Dq7a52OAKnHbTwLXrONcAqGP/39eblD5yn2jpmoCDhGBK78exJbZ11K0bSNAAArkhD3gFP618GxXtgAOQMBwcyW+N8QRVNTOlIWTSEPBrUjEkgAOTc7rJQ/9ua4YgpaAJmi9N2bUJ+NIi5Y9+9YFS3GToWtMAXcCnHmBzL2irzABxbfQNwpojVai2vlhjDRRNrKHOr7H2S91UFW86k9OdTyjeQfcqhJblSplhZLgvTRAMD0zluAhrswjDaRLYth2XMqVQP5JKmMOQf+nFq9QxAy42+aLX7UunJbFZWxNLSvBvMNYzb3t4ljEw6BwboWd1WQHvQo3u/p0+T7T5rDUda3ehh7ZaXg9sv0qLl0oI2RHPMXqA9uGNtPY+nhU6eADhTFlwoflvMdBEYOyuVJddVbrPMWX2TZloDsUBMeJHPdRW8tm6XSydT69e3tLhgtfu8KLRRGiPTJtrbOxu9Tv5zjA9i3fGH3a47dm0Bsbb0qTSDj0hQCturBByUGTzNgFn0Rw4GycKGSyquAMjtMlA6d7jMI3HR2fsNOuigGTSPvukBGxZGXBByDEDU83nu1eKCdiKjmhotlU7acVH22n4+eaf8OAYgd6kCCA84JZzUeDqqX1sXOmnbeUR9JUaIFad8OOqErO7Pp94A8VTuvVytrJWVsjX4XP0sqHsOSmez6d/QFQPUi/CaudHJ/oSOLKDC5pBXA/jQvhUVDEDrChbtlI4HVusMWOkgZqqfNbrf0gLC+h2Cj9/bIOppoLFRxnF6XsEYnbmyLCqYcgsjZDBFZ2TbRCaT3goFVrACK3jdVtsFb2kBuSdzGsEHmVDVlsRiaVosLxVDAx8BTqAzT+ZNHtLYQyZmrP28t/iim1pA7kaPOYGTIJaaDcEtB4OVRVHBf5xCJtuB9mFHqhwXYAWX24U82Gz3/qYWkEchpAV8bHqtLMHilWdjBz5+CPwgyBt5TEszkdghhpp96A0t4OohMOo0iCS+28YqbwVVHmRppovYvIPlENn2gmBbMekBspSzebm/0WE6DS0gTyCKG/gIIFftJcRfWloQy5jbTQr4CDjySp7JO344xiB1Ezc5wU/OOs2qgRR1LSAStWGR0RiKOxbHX7F6WsG/DT4ybWTbrV6kYdT3s+PcKwvQTtNA/tg/pjMrnRikUX8QwjRXMHTEXjxa62vSMA3HGzPQURwCfAYnsYhpmG3CWn7qAnBqQf2xEOZ/1kaO4vcyeonNOgxUNhXNIQ3b85gFwl5mmkIbq+S1YRt+VJSxQtA1mbdmx6atzfGsmGZ1GX/S3yn/qzaTuuaDp066sPy1NAP7vark5r1VFgDd5vlvwErQUrBg0hb4QZnZFUHL7nROmR8udWIDN0qdrJ1kugmAmyygdd5uCdVvxNNurE6WyjOxaNNkDEO0ZbMoSFRtmQwK1cBSCFQs+Gdgu8vkv4mPoVKBdTLF8gqqRvyOOpDH9lyv2FTQITMGPpZkXg7Xnne8yQLysGe0/SJvPFRg0ViwUYX2tqzItbeL9jYsLALovASCcWl5WZSXlnDVN8XXjDfqkLrkPHSUwTJoRXkXePinaj42fRjwZHgJkW+pjhT2PatVjomFHWjVCrmcyOc6MATScIDAE1u0hqXyoiiWscougg+rI9ez3kb2JEAAiWAFX8LZdbdWk9oAQHq9mBXzRHWEKO65Go2r0sIKBF5nPg/wcSZig0oCZ4EWqQggLpRKoQKRq/K4Oi/qYGSMI9VeMhs+c+jmzqgZNCvLoYKPoNvW1wsAcv2uXvBRt8yDeTFP5h1W4AdN3UYdajG2AYBodH06SgbZ4uOwSxiBVm+gp1v0dHZanYow8qzOgx0Z5k0eyEsYgbqNrlW9JmENxtYlR9XQgYPspgDCyAaOdDqDVhcwOxX93V3o1XrrXFTTCuK+gs7K1Ny81YMOgl4zGpE7xeLs4r687EdNYI2vrVvA+bK4JUrw2eN5zZQXxDv2bAd7e2IDPsrED4E8kTfdgeOlzQavdedPjFlYW8toHYArpnlUe+ZNMgij6mXbq7cL01ohVXlNxN30ijyRN/KoO4Sh62YyVGNtHYAolcgAyJF93Q1kNvi7C4VYgs8uLIKQPOrunFgdPY2r/2x5Gl6rsGYBEO2/TjQGP9EwgeYX3H1KZ+CgMgs2yPDLE7Niz+PHxd5vHxe/OjEXJGmLV/KsM+jWeTPeiTVijnEsAM4sik/hQXTOZxq7ZhxQ7uvqCtzyPfjvZ8W5mSVxdnpJPPgf7zfTt+t3tITkOejB8A2MaNT5hnzq/CDWiDm+sgCIvvlNdeKF9khq6o2yIPs5zBHwrAYVQ/DZgSAMOpBn8k4ZdARdOnfM6xrmLABK0xxxnFBDxHJpSSwuBl+IPZ0Fz/O4GsR0TZLDRZQh6EBdU+dRBhtzFgBxAESkAJycnBCjJ07C6TS4DXzovZLvCG+mQVdhUgbKElSgjqlr6jzKYGPOroIjBSDHpYqYG339+FtioRjMTIgOyxFVgQUlC3VLHVPXkY4FUpFKWJgzZpXaBvergaiUy3w7u7qt7Fk1HH9zVIxPTvpihwO6QVoNX8wEkJiy+B2kpk6pW7upY+s8APY8kSDmiD1DlFaR6IlKQIkGBwZFDm5QDHTqPHnyjDh95iy+Um9dtTAGcwMS3TEZrzJRh9QldUrdMlDX1HnkAdgzKjJ6ALKnd+MNvwenySttnQsXx8Xxt07AkdNdY7kd1iJN1s8GCWWibG4CdUcdUpd2oI6pa129azsfJ1diz5Aq2h6wzWgnPEM+ftPNogvjX3aYn18QH3xwwf7p6JpLQcejkaBuZaPuqEM7ULfUMXUdh0DsAYAiNscssGq46WMfF0M7h9f1k3c5N5rr0D+hv85cyDduZavWHXVK3dpNnZBZr5sdsWegO7zaA6gbJfyHHIC97roPicOHj1jVRAGeyk4Dp6/C8q1zylOQ8Sibmyk66o5VLXVJneoYkPcjH7GXRXc4VgC0Bbpm127Rjd6xYTh3zecCorQHyuh0gVMBg9gf++hNoqenN55qAfZw8mY8AUiNdXf3uJrJaMeee2kPbmTkTAp1GNsA7BnopV9p9ceNU5fDMNlsPDycdarRtYwudaiT91raxB6bFbGsgskslnrX8tzwt2HgcEAIk/ZAGSmr0+BGh05pBhWP2DPi2ga0hHTx9WYbbN4TlLLiRMeVrC50GLqMcW8DLmPfZqcB+xE7jZr4eG5kdaPD0BVjWcDQc3WeIfdYcRqwU4vTqImP50ZWNzqMQjGsgoP1Jw9QCje7I8RhailA0ZuSciOrGx02zVTHS2AvC8MxBxDGYGZ6s4Tc3Mdprw/eFZsJaHxSwBjl4PDe9U0gD/ybt8yGMSv22CeFuO0a5+ndyEodxjYAexyGia0FrKw4r4K9es54LZzBoSvg80qD6cYwVfvNl9xRcCOrGx2648J/bGKPA9GxBSB2PHYsJQ7TcRw3iIiZADs9bluvbmR1o8Mg9OKKBi0gJoRjC8AMhlacuuljsbMr2f1G/rMb0EMPYLMfVsGP3+qOG6eyrmCTTOowroHYs9uAseQxC/+3YnEWc5lbj5XT2ZJVk5sGuh+hv3pzQXz1Zj8UvKWljLZj6VYUinDBz+VjPRVHC6jmtxIkqvdZzO1y/YLTEOsGt1MhtojnRkbqjjqMbVAKnRApLsWVQVrAUqnsmD2nXiKOCcYwohsZqTvqMLZBinEA0BiNK4PZrCGuueaKc+pWfHI/5rQHNzJSd9RhXAOxZ2SUiCUAK5VFsbQ4b20S7lSBLBw3QxRO6cYlHmVzA0DLdxA6pC7jGIg9Q+TjB8Dl5SIOmnHe9rOVy4EY7kif1kDZvAw2UZfUaewCsGf0SDmBucXLcWCOi6UXF+d8HTRT0rDFRxx0Qx78yMbDe6jbyBekrymTmCP2VhsIMnoriCPeVxXkc986VlFueopxAddWfFAmN9VvPXo8ZckCYchjpvV4wQSI1fSzAIihmMjbgTyaAZ9nXV7dPuQRCGkLgcnEdiR1HXGwMWcBUBnR9oR5nm+QVQOrqjRZQcrip/qtxRp1TZ1HGWzM2VXwq5Eyo8FjY24hho1uj0rWIYvSoHNX4klhYc4CYG+H+A2msKL7JNzOxjuQdHHtjDYHUWMdhT1fyhJ40KBzpzwSa8Qc46+2AaVcQOvrFacEgo4npZ7R+llsSxF3j+BmuuT5IZRBR9Clcye8EmsAoSXYahXMVEodc5JYR5yp6WkxPRP84YQ8FHBqjkMPwXRudMjeiCZ55uE1Og42pK6p88hCFdbWAZg1jMgAuDA/52s7tmaKZAN+BlYkSSAkr+RZR0eKtE+fOSeo86hCNdbWAdiVEy/DlymS8QspDVHGCZJjFy5q0QnbUQsunBq0MOGCKHnVNaNDHZdxZCx1HkkAxiysrWW+zgXq5EW0S38bBVODg9usbLmd2OKShgY3qM9jbJBn9cY9kEfyqiNQt/Z2d7bOdeTTjCYxRqzZcdYBaD2Q8gX7RZhX7lc3gB07eajz+++f05b1LIZmZhfiWR2zaiRv5FFXoG6pY+o6sj0CazC2AYDYKuFZXcJvRffwodXt2CYvT4mZ2eA7JHb+PCyaHROnXsV2Op1X8kKeyJuuQJ1St7A+4vChw7qy2ZJuLcY2AJAnWYNBl2u0tszTUYQ89rLbs2efFZeNZJ2dBjp1TqInqKOR70jYqkjkgby4cTStSu7o1u54MDJ1nM8Hf/aIE0aIrerT0plmAwAtIkp+3wkxHXH27dsvuA0tPXnHLuh11GZVNDE9I+axbkIn2BvpiXkyb/JAXnQG6pI6pW6p48hCHWxtAqAsiB8DqZE41fFstIMHV6uHc+cvwCroZ4MNfoKgjPnjMIDIPJiXBX5NnY1qgFGH1CUDdav1/LnqjGvuiSliq+bxZgvYKy3fwOdqI4b1e/v2HaK/fwDHt1bEmTMfuMp2Ho14L2eM0AJNz89boGA7TMfgL2mSNoHHvLxYPcq2ABndBDZnqEvqlLqNMDy3hq0NLNSdA1OWqVR/uiFmiD/YIfnv/3nFajR3XegUw0ONFcehhUkUzPjE5fUFTNPTs+LggX2u90QmKNgTncN/BzY75+EwdGv3uu8gQUcfPms+lxbWow7ZSTl56gzknLIocPPxbdsGxLbBQdHR3taQKqvey5en1zoeRxrGC+PFKqY251R3ShrVRNtMUY1hD5LBzUnCefLeeyfF+2fPWJnt2L4Ni5OGoOzVHfA5R3oZU0nj45fF7Gz9Ef1O7I985PDBpgXkVBKe0dGG3Ve55W2G/2gqcIcqVCsWCVar/COAyRs7Fss4k20ZC8P9Bn5gJ945CctXf3iGa6a3bx8QA319Fm/Mb3W877y4ND5pZb8XHY9rrz3olxXP6aGpyd6CHIa+Ng3y1gUgc5ouVr4DvT7iOVefCVmQv/vdy1DmlaGJNlojbIlhHze1VRZt2DV///49YrC/f6uosXw/OTUlTp8+i/UczoBMq21ii5LlKu+ZjvYOcfPNt6yDMwpB8Z1+t6+Q+Xq9vBsCcF6pnSsldRpf9+oZWvVSa352afyiePPN445z6cGG3IVCJ04GGtuQpr+/TxzYvxvVaTLOEGHH4dTpc2JqaqPDAM/6KBYxWD3nfJz0+g/fEGnbD1avnM3L/V1S1p1nrdsGZOkxwVSx8jRu/3xDaYb4Y8f2nWJ296w4d+5sw1w5tLADBTO0cwjgWx3fGhgYEG+PvrU+2MyCZFW9d/cusWPHtvWqsyHRiF6wKr90aUK8f+68VZXbbFhnp4x8CLzvtB4Vi0Vx8eIF/I+hR32lhrDj29fdu/dECj7ygabJ013SqAs+vm9oAfmyWFR70HQ+yTYhf0cVxsbOo0d8GspenctlW2zbth1iaGhI9PXVr17nMbPwxvHXNhUQq6lrhodQMIOxASKBN4722gdjmAtHZ6U68AO74fqPiK7u+vvjTE9PiQsXLoiJiUvrA+ur430HxPDwrmpSod+zzdcu5MFCQTa0IE0BSI6nFypPo/d2f+jc18lwCV4t7BE6PW5q2WrA4/hXFE5tYO9x164h9CQHImsfsZ07MXlZfHD+IhYKbQQe+d2Oj+zI4RHR1qSnWy0XvVxoLdvXOmvV76K4B7i+19eZeaBZ3lsCcKasDmE/urfxlWaaEYrzu4nJcfHOiRMbOjQ2vyyw/r5eC4h9fT3arSKtHYeJCLwpjAnWm5Nmx+HwkSPgabvNZuKusH4VbKZ+Habe3m3G/JYAZGL0iH8Ivd3djFDc33GfwVOnTorzYx80nPHgdsBHDh3EdnB6zu5hO/TEu+813PMQhSZ2DV8jDhw46Hhr4rjqHaL8CD3fe7bizxEAYQUPwwq+jq+3YyuCcX/PauoMxhcvoF1Ja1Qbdu8eFrt3Ddc+DuT3ufNj6FBt7KGTMIE3hPbaPozXOW1eBMKQJiKQZxHW78Zax4N62TXsBVdHJqGphcoTePbX1c+TeM8CHkG7at/e/eLs+2esnmS1V4yb7eDcyl9Lm52pnejB7927DzMvif+219WBD/uJvpzxzvqDJjeOLCDTg2h+pqSO43qgCb3EvWIbjG3ESxcvYupvEq5KOfGRGz6kRY7XXn9LlGCBB+EQumPnTquNF7cjVP0KDut3qjcvr8fVkVu3IwtIpkhwtqweqlTUz/0yGaf0BADHG/m/ghmH42+9ro29DutA7t8XWczQpDVgpuohp+CjDja5YzVTTE9OPgck/rRZnCS/IzB6e/qsRTtBy8G2J2mnGXzEhoURF8pzBUDSzUn5FWRUf2bcRcZxjcrZlCKcN4MOpGnP1ARNOxb0gAkLGy6ZcQ3AfF6egYn9G5f5JCZ6AQukZmeD3z2KNEk7rYGYIDbcyucagMygNyeeQIYvus0sCfEL+U743V0OdEsPbg9CmqSdxkAsEBNeZPMEQGRYacvLe+DntXmOywsXMUpDd68svGZOvPOe5drklzWONZIWabo5aNpvvmGlJwYsLAATXvL0BEBm1CnlmMjIewFGvStqvEjlMw3XzHIZ42tvvGl5ZXtZm8I0XAb5f6+/adGKbB2uT100S26VPTBgYaFZxCbvfI0H9OXk83BWeBz0/6pJHol71Qfv4omJcWu7kHfePRUI/6SZuqDU4xhwft6PXJ4toJ1pb8F4FL3iX9u/03DduWMo0LlYzjGTZqoCytwqe59C+QYg24PtSt6NtsC4T15ik5yu/9d/+MZA2mzQj0WLNNMSWNZWmXts91XrwfFUXHWievdYxPQJHBd4DHN2q27J9SIl7FkJ63ZPnXpPzMxM13XlaiYOXap6e7EU4MC1mN7LN4uarHcY78OSrKNYZPRKEIwHBkAyA6+Zz8Fr5mfo+flqWwYhWItG8BqANV+Bl8sdcE75ZVDUfVfB1YyQMTD5Zfxv9nOqjti6T5wGWKYs2yDBRyUECkAShCfED3Bq71d53wrp0QDLlGUbtESBA5AM9hfkk2h7exoZD1rAFj3/GmBZskz9U9pMIdA2YDV5tAPlTNH8Z9TFD1Q/b90nSwMAyNMYbnlQV7NKiwWkisnwKuMtS5gsyF3hlpZPJ/gsnFzJTt/dVFE9LIX6e1pFfbm0KAelARoPtvl0VbvVfIYGCLjz3wsA/iv+W0M01SUQs3uAbwX/X9bR4agnamgAZOYcJ8TmOc+mabC6nlIT+4yDzIa8M+ihlmb6CBWAZIQzJrCCP8eeIclddd1Mowl9x+k1WL4vBDXD4VQN2johjRiggG1CfjRtDgyN5E3EczgWsEzCBh91EzoAmWlnpzzfl5dHYX7/Dl9d6vwJKWMSAnXPMmBZsEyi4Dn0KrhWyOmy+qyoKMyeqMb78NYmav32rQFUuZfoUEyfTt/EfBCIHIDkfUGp4eWSwv4z6jYfsrSSOtQALN+LdKP348nsMKsto0VSBddyRUWg2/8ZaRh/meYln7Vyh/4bvVzqmLqOA/gofywsYHVBlEpqX1mppzBUc0f189a9Tw1I+TOs233Iy9JJnzk3TR47ANrcYhuQ2zFm+BSq5QP2s9bVvQZQ3Z7idhludyxwn5O3FLEFIMUB+PLTRfObUOIjuE/GDuPeyiHwVNDZInT2RF/BeAz3jjYKCpwJBwRjDUCb/9X9Cc1vocXwRSg1sTu12vLovAJsWJ+rfoK23qOY0XC0RZpOfrainQgA2kIAiIdUxfwGOir3AYjpWeVjC+jjCuAto8p4RmaMbwN4TbfF9ZFN4EkTBUBbeu7ejxPdHsFY1gMAYmTnmNj8RHkF8Mo8CqFDGN9ttht9lDw2yzuRALQFWj1Mx3xYKHk/CiGyY8VsfsK84uObFFJ9L5s3nmx0CEyY/HjNK9EAtIVmdTxdFJ+HG9uX8Ox2/E5lhwXWjmc5PMeD//oK4hdWtWsrIaHXVACwWvczSg2oorgL1oHtxFuq3yX1HkB7GVb+GZ63W+/I06TKRb5TB8DqwrB6z0rcicb5p7E25VZck7FCHMMmKJjforP1Atzin01Cb7Za727uUw3AakXAGnbMl8UtK6Z5FAVLTxz6JcaiJ82qFB/IK/hAjmUN41hXTryMZ40PgasWLOH3Vw0Aa8sJ4OucWRSfwml6N0nTHMGq6xHcj6AzM1AbN8jf6DxcRr0zilUXo8owRnH/am+H+A0A5+4o9CCZipDWVQvARjqfVWqbKImRihQjUpn4FzsAzm6Asxtg6cZqHXQ6cb/226KjxBzezeHdHN7N4531GyCbwzKsS0oaoxklRkVejPZIOdEo76vx+f8DYi06xjCLKmEAAAAASUVORK5CYII=";
-},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAACgCAYAAACLz2ctAAAAAXNSR0IArs4c6QAAF4VJREFUeAHtXXuMJMV9/lXP7s7O3mPvbg/IHSA46/BCsCwbyealOKfDJH4cWIkQKA4gWRArkSIskYAxsWNZtokDDlL4J0qCZQkjLBBShH0ODjanCxGYyx/4BcSrO+4hjjv29vZ25+52Zmdnpivf17MzOzM7j+6Zrp6e2Spp1N3VVV/96qtv6tXV1Uqsq2HgrNZbJSuTRSWTSruTouUCUWoDjhu0Eu+olo/CI52Wczg/p5ePavkoWtN/RitnKqFlSlIytVGp0zUJrvELtVbzr7Vel87JjRDPNcp1J7VSFNukFr3FJCdK1BmIckppPaUdZwrnb4wn5VWl1ILJdOOKvWYECMElzy/KdQXX3Y0abTcyfi38huNQMBBfXoscQI25b8hx9q0fldfhl4uDbaZtGGgBphf1FWgWb0PB3oQCvgHHlGlCQ8FXKouCeQ1/lJfR3D8/PqoOhoIbQ5CBE2Ba6y06I3eI0nehhrs+hpwHNgm14S9Eqx+oMXl2XKEJHyA3EAJkUzqfkc8qiA5lswfXIwNURpWsQIhLuNirIcZNY/ITNt2Vm3160tcCPK/1RYWsez9qh3sweJjo0zLoyGwMZmZRy39vKOU8vl6p6Y5AYhCpLwWYyehLc+I+iEK4F7XdaAx47JkJqAUX8ed7MinOo2Nj6t2eGdJhwn0lQAwqduqi+xA653ez2e0wzwMZzWuOtX5KJZzvYNByqF8y2RcC9EazrvsNEXU7hJfoF3J7YSeEWMTM+HPKcb7eD6PnWAsQYkvNZ9yHQeoDOE/2okD7NU1wlgNnj20acx7BeTau+YitAM8u6j2uq58AiTviSl4/2AXxHXEcdd/GUbU3jvbGToDZrL5sUet/xqTx5+JIWN/apNQLo0p9KZVSx+KUBycuxqCmS8xn9UMQ39tWfAZKBX9ockuOybWBFDqCjEUNuKD1tnxWPwNidnWUCxspEANolvcPp9Tn1yl1MlBEA4F7LsD5RX2zFPXTmMu60ED+LGQTBjCHekoS6s5No+pnTYJE4t2zJthrcheK3xJX/9SKL5KyrknE4xzcz6MMetkk96QGXFjQ25eU/iH6ep+oYcVe9IYBpV4Z0erP1q1TJ6I2IHIBpjOa6/B+jH/gBVFn1qbXnAE0yTPoG94yPqYONA8V/p1Im2A80fi0K3qfFV/4BdktIsuEZcMy6hYrSPzIBJjO6ju1q3+EZncsiIE2bIQMoGxYRiyrqFKNRIBzGX0/mt2n8BuKKmM2nc4YYBmxrFhmnSEEi2W0D4iMqHTW/Ucsi38gmFk2dBwYwOsAj42nnC+jb4g3Gsw4YwL0xJdx/x2W32PGdIsaBQMQyJPjY84XTYnQWBPs1XxWfFFoxGgaqEDuZVmaSsRIDej1H7T7T6aMtrg9YEA5f7N5TD0edsqhC9Ab7ZYGHKFjh515i+efATbB+N09nlJP+4/VPmSoIuEcEofxHEm1T9qG6DcGIMCCctStWGn9Yli2hyZAPuHgRKad5wuraGKKo1TGEbU7rCcmoQiQz3bzon9ln3DEVDQhm8XHdsOiPhLGs+OuR8FobhNcWGDFF3IpxxiOZe2VeQgLW7sWYDqDt9XsqpYYy8WQaShzr+y7hO+qCfYWk3I9n9ZdC7nLfNjoPWAAgxJXHPWpbha1dixAbxl9xuv32ZXMPSj8uCTJldXDY+gPdri8vyMBst+H+b6f47grKiLOnCvI1InSlnmT25OyZUNvZ3riZk9U5dAoHdSE+zE/+Ekc8VJ8MNdR05leFL4ovitYUt2FpvhyBe39ykLsDrG72HGzp7vcdBebWqAmOkEJXI0sv7f7tU4S6yYOxVd21edlv6iP1TZUn0dpBwpeiu6SuMWCaBeVj3ZLySvM1DkJcRJDknBGsJVORw1doKzAlq9BGz8M+t5x4BoQ75Y+YSebA5VN6IExDSL5fFZyi2kpLGUhQMzCQnz8i3o/nNOP9xiGYRnHqMNiVk8bARMJJEBul4Gc3howDRs8RAaKbl6WsmkpFvxvIc2wXhzENeqgDU8jARLxLUBUsSnu1RIA2wYNmYEChJTPLXRUl7H+Y1ximHTL+/mk/KbhW4DcpQoi3OEX2IYLlwHWfAU0pd06YhDLlKNGqBW/+L4EyP350JF90C+oDRcuA+y/FVB7heWIZbJPCK08QM34sdeXADU2h4SyB3Ljbz8k9TpMIb/YUbPbzG42x8Q05aCVJDXjB7+tAKHkndyZ1A+YDRM+AyjMQAMOvxZwYEJsc07dXtJO6xTaCpB7MsPQ2Gzn1To7g3eX83ymnElsasbbz7uN8S0FyN3ouSF4Gwx72yADnGQ25UxiezZDO56GWmSgpQD5KQQo2e5G34JA07e8JxyGEjGJTZOpHWqolflNBciPwGClw72tItt75hngEw5TziR22WZqiFoqX9cfmwqQXyCCgtf0R2DqyerFNcrAWLImsctGU0Pe16zKHnXHhgJEpGF+/qourL3sAQP5vLk+oEnsGqr4KbUmXbmGAuSH/zBRuaa+vVZDWIwuFnPmRsEmsasppJaoqWq/8nlDAS5/dbIcxh57yMDc/Lyx1E1i1xvdTFOrBMjv7SLynnoAe90bBubnzhpL2CR2A6P3LGur5tYqAfJjz2iv7WO3Gpp6eIHFpKdmZkM3wMOMYKFq2XBqyvuQeNlj+bhKgPgGrZ14riOpl5epVEqOv3dCisXAr1s0NZtYxCR2pK70QfGaJGsEyBUMUOp1NSHsRU8ZmJiYkKWlvBw6fDQ0O4hFTGJH6aCt6+tXydQIEFNOt0VpkE2rPQNbJ0ofE5ibS8vRY8fbR2gTghjEoitjt4kS6u16jdUIEM9Obgo1NQvWNQPJZFK2bdvu4bw/fUqmDr7TUXPMZpdxiUFHTGJH7uo0VhEgqsck5txviNwgm2BbBi6//AMylCgtSGLt9evfvh1oYMIBB+OUaz5iEbMXjhqj1sppV17LPL8o16EGjLhXWjbDHlsxkBwZkSuvulrefPM3XjD23w4fOYaBxEnZvHlcNm8al9HkiIwMl9aNLOXzwknmufm0J7qlpdrJbGIRsycOGju/qDjO+G+mXxFgwXV398Qgm6gvBrZObJWdO6+QQ4cOVsJTWNPTM96v4tnmhBjE6qVb1ponwEoTjHV/VoC9LBUfaV9y8aXyoQ99uNIc+4hSCcJml3GJ0XNXpTVPgGiT1ymRa3tumDWgLQOsvT728esrA5O2ERCAAw7G6XXNV7aVWqPmeO01wemc3AgPu/C0zFDMj+y/TX7wSrn8sh1yenZGZmdn5Uwab82VX7d0hmXL+Dpvno9TLT0Z7bbgkFpL59SNCPJSqQ+o5ZoW4e2tmDJAYV28/RLvt/+t8zVWfvjq9TXXsbsoae4lrwlWrjsZOwOtQQPNQFlzXg2ID0BMYgpmoDMcRuamsTHBfnzS+X9OKjl0Zr3M59Gbgds0rOX5OSV/sE3LLswZX2Qns9rS7WkOocpNsK0BW1A2g3e4/+UtJS8cQTdLl0SHd6UrMaZzSqZPirwKYT76Sy2f2yHyV1drucC+0FDhaNWJFk9zzlmtt2LFKtcAWteAAdZ4f/Kikv84rKrE1yDgshcFyrCMw7jWNWaAmqP2HMmWlNg42Nr2feaQyP2vKlkorNR2fhlhHMYlhnVNGID2nKKyAmxED2uv7/5SYU+W4OIr4zEuMWxNWGak9kjtOUrbEXAtLSLs8331QHfiK2NShMQipnW1DFB7EKDYzyzU8uINODppdutgKpfE4iDGuloGqD0Hw+ENtd5r+4pTLRzthu2ISWzrVhig9hx0cqwAVzjx+msrUy1VN7o8JabtC9aRCO1hP38rwGpaOMlsypnENmWzUVxoz8EDkJg/NDRKwSrw47WPVFfd78bDJHY3dvUqLrXn4NVQ2wRXlcB0puoi5FOT2CGbGgkctWf7gHVUFw0+EzeJXZeN/ri0fcDV5aRcc7tRmcRenZM+8PFqwD6wM0oT80vmPuRiEjtKjsJMi03wuTAB+x3r3NnSS9sm8mES24S9xjGhPU7DWAFWMZ1b4G5UJtZG4lOzHnZVYmv9FNrjNIwVYJUQLsRi0vPz4e9GRUxiW7fCALVna8AVPryzHZuTMj9zsvT93bp7nV5yN3piEtu6KgZYA+KBsK0Bqzj5oys24IuSBZl57yi/M1B1p8NTYBCLmMS2boUBas/WgCt8eGefuXJcHDyNy5w/K2dOvdedCCE+YhCLmMS2roqBUg2oDT58qkqsT04v3jAsf/7RCc/as2dm5NTxwx01x2x2GZcYdMQktnVVDGiNQQh2gK3ysqdg4Cu7fk/Wj3hvrHq113vvvI2ByWnc8dMkay8s47DmoyMWMa2rYwDrdIe0cqbwF6+7s7Yvt60fkn/908vkzmePeN1A9t9On3wXA4n3ZWzjuKTWb5Th4aQkhko1WrGQl3w+J1kILoN5xAKuy47bMBOLmNbVMkDtDSW0TIW3+3BtAv189ZkPbpRH/ni7PPxfJypjEQrr7JnT3s9P3ig+YhDLutUMUHuOpGRq9S3rQwb+8uMXyNN37Kg0x0FYYbPLuMSwrgkD0J6zUanT+KDcmSZB1rw3a6///eur5K5rJryRbDtCONplWMaxNV9ztqg5aq/UMVGoBbVc3zz42r7D/tsTey6RL//hRfKfv0vLSwfPydt4weNMttR52ZJKyO9jPw7O83GqxY52feiFmoPzBKi0nsL4zgqwDW8U1l98bKv3q9+Nalfcd6Nqk7eob1NzTNOba9AORsLWWQYiZKCsudJkl5I3IkzbJmUZ4N5OnuY8AY4n5VWl1MrklSXIMmCQAWqNmmMSngDhsYA+4AGDaVpoy0CFAWqNmqNHqQnmmdb7eLDOMmCcgSqtVZ4PDTnOPny/4e+NJx4gAWxmLUV3SdxiQT56aVGGMXVOl8e2SktLC+IkhiThjOALE5h8s65vGKDWysZWBLh+VF6fz6osasKer9vF5oVSyC9KsZAr2ynJqoUkSUdDlHnvV8AGh4mhpAwNj6Jfa4VYISyuJ0plqbWyeZUmGLUINpqV18o3enUs4lMDS9l0jfja2UKhenHKnyloF8He7xkD1Bi1VjagIkDPQ6mXyzd6cSxASPncgq9FT/X2sXFmXGJYF2MG6jRWI0B0pZ7vlems+Qr57vcvIwaxrIsnA/UaqxHg+Kg6iOrxF1Gb7vX5UHuF5QpeLVoasISFaXG6Z4DaosaqkWoE6N3Q6gfVAaI454AjTLkQi5jWxYyBBtpaJUA1Js9CqbUfmDWYD2+qxUC/jQMTYlsXDwaoKWqr3ppVAhxX3trAvfUBTV1zns+UM4ltyuYBxt27rK2aLK4SIO/qBlVlTawQLzjJbMqZxDZl86DiNtNUQwFuGpOfYFI3/P0pGrDL1xdNOZPYpmweRFxqiZpqlLeGAkR7nRelv9coQth+2uAbeSaxw+ZhoPGgJU9TDTLZUIAMN5RyHkck40NJkwMFk9gNuLReDRighqilBrc8r6YCXK/UNObnnmwWMSz/fN5cH9Akdlj5H3QcaohaapbPpgJkhKQ4jzarOpsBBvVfzJkbBZvEDprPtRie2qGGWuW9pQDHxtS7GBI/1Qqg23tz8/PdQjSNbxK7aaL2xgoD0I6noRWfVWctBcjQKuF8B0o2NlSdnyvtn7LKshA8TGKHYN5AQ1Az1E67TLYVIJ7dHcLM4HPtgDq+j6fTp2bCn/HxMO1C1Y6LpfuI+rmSdlojtRUgoyvH+ToUbWSdUyqVkuPvnZBiMbxKlljEJLZ10TNArVAzflL2JUCuYMCUxmN+AIOGmZiYwPL6vBw6fDRo1KbhiUVMYlsXPQPUSv2ql2ZW+BIgI28acx6Bso80A+rUf+tEafOeubm0HD12vFOYSjxiEIuujF25aU+MM0CNUCt+E/ItQABnHUfd5xfYb7hkMinbtm33gr8/fUqmDr7TUXPMZpdxiUFHTGJbFy0D1Ai14jdV3wIk4MZRtRevoL3gF9xvuMsv/4AMJRJecNZev/7t24EGJhxwME655iMWMa2LmAFow9NIgGQrb8X5jTOq1JfwfO5mzA+O+Y3TLlxyZESuvOpqefPN33hB2X87fOQYBhInZfPmcdm8aVxGkyMyMlx6NW4pnxdOMs/Npz3RLS3VTmYTi5jWRciAUhlqI2iKgQWYSqlj81n9TXQ0/yFoYq3Cb53YKjt3XiGHDq2s2KawpqdnvF+ruNX3iEEs0y45pCRXKC145XmvXa/tQbP7TWojKA8dMQfxJdJZ/XMcdwVNsF3407On5Xf/95YUAk7LsNllzReF+JiHM+cKMnWiNDM1uT0pWzYE/i+3oyLQ/V7aA/HtH0+pT+IYeC6tIwGSmQWtt+Uz+ld42HxhIKZ8BM6h5jt69LCcPHnCR+jSgIN9Ptvs+qIr1EBY63dqeEx9ZJ1SJzsB7liATGx+Ud8srv4pasJAgxm/huZyOTk9OyOzs7OSzWYxt1eqcUZGkt4kM+f5ONViR7t+GQ03HGo8F/sWf2rTqPpZp8hdCZCJzi8Uv4We0N91aoCN178MQDzf3rQu8dVuctC1ANkfxKBkH0bFn+jGEBu3zxhQ6pVNKbW7k35fdU67FiDBFhb09rx4/cHSY43qFOz5wDGAft/MsKDft07566S3YCCUvhsNwT/hFkxSZ1qkZW8NAgMoY5Z1GOIjHaEIkEDjY+oAHsPcBuPMrbFnQtb1jAGWLcuYZR2WEaEJkAZhBcSLMPIL+JVmaMOy0uL0nAGWKcuWZRymMaEKkIZhQvJpLepvwzTSYvWeAZYpyzZsS0IXIA3cPKbwSqcYWT8YNgEWrz0DLEuWafuQwUOEMgpulCymZ1Q64/4b2uJ7G923fv3BAATy5PiY80VT3SojNSCppcElw21N2B9SW20laz6T4vN0sjrZ8H3mMvp+Jfq7rBXDR7eIYTPAyoN9PlPNbrW9kQkCq2fuhAC/j19vl41U596er2IA4ivg9wUTA45VicEjMgEy8fSi/rTr6ufDXMzaKFPWr0MGMMnszfOFPNXSyppIBUhD0hl9LWrBH2MZl31s16pkIr7Hx2uo+W4Jc5LZTxaMDUKaJc4M8jkiRimvNAtj/SNmAGXBMolafMxl5AJkonyO6K2kwHIe/Otc+lkXPQPkHk3gt1kWYT3bDZqLyJvgegO9Ra1Fjacn4a+srk/LXq8wwJXMklB3drOYdAWt87OeC5Cme8v7s/oZ9A13dZ4VG9MvA6j59g+n1Oc7XUbvNx0/4XrSBNcbRiK8l1oc5yt2SVc9OyFecykVOCbXcRAfcxaLGrCa4mxWX7ao9ROYqrm12t+ed8mAUj/Ce7v3dfLqZJcpt4weOwGWrT27qPdgzvAJNMs7yn72GJwBNLdHuF1G0B0LgqfUWYzYCpDZgfhS8xn3YZD4IM7tVgcByhic5cDZY8ubSvneqyVAEqEEjbUAyznEE5QrtOt+Az2G20FqaROZ8k17rGEAwsPL4fo57s/nd4u0GoCIL/pCgGVOIMSduug+hIHK3RBi1TfUyyHW7hHCw3th+iluiwvhYVfb/nB9JcAypZmMvjQn7oOYy7oXQhwt+6/FI4S3yE8hcDf6dhuCx5GfvhRgmcjzWl9UyLr3i1b3oBDW1Hao+PPN8mtW/AhMq+9wlLmK67GvBVgmlc3xfEY+i2Vsd8FvD64HcsCC2o770O3lh/+87/mx2e1zNxACrC6DtNZbdEbuQO3AfuJ11ff69RzCex21/FP83m6jT572a75o98AJsLowvNGzltvQOb8J76bcgGN/bJuPLW5RMK9hsPUylsU/3w+j2Wreg5wPtACriUBtmDy/KNcVXHc3CnY3Ms51ibEYSXMEiz/IAfxB9g05zr71o/I6/EpbgVVnYgDP14wA68sO4luXzsmNouUa5bqTeOt6EueTGMxsqQ8b5jUGD2fQ7kzhrYsp7ThTOH9jPCmvQnALYabTL1hrVoDNCuis1lslK5NFJZNKu/jJhRDnBohzA8SyAW/rYNCJ8+VrD0fLOdw7h3vncO887nnXENk5vIZ1SitnKqFlSlIytVGp083SXov+/w8nKDA07uUpHQAAAABJRU5ErkJggg=="},function(s,t,a){a(522);var l=a(13)(null,a(524),"data-v-001a30c3",null);s.exports=l.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("设计原则")]),l("el-row",{staticClass:"cards",attrs:{gutter:14}},[l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(517),alt:"Consistency"}}),l("h4",[s._v("一致")]),l("span",[s._v("Consistency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(518),alt:"Feedback"}}),l("h4",[s._v("反馈")]),l("span",[s._v("Feedback")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(519),alt:"Efficiency"}}),l("h4",[s._v("效率")]),l("span",[s._v("Efficiency")])])]),l("el-col",{attrs:{xs:12,sm:6}},[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(520),alt:"Controllability"}}),l("h4",[s._v("可控")]),l("span",[s._v("Controllability")])])])],1),l("h3",[s._v("一致性 Consistency")]),s._m(0),l("h3",[s._v("反馈 Feedback")]),s._m(1),l("h3",[s._v("效率 Efficiency")]),s._m(2),l("h3",[s._v("可控 Controllability")]),s._m(3)],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("与现实生活一致：")]),s._v("与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；")]),a("li",[a("strong",[s._v("在界面中一致：")]),s._v("所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("控制反馈：")]),s._v("通过界面样式和交互动效让用户可以清晰的感知自己的操作；")]),a("li",[a("strong",[s._v("页面反馈：")]),s._v("操作后，通过页面元素的变化清晰地展现当前状态。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("简化流程：")]),s._v("设计简洁直观的操作流程；")]),a("li",[a("strong",[s._v("清晰明确：")]),s._v("语言表达清晰且表意明确，让用户快速理解进而作出决策；")]),a("li",[a("strong",[s._v("帮助用户识别：")]),s._v("界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("ul",[a("li",[a("strong",[s._v("用户决策：")]),s._v("根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；")]),a("li",[a("strong",[s._v("结果可控：")]),s._v("用户可以自由的进行操作，包括撤销、回退和终止当前操作等。")])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/nav.vue":526,"./zh-CN/nav.vue":535};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=525},function(s,t,a){a(527);var l=a(13)(a(529),a(530),"data-v-d0518674",null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,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}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("Navigation")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("Side Navigation")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(531),alt:"Level 1 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 1 categories")]),l("p",[s._v("Suitable for simply structured sites with only one level of pages. No breadcrumb is needed.")]),l("img",{attrs:{src:a(532),alt:"Level 2 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 2 categories")]),l("p",[s._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.")]),l("img",{attrs:{src:a(533),alt:"Level 3 categories"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("Level 3 categories")]),l("p",[s._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),l("div",{staticClass:"block"},[l("h3",[s._v("Top Navigation")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._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.")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(534),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("Suitable for sites with few navigations and large chunks.")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._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,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("Choose the right navigation")]),a("p",[s._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")])])}]}},function(s,t,a){s.exports=a.p+"static/navbar_1.499e088.png"},function(s,t,a){s.exports=a.p+"static/navbar_2.59ecae2.png"},function(s,t,a){s.exports=a.p+"static/navbar_3.8dcec92.png"},function(s,t,a){s.exports=a.p+"static/navbar_0.b608f86.png"},function(s,t,a){a(536);var l=a(13)(a(538),a(539),"data-v-30267424",null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={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={},n=document;l.left=(n.body.scrollWidth-s)/2,l.top=100,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}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[l("h2",[s._v("导航")]),s._m(0),s._m(1),l("div",{staticClass:"block"},[l("h3",[s._v("侧栏导航")]),l("el-row",{attrs:{gutter:20}},[l("el-col",{attrs:{span:9}},[l("p",[s._v("可将导航栏固定在左侧，提高导航可见性，方便页面之间切换；顶部可放置常用工具，如搜索条、帮助按钮、通知按钮等。适用于中后台的管理型、工具型网站。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:15}},[l("img",{attrs:{src:a(531),alt:"一级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("一级类目")]),l("p",[s._v("适用于结构简单的网站：只有一级页面时，不需要使用面包屑。")]),l("img",{attrs:{src:a(532),alt:"二级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("二级类目")]),l("p",[s._v("侧栏中最多可显示两级导航；当使用二级导航时，我们建议搭配使用面包屑，方便用户定位自己的位置和快速返回。")]),l("img",{attrs:{src:a(533),alt:"三级类目"},on:{click:function(t){s.enlarge(846,t)}}}),l("h5",[s._v("三级类目")]),l("p",[s._v("适用于较复杂的工具型后台，左侧栏为一级导航，中间栏可显示其对应的二级导航，也可放置其他的工具型选项。")])])],1)],1),l("div",{staticClass:"block"},[l("h3",[s._v("顶部导航")]),l("el-row",[l("el-col",{attrs:{span:10}},[l("p",[s._v("顺应了从上至下的正常浏览顺序，方便浏览信息；顶部宽度限制了导航的数量和文本长度。")])]),l("el-col",{staticClass:"nav-demos",attrs:{span:14}},[l("img",{attrs:{src:a(534),alt:""},on:{click:function(t){s.enlarge(846,t)}}}),l("p",[s._v("适用于导航较少，页面篇幅较长的网站。")])])],1)],1),l("transition",{attrs:{name:"fade"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"mask",on:{click:function(t){s.showDialog=!1}}})]),l("transition",{attrs:{name:"zoom"}},[l("div",{directives:[{name:"show",rawName:"v-show",value:s.showDialog,expression:"showDialog"}],staticClass:"dialog-img",style:s.imgWrapStyle,on:{click:function(t){s.showDialog=!1}}},[l("div",{staticClass:"imgWrap",style:s.imgStyle},[l("img",{attrs:{src:s.imgUrl,alt:""}})])])])],1)},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("p",[s._v("导航可以解决用户在访问页面时：在哪里，去哪里，怎样去的问题。一般导航会有「侧栏导航」和「顶部导航」2 种类型。")])])},function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"block"},[a("h3",[s._v("选择合适的导航")]),a("p",[s._v("选择合适的导航可以让用户在产品的使用过程中非常流畅，相反若是不合适就会引起用户操作不适（方向不明确），以下是「侧栏导航」和 「顶部导航」的区别。")])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/resource.vue":541,"./zh-CN/resource.vue":548};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=540},function(s,t,a){a(542);var l=a(13)(null,a(544),"data-v-bc99180a",null);s.exports=l.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("Resource")]),l("p",[s._v("Here you can download design resources and tools that shaped Element UI. More design resources are being prepared.")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(545),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("By importing Element UI in Axure, you can easily apply all the components we provide during interaction design.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(546),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("Apply components from Element template, so you can improve design efficiency while keeping a unified visual style.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("Download")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(547),alt:""}}),l("h3",[s._v("Interaction Design Documentation")]),l("p",[s._v("Take a closer look at the interaction design documentation. Learn more details of each component from a microcosmic perspective.")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("Download")])])])])])])}]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjExMHB4IiBoZWlnaHQ9Ijg3cHgiIHZpZXdCb3g9IjAgMCAxMTAgODciIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgc3R5bGU9ImJhY2tncm91bmQ6ICNGRkZGRkY7Ij4KICAgIDwhLS0gR2VuZXJhdG9yOiBTa2V0Y2ggMzkuMSAoMzE3MjApIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPkF4dXJlIENvbXBvbmVudHNfaWNvbjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJBeHVyZS1Db21wb25lbnRzX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0ic2l0ZW1hcCI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik04Ny4yNDEzODY3LDQ5LjUxNzgzMiBMNTYuODk2NjQwNiw0OS41MTc4MzIgTDU2Ljg5NjY0MDYsNDEuOTMxNjk5MiBMNTMuMTAzNTc0Miw0MS45MzE2OTkyIEw1My4xMDM1NzQyLDQ5LjUxNzgzMiBMMjIuNzU4NjEzMyw0OS41MTc4MzIgQzIxLjcxMTI1LDQ5LjUxNzgzMiAyMC44NjE5NzI3LDUwLjM2NzEwOTQgMjAuODYxOTcyNyw1MS40MTQ0NzI3IEwyMC44NjE5NzI3LDYwLjg5NzI0NjEgTDI0LjY1NTAzOTEsNjAuODk3MjQ2MSBMMjQuNjU1MDM5MSw1My4zMTExMTMzIEw1My4xMDMzNTk0LDUzLjMxMTExMzMgTDUzLjEwMzM1OTQsNjAuODk3MjQ2MSBMNTYuODk2NDI1OCw2MC44OTcyNDYxIEw1Ni44OTY0MjU4LDUzLjMxMTExMzMgTDg1LjM0NDc0NjEsNTMuMzExMTEzMyBMODUuMzQ0NzQ2MSw2MC44OTcyNDYxIEw4OS4xMzc4MTI1LDYwLjg5NzI0NjEgTDg5LjEzNzgxMjUsNTEuNDE0MjU3OCBDODkuMTM4MDI3Myw1MC4zNjY4OTQ1IDg4LjI4ODc1LDQ5LjUxNzgzMiA4Ny4yNDEzODY3LDQ5LjUxNzgzMiBMODcuMjQxMzg2Nyw0OS41MTc4MzIgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjREVFQkZEIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEwNC4zMTAyOTMsMCBMNS42ODk3MDcwMywwIEMyLjU0NzQwMjM0LDAgMCwyLjU0MDE0NTk5IDAsNS42NzM3NjQgTDAsODEuMzI2MDIxOCBDMCw4NC40NTk2Mzk4IDIuNTQ3NDAyMzQsODcgNS42ODk3MDcwMyw4NyBMMTA0LjMxMDI5Myw4NyBDMTA3LjQ1MjU5OCw4NyAxMTAsODQuNDU5NjM5OCAxMTAsODEuMzI2MDIxOCBMMTEwLDUuNjczNzY0IEMxMTAsMi41NDAxNDU5OSAxMDcuNDUyNTk4LDAgMTA0LjMxMDI5MywwIEwxMDQuMzEwMjkzLDAgWiBNMTA2LjIwNjkzNCw4MS41NTE2Nzk3IEMxMDYuMjA2OTM0LDgyLjU5OTA0MyAxMDUuMzU3NjU2LDgzLjQ0ODMyMDMgMTA0LjMxMDI5Myw4My40NDgzMjAzIEw1LjY4OTcwNzAzLDgzLjQ0ODMyMDMgQzQuNjQyMzQzNzUsODMuNDQ4MzIwMyAzLjc5MzA2NjQxLDgyLjU5OTA0MyAzLjc5MzA2NjQxLDgxLjU1MTY3OTcgTDMuNzkzMDY2NDEsMTMuMjc1ODM5OCBDMy43OTMwNjY0MSwxMi4yMjg0NzY2IDQuNjQyMzQzNzUsMTEuMzc5MTk5MiA1LjY4OTcwNzAzLDExLjM3OTE5OTIgTDEwNC4zMTAyOTMsMTEuMzc5MTk5MiBDMTA1LjM1NzY1NiwxMS4zNzkxOTkyIDEwNi4yMDY5MzQsMTIuMjI4NDc2NiAxMDYuMjA2OTM0LDEzLjI3NTgzOTggTDEwNi4yMDY5MzQsODEuNTUxNjc5NyBMMTA2LjIwNjkzNCw4MS41NTE2Nzk3IFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbCIgZmlsbD0iI0RERUFGQyIgY3g9IjUuNjg5NzA3MDMiIGN5PSI1Ljg5NzAzMTI1IiByPSIxLjg5NjY0MDYyIj48L2NpcmNsZT4KICAgICAgICAgICAgICAgIDxjaXJjbGUgaWQ9Ik92YWwiIGZpbGw9IiNEREVBRkMiIGN4PSIxMS4zNzk0MTQxIiBjeT0iNS44OTcwMzEyNSIgcj0iMS44OTY2NDA2MiI+PC9jaXJjbGU+CiAgICAgICAgICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsIiBmaWxsPSIjRERFQUZDIiBjeD0iMTcuMDY4OTA2MiIgY3k9IjUuODk3MDMxMjUiIHI9IjEuODk2NjQwNjIiPjwvY2lyY2xlPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTM0LjI4OTkyMTksNDMuODI4MTI1IEMzMy4xNTg1NTQ3LDQzLjgyODEyNSAzMi4yNDEzODY3LDQyLjkxMDk1NyAzMi4yNDEzODY3LDQxLjc3OTU4OTggTDMyLjI0MTM4NjcsMTkuMzI0OTgwNSBDMzIuMjQxMzg2NywxOC4xOTM2MTMzIDMzLjE1ODU1NDcsMTcuMjc2NDQ1MyAzNC4yODk5MjE5LDE3LjI3NjQ0NTMgTDc1LjcxMDA3ODEsMTcuMjc2NDQ1MyBDNzYuODQxNDQ1MywxNy4yNzY0NDUzIDc3Ljc1ODYxMzMsMTguMTkzNjEzMyA3Ny43NTg2MTMzLDE5LjMyNDk4MDUgTDc3Ljc1ODYxMzMsNDEuNzc5NTg5OCBDNzcuNzU4NjEzMyw0Mi45MTA5NTcgNzYuODQxNDQ1Myw0My44MjgxMjUgNzUuNzEwMDc4MSw0My44MjgxMjUgTDM0LjI4OTkyMTksNDMuODI4MTI1IFoiIGlkPSJTaGFwZSIgZmlsbD0iIzIwQTBGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgPHBhdGggZD0iTTY2Ljk1MzQ3NjYsNzcuOTY2MTUyMyBMNDMuMDQ2NTIzNCw3Ny45NjYxNTIzIEM0Mi4zMTYyNjk1LDc3Ljk2NjE1MjMgNDEuNzI0MTYwMiw3Ny4zNzQyNTc4IDQxLjcyNDE2MDIsNzYuNjQzNzg5MSBMNDEuNzI0MTYwMiw2MC4zMjI3NTM5IEM0MS43MjQxNjAyLDU5LjU5MjI4NTIgNDIuMzE2MDU0Nyw1OS4wMDAzOTA2IDQzLjA0NjUyMzQsNTkuMDAwMzkwNiBMNjYuOTUzNjkxNCw1OS4wMDAzOTA2IEM2Ny42ODQxNjAyLDU5LjAwMDM5MDYgNjguMjc2MDU0Nyw1OS41OTIyODUyIDY4LjI3NjA1NDcsNjAuMzIyNzUzOSBMNjguMjc2MDU0Nyw3Ni42NDM3ODkxIEM2OC4yNzU4Mzk4LDc3LjM3NDA0MyA2Ny42ODM5NDUzLDc3Ljk2NjE1MjMgNjYuOTUzNDc2Niw3Ny45NjYxNTIzIEw2Ni45NTM0NzY2LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM1Ljg3ODkwNiwgMjEuMDU0Njg4KSIgZmlsbD0iIzIxOThGMCI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTM2LjE5LDExLjM5NDAyMzQgTDIuMDUyMTg3NSwxMS4zOTQwMjM0IEMxLjAwNDgyNDIyLDExLjM5NDAyMzQgMC4xNTU1NDY4NzUsMTAuNTQ0NzQ2MSAwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEwwLjE1NTU0Njg3NSw5LjQ5NzM4MjgxIEMwLjE1NTU0Njg3NSw4LjQ1MDAxOTUzIDEuMDA0ODI0MjIsNy42MDA3NDIxOSAyLjA1MjE4NzUsNy42MDA3NDIxOSBMMzYuMTkwMjE0OCw3LjYwMDc0MjE5IEMzNy4yMzc1NzgxLDcuNjAwNzQyMTkgMzguMDg2ODU1NSw4LjQ1MDAxOTUzIDM4LjA4Njg1NTUsOS40OTczODI4MSBMMzguMDg2ODU1NSw5LjQ5NzM4MjgxIEMzOC4wODY2NDA2LDEwLjU0NDk2MDkgMzcuMjM3MzYzMywxMS4zOTQwMjM0IDM2LjE5LDExLjM5NDAyMzQgTDM2LjE5LDExLjM5NDAyMzQgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMyLjM5NjkzMzYsMy44MDc4OTA2MyBMNS44NDUyNTM5MSwzLjgwNzg5MDYzIEM0Ljc5Nzg5MDYyLDMuODA3ODkwNjMgMy45NDg2MTMyOCwyLjk1ODYxMzI4IDMuOTQ4NjEzMjgsMS45MTEyNSBMMy45NDg2MTMyOCwxLjkxMTI1IEMzLjk0ODYxMzI4LDAuODYzODg2NzE5IDQuNzk3ODkwNjIsMC4wMTQ2MDkzNzUgNS44NDUyNTM5MSwwLjAxNDYwOTM3NSBMMzIuMzk2OTMzNiwwLjAxNDYwOTM3NSBDMzMuNDQ0Mjk2OSwwLjAxNDYwOTM3NSAzNC4yOTM1NzQyLDAuODYzODg2NzE5IDM0LjI5MzU3NDIsMS45MTEyNSBMMzQuMjkzNTc0MiwxLjkxMTI1IEMzNC4yOTM1NzQyLDIuOTU4ODI4MTMgMzMuNDQ0Mjk2OSwzLjgwNzg5MDYzIDMyLjM5NjkzMzYsMy44MDc4OTA2MyBMMzIuMzk2OTMzNiwzLjgwNzg5MDYzIFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDEzLjQzMTM4NjcsMTguOTgwMzcxMSBDMTIuMzg0MDIzNCwxOC45ODAzNzExIDExLjUzNDc0NjEsMTguMTMxMDkzOCAxMS41MzQ3NDYxLDE3LjA4MzczMDUgTDExLjUzNDc0NjEsMTcuMDgzNzMwNSBDMTEuNTM0NzQ2MSwxNi4wMzYzNjcyIDEyLjM4NDAyMzQsMTUuMTg3MDg5OCAxMy40MzEzODY3LDE1LjE4NzA4OTggTDI0LjgxMDgwMDgsMTUuMTg3MDg5OCBDMjUuODU4MTY0MSwxNS4xODcwODk4IDI2LjcwNzQ0MTQsMTYuMDM2MzY3MiAyNi43MDc0NDE0LDE3LjA4MzczMDUgTDI2LjcwNzQ0MTQsMTcuMDgzNzMwNSBDMjYuNzA3MjI2NiwxOC4xMzEwOTM4IDI1Ljg1ODE2NDEsMTguOTgwMzcxMSAyNC44MTA4MDA4LDE4Ljk4MDM3MTEgTDI0LjgxMDgwMDgsMTguOTgwMzcxMSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNDUuMzMyMDMxLCA2Mi43MzQzNzUpIiBmaWxsPSIjRkZBQ0FEIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEw1Ljg3NDkwMjM0LDExLjQzODQ5NjEgQzQuODI3NTM5MDYsMTEuNDM4NDk2MSAzLjk3ODI2MTcyLDEwLjU4OTIxODggMy45NzgyNjE3Miw5LjU0MTg1NTQ3IEwzLjk3ODI2MTcyLDkuNTQxODU1NDcgQzMuOTc4MjYxNzIsOC40OTQ0OTIxOSA0LjgyNzUzOTA2LDcuNjQ1MjE0ODQgNS44NzQ5MDIzNCw3LjY0NTIxNDg0IEwxMy40NjEwMzUyLDcuNjQ1MjE0ODQgQzE0LjUwODM5ODQsNy42NDUyMTQ4NCAxNS4zNTc2NzU4LDguNDk0NDkyMTkgMTUuMzU3Njc1OCw5LjU0MTg1NTQ3IEwxNS4zNTc2NzU4LDkuNTQxODU1NDcgQzE1LjM1NzY3NTgsMTAuNTg5NDMzNiAxNC41MDgzOTg0LDExLjQzODQ5NjEgMTMuNDYxMDM1MiwxMS40Mzg0OTYxIEwxMy40NjEwMzUyLDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjI1NDEwMTYsMy44NTIzNjMyOCBMMi4wODE4MzU5NCwzLjg1MjM2MzI4IEMxLjAzNDQ3MjY2LDMuODUyMzYzMjggMC4xODUxOTUzMTMsMy4wMDMwODU5NCAwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEwwLjE4NTE5NTMxMywxLjk1NTcyMjY2IEMwLjE4NTE5NTMxMywwLjkwODM1OTM3NSAxLjAzNDQ3MjY2LDAuMDU5MDgyMDMxMiAyLjA4MTgzNTk0LDAuMDU5MDgyMDMxMiBMMTcuMjU0MzE2NCwwLjA1OTA4MjAzMTIgQzE4LjMwMTY3OTcsMC4wNTkwODIwMzEyIDE5LjE1MDk1NywwLjkwODM1OTM3NSAxOS4xNTA5NTcsMS45NTU3MjI2NiBMMTkuMTUwOTU3LDEuOTU1NzIyNjYgQzE5LjE1MDc0MjIsMy4wMDMwODU5NCAxOC4zMDE0NjQ4LDMuODUyMzYzMjggMTcuMjU0MTAxNiwzLjg1MjM2MzI4IEwxNy4yNTQxMDE2LDMuODUyMzYzMjggWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNOTkuMTk0ODYzMyw3Ny45NjYxNTIzIEw3NS4yODc5MTAyLDc3Ljk2NjE1MjMgQzc0LjU1NzQ0MTQsNzcuOTY2MTUyMyA3My45NjU1NDY5LDc3LjM3NDI1NzggNzMuOTY1NTQ2OSw3Ni42NDM3ODkxIEw3My45NjU1NDY5LDYwLjMyMjc1MzkgQzczLjk2NTU0NjksNTkuNTkyMjg1MiA3NC41NTc0NDE0LDU5LjAwMDM5MDYgNzUuMjg3OTEwMiw1OS4wMDAzOTA2IEw5OS4xOTUwNzgxLDU5LjAwMDM5MDYgQzk5LjkyNTU0NjksNTkuMDAwMzkwNiAxMDAuNTE3NDQxLDU5LjU5MjI4NTIgMTAwLjUxNzQ0MSw2MC4zMjI3NTM5IEwxMDAuNTE3NDQxLDc2LjY0Mzc4OTEgQzEwMC41MTcyMjcsNzcuMzc0MDQzIDk5LjkyNTMzMiw3Ny45NjYxNTIzIDk5LjE5NDg2MzMsNzcuOTY2MTUyMyBMOTkuMTk0ODYzMyw3Ny45NjYxNTIzIFoiIGlkPSJTaGFwZSIgZmlsbD0iI0YyRjhGRSI+PC9wYXRoPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg3Ny41NTg1OTQsIDYyLjczNDM3NSkiIGZpbGw9IiNERUVCRjgiPgogICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMy40NzU4NTk0LDExLjQzODQ5NjEgTDUuODg5NzI2NTYsMTEuNDM4NDk2MSBDNC44NDIzNjMyOCwxMS40Mzg0OTYxIDMuOTkzMDg1OTQsMTAuNTg5MjE4OCAzLjk5MzA4NTk0LDkuNTQxODU1NDcgTDMuOTkzMDg1OTQsOS41NDE4NTU0NyBDMy45OTMwODU5NCw4LjQ5NDQ5MjE5IDQuODQyMzYzMjgsNy42NDUyMTQ4NCA1Ljg4OTcyNjU2LDcuNjQ1MjE0ODQgTDEzLjQ3NTg1OTQsNy42NDUyMTQ4NCBDMTQuNTIzMjIyNyw3LjY0NTIxNDg0IDE1LjM3MjUsOC40OTQ0OTIxOSAxNS4zNzI1LDkuNTQxODU1NDcgTDE1LjM3MjUsOS41NDE4NTU0NyBDMTUuMzcyNSwxMC41ODk0MzM2IDE0LjUyMzIyMjcsMTEuNDM4NDk2MSAxMy40NzU4NTk0LDExLjQzODQ5NjEgTDEzLjQ3NTg1OTQsMTEuNDM4NDk2MSBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMTcuMjY4OTI1OCwzLjg1MjM2MzI4IEwyLjA5NjQ0NTMxLDMuODUyMzYzMjggQzEuMDQ5MDgyMDMsMy44NTIzNjMyOCAwLjE5OTgwNDY4OCwzLjAwMzA4NTk0IDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgTDAuMTk5ODA0Njg4LDEuOTU1NzIyNjYgQzAuMTk5ODA0Njg4LDAuOTA4MzU5Mzc1IDEuMDQ5MDgyMDMsMC4wNTkwODIwMzEyIDIuMDk2NDQ1MzEsMC4wNTkwODIwMzEyIEwxNy4yNjg5MjU4LDAuMDU5MDgyMDMxMiBDMTguMzE2Mjg5MSwwLjA1OTA4MjAzMTIgMTkuMTY1NTY2NCwwLjkwODM1OTM3NSAxOS4xNjU1NjY0LDEuOTU1NzIyNjYgTDE5LjE2NTU2NjQsMS45NTU3MjI2NiBDMTkuMTY1NTY2NCwzLjAwMzA4NTk0IDE4LjMxNjI4OTEsMy44NTIzNjMyOCAxNy4yNjg5MjU4LDMuODUyMzYzMjggTDE3LjI2ODkyNTgsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNC43MTIwODk4LDc3Ljk2NjE1MjMgTDEwLjgwNTEzNjcsNzcuOTY2MTUyMyBDMTAuMDc0ODgyOCw3Ny45NjYxNTIzIDkuNDgyNzczNDQsNzcuMzc0MjU3OCA5LjQ4Mjc3MzQ0LDc2LjY0Mzc4OTEgTDkuNDgyNzczNDQsNjAuMzIyNzUzOSBDOS40ODI3NzM0NCw1OS41OTIyODUyIDEwLjA3NDY2OCw1OS4wMDAzOTA2IDEwLjgwNTEzNjcsNTkuMDAwMzkwNiBMMzQuNzEyMzA0Nyw1OS4wMDAzOTA2IEMzNS40NDI1NTg2LDU5LjAwMDM5MDYgMzYuMDM0NjY4LDU5LjU5MjI4NTIgMzYuMDM0NjY4LDYwLjMyMjc1MzkgTDM2LjAzNDY2OCw3Ni42NDM3ODkxIEMzNi4wMzQ0NTMxLDc3LjM3NDA0MyAzNS40NDI1NTg2LDc3Ljk2NjE1MjMgMzQuNzEyMDg5OCw3Ny45NjYxNTIzIEwzNC43MTIwODk4LDc3Ljk2NjE1MjMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEzLjEwNTQ2OSwgNjIuNzM0Mzc1KSIgZmlsbD0iIzY0OTZEQyI+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEzLjQ0NjIxMDksMTEuNDM4NDk2MSBMNS44NjAwNzgxMywxMS40Mzg0OTYxIEM0LjgxMjcxNDg0LDExLjQzODQ5NjEgMy45NjM0Mzc1LDEwLjU4OTIxODggMy45NjM0Mzc1LDkuNTQxODU1NDcgTDMuOTYzNDM3NSw5LjU0MTg1NTQ3IEMzLjk2MzQzNzUsOC40OTQ0OTIxOSA0LjgxMjcxNDg0LDcuNjQ1MjE0ODQgNS44NjAwNzgxMyw3LjY0NTIxNDg0IEwxMy40NDYyMTA5LDcuNjQ1MjE0ODQgQzE0LjQ5MzU3NDIsNy42NDUyMTQ4NCAxNS4zNDI4NTE2LDguNDk0NDkyMTkgMTUuMzQyODUxNiw5LjU0MTg1NTQ3IEwxNS4zNDI4NTE2LDkuNTQxODU1NDcgQzE1LjM0Mjg1MTYsMTAuNTg5NDMzNiAxNC40OTM1NzQyLDExLjQzODQ5NjEgMTMuNDQ2MjEwOSwxMS40Mzg0OTYxIEwxMy40NDYyMTA5LDExLjQzODQ5NjEgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE3LjIzOTI3NzMsMy44NTIzNjMyOCBMMi4wNjcwMTE3MiwzLjg1MjM2MzI4IEMxLjAxOTY0ODQ0LDMuODUyMzYzMjggMC4xNzAzNzEwOTQsMy4wMDMwODU5NCAwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEwwLjE3MDM3MTA5NCwxLjk1NTcyMjY2IEMwLjE3MDM3MTA5NCwwLjkwODM1OTM3NSAxLjAxOTY0ODQ0LDAuMDU5MDgyMDMxMiAyLjA2NzAxMTcyLDAuMDU5MDgyMDMxMiBMMTcuMjM5NDkyMiwwLjA1OTA4MjAzMTIgQzE4LjI4Njg1NTUsMC4wNTkwODIwMzEyIDE5LjEzNjEzMjgsMC45MDgzNTkzNzUgMTkuMTM2MTMyOCwxLjk1NTcyMjY2IEwxOS4xMzYxMzI4LDEuOTU1NzIyNjYgQzE5LjEzNTkxOCwzLjAwMzA4NTk0IDE4LjI4NjY0MDYsMy44NTIzNjMyOCAxNy4yMzkyNzczLDMuODUyMzYzMjggTDE3LjIzOTI3NzMsMy44NTIzNjMyOCBaIiBpZD0iU2hhcGUiPjwvcGF0aD4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9Ijg4cHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDg4IDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2tldGNoIFRlbXBsYXRlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iU2tldGNoLVRlbXBsYXRlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtMjUiPgogICAgICAgICAgICAgICAgPGcgaWQ9ImJyb3dzZXIiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMC4wNDI3MzUsIDYuNzcyMjY5KSIgZmlsbD0iI0M5RTFGQiIgb3BhY2l0eT0iMC4yMzg4MDU5NyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjIwMDg4NDc2LDI4LjUwNTczMzcgTDQ0LjE3MDEzOTEsMjguNTA1NzMzNyBDNDUuOTEwNTI2NSwyOC41MDU3MzM3IDQ3LjMyMTc1NzUsMjcuMTAyNjMxMiA0Ny4zMjE3NTc1LDI1LjM3MjI2ODIgTDQ3LjMyMTc1NzUsMC4zMDU2MDg3MjUgQzQ3LjMyMTc1NzUsMi4wMzU5NzE3MiA0NS45MTA1MjY1LDMuNDM5MDc0MjYgNDQuMTcwMTM5MSwzLjQzOTA3NDI2IEwzLjIwMDg4NDc2LDMuNDM5MDc0MjYgQzEuNDYwNDk3MzksMy40MzkwNzQyNiAwLjA0OTI2NjM1MDMsMi4wMzU5NzE3MiAwLjA0OTI2NjM1MDMsMC4zMDU2MDg3MjUgTDAuMDQ5MjY2MzUwMywyNS4zNzIyNjgyIEMwLjA0OTI2NjM1MDMsMjcuMTAyOTg2MSAxLjQ2MDE0MDM4LDI4LjUwNTczMzcgMy4yMDA4ODQ3NiwyOC41MDU3MzM3IEwzLjIwMDg4NDc2LDI4LjUwNTczMzcgWiIgaWQ9IlNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik01OS45MjcxNjAxLDI4LjUwNTczMzcgTDc4LjgzNjE1NjYsMjguNTA1NzMzNyBDODAuNTc2NTQ0LDI4LjUwNTczMzcgODEuOTg3Nzc1LDI3LjEwMjYzMTIgODEuOTg3Nzc1LDI1LjM3MjI2ODIgTDgxLjk4Nzc3NSwwLjMwNTYwODcyNSBDODEuOTg3Nzc1LDIuMDM1OTcxNzIgODAuNTc2NTQ0LDMuNDM5MDc0MjYgNzguODM2MTU2NiwzLjQzOTA3NDI2IEw1OS45MjcxNjAxLDMuNDM5MDc0MjYgQzU4LjE4Njc3MjgsMy40MzkwNzQyNiA1Ni43NzU1NDE3LDIuMDM1OTcxNzIgNTYuNzc1NTQxNywwLjMwNTYwODcyNSBMNTYuNzc1NTQxNywyNS4zNzIyNjgyIEM1Ni43NzU1NDE3LDI3LjEwMjk4NjEgNTguMTg2NzcyOCwyOC41MDU3MzM3IDU5LjkyNzE2MDEsMjguNTA1NzMzNyBMNTkuOTI3MTYwMSwyOC41MDU3MzM3IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEw0NC4yMTI4NzM2LDEwLjIxMTY5ODYgQzQ1Ljk1MzI2MSwxMC4yMTE2OTg2IDQ3LjM2NDQ5Miw4LjgwODU5NjAzIDQ3LjM2NDQ5Miw3LjA3ODIzMzA0IEw0Ny4zNjQ0OTIsMy45NDQ3Njc1MSBDNDcuMzY0NDkyLDIuMjE0NDA0NTEgNDUuOTUzMjYxLDAuODExMzAxOTY5IDQ0LjIxMjg3MzYsMC44MTEzMDE5NjkgTDMuMjQzNjE5MjksMC44MTEzMDE5NjkgQzEuNTAzMjMxOTEsMC44MTEzMDE5NjkgMC4wOTIwMDA4NzY0LDIuMjE0NDA0NTEgMC4wOTIwMDA4NzY0LDMuOTQ0NzY3NTEgTDAuMDkyMDAwODc2NCw3LjA3ODIzMzA0IEMwLjA5MjAwMDg3NjQsOC44MDg1OTYwMyAxLjUwMjg3NDkxLDEwLjIxMTY5ODYgMy4yNDM2MTkyOSwxMC4yMTE2OTg2IEwzLjI0MzYxOTI5LDEwLjIxMTY5ODYgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjRkZENkQyIj48L3BhdGg+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTU5Ljk2OTg5NDcsMTAuMjExNjk4NiBMNzguODc4ODkxMSwxMC4yMTE2OTg2IEM4MC42MTkyNzg1LDEwLjIxMTY5ODYgODIuMDMwNTA5Niw4LjgwODU5NjAzIDgyLjAzMDUwOTYsNy4wNzgyMzMwNCBMODIuMDMwNTA5NiwzLjk0NDc2NzUxIEM4Mi4wMzA1MDk2LDIuMjE0NDA0NTEgODAuNjE5Mjc4NSwwLjgxMTMwMTk2OSA3OC44Nzg4OTExLDAuODExMzAxOTY5IEw1OS45Njk4OTQ3LDAuODExMzAxOTY5IEM1OC4yMjk1MDczLDAuODExMzAxOTY5IDU2LjgxODI3NjMsMi4yMTQ0MDQ1MSA1Ni44MTgyNzYzLDMuOTQ0NzY3NTEgTDU2LjgxODI3NjMsNy4wNzgyMzMwNCBDNTYuODE4Mjc2Myw4LjgwODU5NjAzIDU4LjIyOTUwNzMsMTAuMjExNjk4NiA1OS45Njk4OTQ3LDEwLjIxMTY5ODYgTDU5Ljk2OTg5NDcsMTAuMjExNjk4NiBaIiBpZD0iU2hhcGUiIGZpbGw9IiMyMEEwRkYiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYuMTExNzc4LCA0NC4zOTY1NzIpIiBmaWxsPSIjQzlFMUZCIiBvcGFjaXR5PSIwLjIzODgwNTk3Ij4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTMuNjM5NDk2NTksMjguNDgxNTk3NCBDMy42Mzk0OTY1OSwzMC4yMTE5NjA0IDIuMTM2NTcxMzcsMzEuNjE1MDYyOSAwLjI4MzEwMzAxMywzMS42MTUwNjI5IEw2Mi41NjY3MDg4LDMxLjYxNTA2MjkgQzY0LjQyMDE3NzIsMzEuNjE1MDYyOSA2NS45MjMxMDI0LDMwLjIxMTk2MDQgNjUuOTIzMTAyNCwyOC40ODE1OTc0IEw2NS45MjMxMDI0LDMuNDE0OTM3OTIgQzY1LjkyMzEwMjQsMS42ODQ1NzQ5MiA2NC40MjAxNzcyLDAuMjgxNDcyMzggNjIuNTY2NzA4OCwwLjI4MTQ3MjM4IEwwLjI4MzEwMzAxMywwLjI4MTQ3MjM4IEMyLjEzNjU3MTM3LDAuMjgxNDcyMzggMy42Mzk0OTY1OSwxLjY4NDU3NDkyIDMuNjM5NDk2NTksMy40MTQ5Mzc5MiBMMy42Mzk0OTY1OSwyOC40ODE1OTc0IFoiIGlkPSJTaGFwZSI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEw2LjM5NTIzNzcsNzYuMDExMjgwMyBDOC4xMzU2MjUwOCw3Ni4wMTEyODAzIDkuNTQ2ODU2MTEsNzQuNjA4MTc3OCA5LjU0Njg1NjExLDcyLjg3NzgxNDggTDkuNTQ2ODU2MTEsNDcuODExMTU1MyBDOS41NDY4NTYxMSw0Ni4yNjUwMjEgOC40MjAxMzA2Niw0NC45ODAxNzEyIDYuOTM4NjI2MjgsNDQuNzI0MTA1OSBDNi43NjIwOTg1MSw0NC42OTM1OTQ2IDYuNTgwNTMzNjgsNDQuNjc3Njg5OCA2LjM5NTIzNzcsNDQuNjc3Njg5OCBMMy4yNDM2MTkyOSw0NC42Nzc2ODk4IEMxLjUwMzIzMTkxLDQ0LjY3NzY4OTggMC4wOTIwMDA4NzY0LDQ2LjA4MDc5MjMgMC4wOTIwMDA4NzY0LDQ3LjgxMTE1NTMgTDAuMDkyMDAwODc2NCw3Mi44Nzc4MTQ4IEMwLjA5MjAwMDg3NjQsNzQuNjA4MTc3OCAxLjUwMjg3NDkxLDc2LjAxMTI4MDMgMy4yNDM2MTkyOSw3Ni4wMTEyODAzIEwzLjI0MzYxOTI5LDc2LjAxMTI4MDMgWiIgaWQ9IlNoYXBlIiBmaWxsPSIjMjBBMEZGIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZGlhbW9uZCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTMuMDAwMDAwLCA0NS4wMDAwMDApIj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiNBRkM4RUIiIHBvaW50cz0iMjQuMTc1MzI2NCA4Ljg2MDY5Nzk1IDE3LjE4NTE4NTIgMjguODM1NzAyNSAzNC4zNzAzNzA0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iR3JvdXAiPgogICAgICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAwIDguODYwNjk3OTUgMTAuMTk1MDQ0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjODBBOEUxIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAzNC4zNzAzNzA0IDguODYwNjk3OTUgMjcuMjU5MjYxNiAwLjA0ODE4NDE3OTciPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICAgICAgPHBvbHlnb24gaWQ9IlNoYXBlIiBmaWxsPSIjQUZDOEVBIiBwb2ludHM9IjI0LjE3NTMyNjQgOC44NjA2OTc5NSAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM2NDk2REMiIHBvaW50cz0iMTcuMTg1MTg1MiAwLjA0ODE4NDE3OTcgNy4xMTExMDg4IDAuMDQ4MTg0MTc5NyAxMC4xOTUwNDQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzkzQjhFRSIgcG9pbnRzPSIyNy4yNTkyNjE2IDAuMDQ4MTg0MTc5NyAxNy4xODUxODUyIDAuMDQ4MTg0MTc5NyAyNC4xNzUzMjY0IDguODYwNjk3OTUiPjwvcG9seWdvbj4KICAgICAgICAgICAgICAgICAgICA8cG9seWdvbiBpZD0iU2hhcGUiIGZpbGw9IiM4MEE4RTEiIHBvaW50cz0iMTAuMTk1MDQ0IDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDI0LjE3NTMyNjQgOC44NjA2OTc5NSI+PC9wb2x5Z29uPgogICAgICAgICAgICAgICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzY0OTZEQyIgcG9pbnRzPSIwIDguODYwNjk3OTUgMTcuMTg1MTg1MiAyOC44MzU3MDI1IDEwLjE5NTA0NCA4Ljg2MDY5Nzk1Ij48L3BvbHlnb24+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==";
-},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjgxcHgiIGhlaWdodD0iNzdweCIgdmlld0JveD0iMCAwIDgxIDc3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+TW9kdWxlX2ljb248L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz4KICAgICAgICA8cmVjdCBpZD0icGF0aC0xIiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItMiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAwICAgMCAwIDAgMCAwLjQ2NjY2NjY2NyAgIDAgMCAwIDAgMC44MDc4NDMxMzcgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICAgICAgPHJlY3QgaWQ9InBhdGgtMyIgeD0iNiIgeT0iNTciIHdpZHRoPSIxMSIgaGVpZ2h0PSIxMSIgcng9IjUuNSI+PC9yZWN0PgogICAgICAgIDxmaWx0ZXIgeD0iLTUwJSIgeT0iLTUwJSIgd2lkdGg9IjIwMCUiIGhlaWdodD0iMjAwJSIgZmlsdGVyVW5pdHM9Im9iamVjdEJvdW5kaW5nQm94IiBpZD0iZmlsdGVyLTQiPgogICAgICAgICAgICA8ZmVPZmZzZXQgZHg9IjAiIGR5PSIxIiBpbj0iU291cmNlQWxwaGEiIHJlc3VsdD0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlT2Zmc2V0PgogICAgICAgICAgICA8ZmVDb2xvck1hdHJpeCB2YWx1ZXM9IjAgMCAwIDAgMC4zOTIxNTY4NjMgICAwIDAgMCAwIDAuNTg4MjM1Mjk0ICAgMCAwIDAgMCAwLjg2Mjc0NTA5OCAgMCAwIDAgMSAwIiB0eXBlPSJtYXRyaXgiIGluPSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVDb2xvck1hdHJpeD4KICAgICAgICA8L2ZpbHRlcj4KICAgICAgICA8cmVjdCBpZD0icGF0aC01IiB4PSI2IiB5PSI1NyIgd2lkdGg9IjExIiBoZWlnaHQ9IjExIiByeD0iNS41Ij48L3JlY3Q+CiAgICAgICAgPGZpbHRlciB4PSItNTAlIiB5PSItNTAlIiB3aWR0aD0iMjAwJSIgaGVpZ2h0PSIyMDAlIiBmaWx0ZXJVbml0cz0ib2JqZWN0Qm91bmRpbmdCb3giIGlkPSJmaWx0ZXItNiI+CiAgICAgICAgICAgIDxmZU9mZnNldCBkeD0iMCIgZHk9IjEiIGluPSJTb3VyY2VBbHBoYSIgcmVzdWx0PSJzaGFkb3dPZmZzZXRPdXRlcjEiPjwvZmVPZmZzZXQ+CiAgICAgICAgICAgIDxmZUNvbG9yTWF0cml4IHZhbHVlcz0iMCAwIDAgMCAxICAgMCAwIDAgMCAwLjY3NDUwOTgwNCAgIDAgMCAwIDAgMC42Nzg0MzEzNzMgIDAgMCAwIDEgMCIgdHlwZT0ibWF0cml4IiBpbj0ic2hhZG93T2Zmc2V0T3V0ZXIxIj48L2ZlQ29sb3JNYXRyaXg+CiAgICAgICAgPC9maWx0ZXI+CiAgICA8L2RlZnM+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTW9kdWxlX2ljb24iPgogICAgICAgICAgICA8ZyBpZD0iR3JvdXAtNSI+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci0yKSIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiMyMEEwRkYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjkuMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci00KSIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiM4MEE4RTEiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtMyI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8ZyBpZD0iZm9sZGVyLTMtY29weSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNTguMDAwMDAwLCAwLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgICAgIDxnIGlkPSJHcm91cCI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtcGF0aCIgZmlsbD0iI0RFRUJGOCIgeD0iMCIgeT0iNTQiIHdpZHRoPSIyMyIgaGVpZ2h0PSIyMyI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLXBhdGgiIGZpbGw9IiNGMkY4RkUiIHg9IjAiIHk9IjAiIHdpZHRoPSIyMyIgaGVpZ2h0PSI1NCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiBmaWxsPSIjREVFQkY5IiB4PSI3IiB5PSI2IiB3aWR0aD0iOSIgaGVpZ2h0PSIzMCIgcng9IjMiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS1wYXRoIj4KICAgICAgICAgICAgICAgICAgICAgICAgICAgIDx1c2UgZmlsbD0iYmxhY2siIGZpbGwtb3BhY2l0eT0iMSIgZmlsdGVyPSJ1cmwoI2ZpbHRlci02KSIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8dXNlIGZpbGw9IiNGRkQ2RDIiIGZpbGwtcnVsZT0iZXZlbm9kZCIgeGxpbms6aHJlZj0iI3BhdGgtNSI+PC91c2U+CiAgICAgICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(s,t,a){a(549);var l=a(13)(null,a(551),"data-v-22ed63d3",null);s.exports=l.exports},function(s,t){},,function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement;s._self._c||t;return s._m(0)},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"page-container page-resource"},[l("h2",[s._v("资源")]),l("p",[s._v("这里提供 Element 相关设计资源和设计工具的下载，更多设计资源正在整理和完善中。")]),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(545),alt:""}}),l("h3",[s._v("Axure Components")]),l("p",[s._v("通过在 Axure 中导入 Element 组件库，可以在交互设计阶段方便地调用常用的组件")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib"}},[s._v("下载")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(546),alt:""}}),l("h3",[s._v("Sketch Template")]),l("p",[s._v("从 Element Template 快速调用常用组件，在提升设计效率的同时，保证统一的视觉风格")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v1.3.sketch"}},[s._v("下载")])])]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(547),alt:""}}),l("h3",[s._v("组件交互文档")]),l("p",[s._v("进一步查看 Element 交互文档，从一个较为微观的角度详细地了解各个组件的交互细节")]),l("a",{attrs:{href:"https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip"}},[s._v("下载")])])])])])])}]}},function(s,t,a){function l(s){return a(n(s))}function n(s){return e[s]||function(){throw new Error("Cannot find module '"+s+"'.")}()}var e={"./en-US/index.vue":553,"./zh-CN/index.vue":565};l.keys=function(){return Object.keys(e)},l.resolve=n,s.exports=l,l.id=552},function(s,t,a){a(554);var l=a(13)(a(556),a(559),"data-v-05bad635",null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(557),e=l(n);t.default={mounted:function(){function s(t){t.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(a){s(t),a()})}var t=(0,e.default)({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(a){s(t),a()})}}},function(s,t,a){s.exports=a(558)},function(s,t,a){!function(t,a){s.exports=a()}(this,function(){return function(s){function t(l){if(a[l])return a[l].exports;var n=a[l]={exports:{},id:l,loaded:!1};return s[l].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var a={};return t.m=s,t.c=a,t.p="",t(0)}([function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){if(Array.isArray(s)){for(var t=0,a=Array(s.length);t<s.length;t++)a[t]=s[t];return a}return Array.from(s)}function e(s){return Array.isArray(s)?s:Array.from(s)}function i(){function s(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l=(0,_.default)(s,t,a);return D.casting[l.name]=l,this}function t(s){return D.onStage=s,this}function a(){return D.casting[D.onStage]||null}function l(){function s(a){if(o.default.isArray(a)&&a.forEach(function(t){s(t)}),o.default.isString(a)){var l=a.split(":"),n=void 0;l.length>1&&"\\"!==l[0].charAt(l[0].length-1)&&(n=l.shift(),s({name:"erase",actor:n}));var e=l.join(":").replace(/\\:/g,":"),i={name:"type",args:[e]};null!=n&&(i.actor=n),s(i)}o.default.isFunction(a)&&s({name:"callback",args:[a]}),o.default.isNumber(a)&&s(a>0?{name:"wait",args:[a]}:{name:"erase",args:[a]}),o.default.isObject(a)&&(o.default.isArray(a.args)||(a.args=[]),a.args.unshift(function(){y(a.name+":end",a),p()}),t.push(a))}for(var t=[],a=arguments.length,l=Array(a),n=0;n<a;n++)l[n]=arguments[n];return s([{name:"publisher",args:["sequence:start"]}].concat(l).concat({name:"publisher",args:["sequence:end"]})),Array.prototype.push.apply(D.scenario,t),D.options.autoplay&&i(),this}function i(){return"stopping"===D.status&&(D.status="playing"),"ready"===D.status&&(D.status="playing",p()),this}function v(s){return("ready"===D.status||o.default.isFunction(s))&&(D.currentScene=-1,"ready"===D.status?i():s()),this}function r(){return D.status="stopping",this}function p(){if("stopping"===D.status)return D.status="ready",this;if("playing"!==D.status)return this;if(D.currentScene+1>=D.scenario.length)return D.status="ready",y("scenario:end"),this;var s=D.scenario[++D.currentScene];if(0===D.currentScene&&y("scenario:start"),"publisher"===s.name){var a=e(s.args),l=a[0],i=a.slice(1);return y.apply(void 0,n(i)),l()}switch(s.actor&&t(s.actor),y(s.name+":start",s),s.name){case"type":h.apply(void 0,n(s.args));break;case"erase":C.apply(void 0,n(s.args));break;case"callback":m.apply(void 0,n(s.args));break;case"wait":b.apply(void 0,n(s.args));break;default:console.debug("No scene handler for "+s.name)}return this}function h(s,t){var l=a(),n=D.options.locale,e=D.options.minSpeed.type,i=D.options.maxSpeed.type,v=l.displayValue,_=-1,r=!1,c=null,p=null,o=j.default.map(t);return t=j.default.strip(t),function a(){var h=j.default.strip(l.displayValue.substr(v.length));if(h===t)return s();var C=t.substr(0,_+1),u=h!==C,g=l.shouldBeMistaken(h,t,c,p),m=r||!g;if(u&&m)r=!0,c=null,l.displayValue=v+j.default.inject(h.substr(0,h.length-1),o),_--,p=_;else{r=!1;var b=t.charAt(++_);g&&(b=d.default.randomCharNear(b,n),null==c&&(c=_)),l.displayValue=v+j.default.inject(h+b,o)}return setTimeout(a,l.getTypingSpeed(e,i))}(),this}function C(s,t){var l=a();if(null==l)return s();if(w.erase!==!0)return l.displayValue="",s();var n=D.options.minSpeed.erase,e=D.options.maxSpeed.erase,i=l.displayValue,v=j.default.map(i);i=j.default.strip(i);var _=i.length,r=void 0,c=0;return o.default.isNumber(t)&&(t>0?r=t:c=i.length+t),function t(){return _===c?s():(l.displayValue=j.default.inject(i.substr(0,--_),v),setTimeout(t,r||l.getTypingSpeed(n,e)))}(),this}function m(s,t){return t.call(this,s),this}function b(s,t){return setTimeout(s.bind(this),t),this}function f(s,t){return s.split(",").forEach(function(s){s=s.trim(),o.default.isArray(D.events[s])||(D.events[s]=[]),D.events[s].push(t)}),this}function y(){for(var s=arguments.length,t=Array(s),a=0;a<s;a++)t[a]=arguments[a];var l=t[0],n=D.events[l]||[];return n.length>0&&n.concat(D.events["*"]||[]).forEach(function(s){return s.apply(void 0,t)}),this}var w=arguments.length<=0||void 0===arguments[0]?{}:arguments[0];if(w=c.default.merge({},g,w),o.default.isNumber(w.minSpeed)){var k=w,x=k.minSpeed;w.minSpeed={erase:x,type:x}}if(o.default.isNumber(w.maxSpeed)){var A=w,N=A.maxSpeed;w.maxSpeed={erase:N,type:N}}if("detect"===w.locale&&u){var M=u.languages;o.default.isArray(M)&&o.default.isString(M[0])&&(w.locale=M[0].substr(0,2))}d.default.supports(w.locale)||(w.locale=d.default.defaultLocale);var D={options:w,casting:{},status:"ready",onStage:null,currentScene:-1,scenario:[],events:{}};return t(null),Object.freeze(Object.defineProperties({addActor:s,getCurrentActor:a,addScene:l,play:i,replay:v,stop:r,on:f},{options:{get:function(){return D.options},configurable:!0,enumerable:!0},status:{get:function(){return D.status},configurable:!0,enumerable:!0}}))}Object.defineProperty(t,"__esModule",{value:!0});var v=a(1),_=l(v),r=a(3),c=l(r),p=a(2),o=l(p),h=a(4),d=l(h),C=a(6),j=l(C),u="undefined"!=typeof window&&window.navigator,g={autoplay:!0,erase:!0,minSpeed:{erase:80,type:80},maxSpeed:{erase:450,type:450},locale:"detect"};i.init=function(){var s=arguments.length<=0||void 0===arguments[0]?"actor":arguments[0],t=i();return t.addActor(s,{accuracy:1,speed:.8}),t},t.default=i,s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}Object.defineProperty(t,"__esModule",{value:!0});var n=a(2),e=l(n),i=a(3),v=l(i),_="undefined"!=typeof window&&window.document,r={speed:.6,accuracy:.6};t.default=function(s){var t=arguments.length<=1||void 0===arguments[1]?{}:arguments[1],a=arguments.length<=2||void 0===arguments[2]?null:arguments[2],l="",n=void 0;if(e.default.isNumber(t)&&(t={speed:t,accuracy:t}),t=v.default.merge({},r,t),_&&(null==a&&(a="#"+s),e.default.isString(a))){var i=a,c=_.querySelector(i);if(null==c)throw new Error("no matches for "+s+"'s selector: "+i);n=c,a=function(s){n.innerHTML=s}}return e.default.isFunction(a)||(a=console.log.bind(console)),Object.defineProperties({$element:n,getTypingSpeed:function(s,a){var l=v.default.randomFloat(t.speed,1);return v.default.getPercentageOf(a,s,l)},shouldBeMistaken:function(s,a){var l=arguments.length<=2||void 0===arguments[2]?null:arguments[2],n=arguments.length<=3||void 0===arguments[3]?null:arguments[3],i=10*t.accuracy;if(i>=8)return!1;if(s.length<=i)return!1;if(s.length===a.length)return!1;if(e.default.isNumber(l)){var _=s.length-l,r=i>=6?10-i:4;if(_>=r)return!1}if(e.default.isNumber(n)){var _=s.length-n,c=2*Math.max(i,2);if(_<=c)return!1}return v.default.randomFloat(0,.8)>t.accuracy}},{displayValue:{get:function(){return l},set:function(s){l=s,a(s)},configurable:!0,enumerable:!0},name:{get:function(){return s},configurable:!0,enumerable:!0}})},s.exports=t.default},function(s,t){"use strict";function a(s){return{}.toString.call(s)}Object.defineProperty(t,"__esModule",{value:!0}),t.default={isNumber:function(s){return"number"==typeof s},isString:function(s){return"[object String]"===a(s)},isObject:function(s){return"[object Object]"===a(s)},isArray:function(s){return"[object Array]"===a(s)},isFunction:function(s){return"function"==typeof s}},s.exports=t.default},function(s,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={merge:function(s){for(var t=[].slice.call(arguments,1),a=0,l=t.length;a<l;a++){var n=t[a];for(var e in n)n.hasOwnProperty(e)&&(s[e]=n[e])}return s},random:function(s,t){return Math.floor(Math.random()*(t-s+1))+s},randomFloat:function(s,t){return Math.random()*(t-s)+s},getPercentageOf:function(s,t,a){return s-s*a+t*a}},s.exports=t.default},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){for(var t={},a=0,l=s.length,n=void 0;a<l;a++){n=s[a];for(var e=0,i=n.length;e<i;e++)t[n[e]]={x:e,y:a}}return t}Object.defineProperty(t,"__esModule",{value:!0});var e=a(2),i=l(e),v=a(3),_=l(v),r=a(5),c=l(r),p="en";for(var o in c.default)if(c.default.hasOwnProperty(o)){var h=c.default[o];c.default[o]={list:h,mapped:n(h)}}t.default={defaultLocale:p,supports:function(s){return i.default.isObject(c.default[s])},randomCharNear:function(s,t){if(!this.supports(t))throw new Error('locale "'+t+'" is not supported');var a=c.default[t].mapped,l=1,n=[],e=/[A-Z]/.test(s);s=s.toLowerCase();var i=a[s]||[],v=void 0;for(var r in a)a.hasOwnProperty(r)&&r!==s&&(v=a[r],Math.abs(i.x-v.x)<=l&&Math.abs(i.y-v.y)<=l&&n.push(r));var p=n.length>0?n[_.default.random(0,n.length-1)]:this.randomChar(t);return e&&(p=p.toUpperCase()),p},randomChar:function(s){if(!this.supports(s))throw new Error('locale "'+s+'" is not supported');var t=c.default[s].list.join("");return t.charAt(_.default.random(0,t.length-1))}},s.exports=t.default},function(s,t){s.exports={en:["qwertyuiop","asdfghjkl","zxcvbnm"],fr:["azertyuiop","qsdfghjklm","wxcvbn"],da:["qwertyuiopå","asdfghjklæø","zxcvbnm"],de:["qwertzuiopü","asdfghjklöä","yxcvbnm"],pl:["qwertyuiopęó","asdfghjkląśł","zxcvbnmżźćń"],pt:["qwertyuiop","asdfghjklç","zxcvbnm"],ru:["йцукенгшщзх","фывапролджэ","ячсмитьбюъ"],es:["qwertyuiop","asdfghjklñ","zxcvbnm"]}},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}function n(s){var t=s.match(/<([^\s>]+)/);return Boolean(t)&&i.default.indexOf(t[1].toLowerCase())>-1}Object.defineProperty(t,"__esModule",{value:!0});var e=a(7),i=l(e);t.default={strip:function(s){return s.replace(/(<([^>]+)>)/gi,"")},map:function(s){for(var t=/<[^>]+>/gi,a=[],l=[],e=void 0,i=void 0;e=t.exec(s);)i={tagName:e[0],position:e.index},"/"===i.tagName.charAt(1)?i.opener=l.pop():"/"===i.tagName.charAt(i.tagName.length-2)||n(i.tagName)||l.push(i),a.push(i);return a},inject:function(s,t){for(var a=0,l=void 0;a<t.length;a++)l=t[a],s.length>0&&l.position<=s.length?s=s.substr(0,l.position)+l.tagName+s.substr(l.position):l.opener&&l.opener.position<s.length&&(s+=l.tagName);return s}},s.exports=t.default},function(s,t){s.exports=["area","base","br","col","embed","hr","img","input","keygen","link","menuitem","meta","param","source","track","wbr"]}])})},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(560),alt:""}}),l("h3",[s._v("Guide")]),l("p",[s._v("Understand the design guidelines, helping designers build product that's logically sound, reasonably structured and easy to use.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/guide/design",exact:""}},[s._v("View Detail\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(561),alt:""}}),l("h3",[s._v("Component")]),l("p",[s._v("Experience interaction details by strolling through component demos. Use encapsulated code to improve developing efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/component/layout",exact:""}},[s._v("View Detail\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(562),alt:""}}),l("h3",[s._v("Resource")]),l("p",[s._v("Download relevant design resources for shaping page prototype or visual draft, increasing design efficiency.")]),l("router-link",{attrs:{"active-class":"active",to:"/en-US/resource",exact:""}},[s._v("View Detail\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(563),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("A Desktop UI Library")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element, a Vue 2.0 based component library for developers, designers and product managers")])]),l("img",{attrs:{src:a(564),alt:"Element"}})])])}]}},function(s,t,a){s.exports=a.p+"static/guide.0a8462c.png"},function(s,t,a){s.exports=a.p+"static/component.bd3411b.png"},function(s,t,a){s.exports=a.p+"static/resource.a72b8f8.png"},function(s,t){s.exports="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA74AAACRCAYAAADkbGR/AAAAAXNSR0IArs4c6QAAEK9JREFUeAHt3d1vHFcZB+Cd2U3txknUFKgDSBAwaaKmNGplQPS2t9wg1FwiQRoJlX+Cf6KlUeoScYWKUG+47RVSkUrUqIhEiZsQqjYoQRCixJTY8e6wJ/RY2+3uetfej/l4LFlnPTM7532fYzn+Zca7tZoPAgQIECBAgAABAgQIECBAgAABAgQIzFLg3uu/fjp8zrIGcxMgQGCWAtnN3z8dPmdZg7kJECiuQFLc0lVOgACBagiEwJvVmt8I3Sa1+vX9L/34L9XoXJcECBD4v0AIvM3a5sOfg/Va43py6Ad+DvrmIEBgJAHBdyQuBxMgQGC6Ap2hN84s/EYJIwECVRDoDL2xX+E3ShgJEBhWQPAdVspxBAgQmLJAr9AbSxB+o4SRAIEyC/QKvbFf4TdKGAkQGEZA8B1GyTEECBCYssCg0BtLEX6jhJEAgTIKDAq9sV/hN0oYCRDYTkDw3U7IfgIECExZYJjQG0sSfqOEkQCBMgkME3pjv8JvlDASIDBIQPAdpGMfAQIEpiwwSuiNpQm/UcJIgEAZBEYJvbFf4TdKGAkQ6CeQ9tthOwECBAgQIECAAAECBAgQKIOAK75lWEU9ECBQKoFRrvq62luqpdcMAQKfCoxy1dfVXt82BAgMIyD4DqPkGAIECExZYJjwK/ROeVFMR4DAVAWGCb9C71SXxGQECi0g+BZ6+RRPgECZBQaFX6G3zCuvNwIEosCg8Cv0RiUjAQLDCAi+wyg5hgABAjMS6BV+hd4ZLYZpCRCYiUCv8Cv0zmQpTEqg0AKCb6GXT/EECFRBoDP8Cr1VWHE9EiDQLdAZfoXebh1fEyBAgAABAgRKIhDCb/gsSTvaIECAwMgCIfyGz5Gf6AkECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECBAgQIAAAQIECFRAIMuy5P6Zc0vZ2bOLvdpNem20jQABAgQIECBAgAABAgQIFEEghN67r64sJbX0iVDv/kea15LTp2911i74dmp4TIAAAQIECBAgQIAAAQKFEegOvbHw7vAr+EYZIwECBAgQIECAAAECBAgURqBf6I0NdIZfwTeqGAkQIECAAAECBAgQIECgEALbhd7YRAy/gm8UMRIgQIAAAQIECBAgQIBAIQTCC1ltbLZ6vpBVdwNp+29+0+6NviZAgAABAgQIECBAgAABAnkWmEsfrA1TX6NRay6k6Seu+A6j5RgCBAgQIECAAAECBAgQyJVAeOuiexv1pX5FhdD7aCO7lJw6dU/w7adkOwECBAgQIECAAAECBAjkWqBf+O0MvaEBwTfXy6g4AgQIECBAgAABAgQIEBgk0B1+u0NveK7gO0jQPgIECBAgQIAAAQIECBDIvUAMv71Cb+6LVyABAgQIECBAgAABAgQIEBhGYK39N7/Zysr+YY51DAECBAgQIECAAAECBAgQIECAAIHxCLTfeDsNn+M5m7MQIECAAAECBAgQINBLoNFro20ECExeIATety/dPhZmaj++nCRJa/KzmoEAAQIECBAgQIBA9QS8uFX11lzHORCIobcddR8L5bSv+d554anHhd8crI0SCBAgQIAAAQIEyicg+JZvTXWUc4Hu0BvLFX6jhJEAAQIECBAgQIDAeAUE3/F6OhuBgQL9Qm98kvAbJYwECBAgQIAAAQIExifgRXXGZ+lMBAgQIECAAAECBAgQIJBDAVd8c7goSiq3QL+rvq72lnvddUeAAAECBAgQIDA7gZ5XfF/MsvrsSjIzgXILhFdvDi9kFYJu7FTojRJGAgQIECBAgAABAuMX+NwV38Wb7y/U9jW/30jrl2/sPfHx+Kd0RgIEgkC88hsee0XnoOCDAAECBAgQIECAwGQEPhN8Q+jN9m08nyTpfJiukTQuCL+TgXdWAkEghN8weg/foOCDAAECBAgQIECAwGQEtoJvd+iN0wm/UcJIgAABAgQIECBAgAABAkUUeBh8+4Xe2JDwGyWMBAgQIECAAAECBAgQIFA0gXS70Bsa2sw2nz289u6hojWnXgIECBAgQIAAAQIECBAgkDb23p9Pk8aeQRRJq3l3YWHh9qBj7CNAgAABAgQIECBAgAABAnkUSG8c+N6/0mbz3aSWNnsVGELvF/Yt/PFicnyj137bCBAgQIAAAQIECBCorkD7xTqT137z3onXf/fe16uroPO8C2y9uNVX7p7/Yqte/25Wa229h6/Qm/flUx8BAgQIECBAgACB2QmE0HvmrQvP1FrZ10IVjST580s/eu7D2VVkZgK9BR6+lUrY9fcDy//svPIr9PYGs5UAAQIECORJIPzSmX1wbin769nFPNWlFgIEyi/QHXpDx5tZ9owrv+Vf+yJ2uHXFNxYfrvxuNupHv/ToI39ye3NUMRIgQIAAgfwJhF861y+tLNXT9IlQXWOueS355ulb+atURQQIlFHgl29dOJw0W9/u1dtcPf3DT3747J1e+2wjMAuBzwXfWRRhTgIECBAgQGA0ge7QG58t/EYJIwECkxZo/xxKX/vt+8tJ2vzMHSetVmP15ZMnrkx6fucnMIrA1q3OozzJsQQIECBAgMCMBf52bjFe6e2sZHO9vpRdfGVf5zaPCRAgMAmBJElaP3vxxPmsVd+600TonYS0c45DQPAdh6JzECBAgACBaQsc/vAfrXrz393Ttt+g8KPk+M/Xurf7mgABApMQ6Ay/Qu8khJ1zXAJudR6XpPMQIECAAIEpC2TZL9KND756NG3WD4apH4beb/30oymXYToCBAjUwp9ftD8yFATyKiD45nVl1EWAAAECBIYQiOH3kbS+lgi9Q4g5hAABAgQIECBAgAABAgQKJxCutBSuaAUTIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAIGJC2RZll67dm354sWLhyY+mQkqIZBWoktNEiBAgAABAgQIECBQCIEQeldXV5dbrdaX0zQVfguxavkvMsl/iSokQIDA7gTCP6DhDEmStHZ3Js8mQIAAAQIEJikQQ2878C7GeTY3N7N2CD5//Pjxm3GbkcCoAoLvqGKOJ0CgUALhH9C3L90+Fop+4anHLwu/hVo+xRIgQIBAhQR6hd7YvvAbJYw7FRB8dyrneQQI5F4ght72dd7HQrHt6753hN/cL5sCCRAgQKCCAoNCb+QQfqOEcScCgu9O1DyHAIHcC3SH3liw8BsljAQIECBAIB8Cw4TeWKnwGyWMowp4catRxRxPgEDuBfqF3lB4uPobbn0Ox+S+EQUSIECAAIEKCFy9enVP+9/lfcO02mg0kvn5+QPDHOsYAp0CfvHr1PCYAAECBAgQIECAAIGpChw5cmR9bm7unWaz+Z/tJm4fs7q0tLS63XH2E+gWcKtzt4ivCRAohUC/q75udS7F8mqCAAECBEoocP369fn19fXn6/X6Qq/2Qug9duzYlV77bCOwnYDgu52Q/QQIFFagO/wKvYVdSoUTIECAQEUE+oVfobci3wATbFPwnSCuUxMgMHuBGH5DJV7RefbroQICBAgQILCdQHf4FXq3E7N/GAHBdxglxxAgUGiBEH5DA97Dt9DLqHgCBAgQqJBADL/tlm+4vblCC69VAgQIECBAgAABAgQIVEmg/R/XjSr1q1cCBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECBAgQIECAAAECuxPIsizZ3Rk8mwABAvkTSPNXkooIECBAgAABAgRmIdAOvel/V1a+c/fVlaOzmN+cBAgQmJSA/9GblKzzEiBAgAABAgQKJPBp6F3ONmuLoexmK1k98PKpKwVqQakECBDoKyD49qWxgwABAgQIECBQDYHu0Bu7Fn6jhJEAgaILuNW56CuofgIECBAgQIDALgT6hd5wynqaPXl3xW3Pu+D1VAIEciLgim9OFkIZBAgQIECAAIFpCwwKvZ21NPe0b3s+5bbnThOPCRAoloArvsVaL9USIECAAAECBMYm8MkbbzwX/6Z30EnrD7In7585tzToGPsIECCQZwHBN8+rozYCBAgQIECAwAQFsvvpx82slW03RZYk63MH997a7jj7CRAgkFcBtzrndWXURYAAAQIECBCYgsDaK7861EofLNeTtOfvhSH0Lhzc/05y8uTaFMoxBQECBCYi0PMH3ERmclICBAgQIECAAIFcCvQLv0JvLpdLUQQI7EBA8N0BmqcQIECAAAECBMom0B1+hd6yrbB+CFRbQPCt9vrrngABAgQIECCwJRDDb5rWN9zevMXiAQECBAgQIECAAAECBAiUSWDt7NnF7M0395WpJ70QIEDgf01Qh63gZYluAAAAAElFTkSuQmCC"},function(s,t,a){s.exports=a.p+"static/banner-bg.75437e1.svg"},function(s,t,a){a(566);var l=a(13)(a(568),a(569),"data-v-b2da9546",null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(557),e=l(n);t.default={mounted:function(){function s(t){t.addScene("产品设计师",1800,-5,800).addScene("交互设计师",1800,-5,500).addScene("视觉设计师",1800,-5,700).addScene("产品经理",1800,-4,600).addScene("前端工程师",1800,-5,800).addScene(function(a){s(t),a()})}var t=(0,e.default)();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:.5,accuracy:1}).addScene(2600).addScene("line2:只为守护世界和平",300,-6,1e3).addScene("让你少加班",300,-5).addScene("line2:只为这样的你: ",400).addScene(function(a){s(t),a()})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",[s._m(0),l("div",{staticClass:"cards"},[l("ul",{staticClass:"container"},[l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(560),alt:""}}),l("h3",[s._v("指南")]),l("p",[s._v("了解设计指南，帮助产品设计人员搭建逻辑清晰、结构合理且高效易用的产品。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/guide/design",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(561),alt:""}}),l("h3",[s._v("组件")]),l("p",[s._v("使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/component/layout",exact:""}},[s._v("查看详情\n          ")])],1)]),l("li",[l("div",{staticClass:"card"},[l("img",{attrs:{src:a(562),alt:""}}),l("h3",[s._v("资源")]),l("p",[s._v("下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计效率。")]),l("router-link",{attrs:{"active-class":"active",to:"/zh-CN/resource",exact:""}},[s._v("查看详情\n          ")])],1)])])])])},staticRenderFns:[function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"banner"},[l("div",{staticClass:"banner-sky"}),l("img",{staticClass:"banner-stars",attrs:{src:a(563),alt:"Element"}}),l("div",{staticClass:"container"},[l("div",{staticClass:"banner-desc"},[l("h2",[s._v("网站快速成型工具")]),l("div",{staticClass:"actor",attrs:{id:"line2"}}),l("p",[s._v("Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库，提供了配套设计资源，帮助你的网站快速成型。")])]),l("img",{attrs:{src:a(564),alt:"Element"}})])])}]}},function(s,t,a){var l=a(13)(a(571),a(577),null,null);s.exports=l.exports},function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(572),e=l(n);t.default={components:{PlayComponent:e.default}}},function(s,t,a){a(573);var l=a(13)(a(575),a(576),"data-v-253c8cb7",null);s.exports=l.exports},function(s,t){},,function(s,t){"use strict";t.__esModule=!0,t.default={methods:{},data:function(){return{value:"#bfcbd9",value2:null}}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",[a("el-button",{on:{click:function(t){s.value="#fff"}}},[s._v("Change Value")]),a("div",[s._v("Value: "+s._s(s.value))]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.value,expression:"value"}],domProps:{value:s.value},on:{input:function(t){s.value=t}}}),a("div",[s._v("Value2: "+s._s(s.value2))]),a("el-color-picker",{directives:[{name:"model",rawName:"v-model",value:s.value2,expression:"value2"}],attrs:{"show-alpha":""},domProps:{value:s.value2},on:{input:function(t){s.value2=t}}})],1)},staticRenderFns:[]}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticStyle:{margin:"20px"}},[a("play-component")],1)},staticRenderFns:[]}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(s,t){},,,,,function(s,t,a){a(959);var l=a(13)(a(961),a(963),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(962),e=l(n);t.default={data:function(){return{hovering:!1,isExpanded:!1}},props:{jsfiddle:Object,default:function(){return{}}},methods:{goJsfiddle:function(){var s=this.jsfiddle,t=s.script,a=s.html,l=s.style,n='<script src="//unpkg.com/vue/dist/vue.js"></script>\n<script src="//unpkg.com/element-ui/lib/index.js"></script>',e=(t||"").replace(/export default/,"var Main =").trim(),i=n+'\n<div id="app">\n'+a.trim()+"\n</div>",v='@import url("//unpkg.com/element-ui/lib/theme-default/index.css");\n'+(l||"").trim()+"\n";e=e?e+"\nvar Ctor = Vue.extend(Main)\nnew Ctor().$mount('#app')":"new Vue().$mount('#app')";var _={js:e,css:v,html:i,panel_js:3,panel_css:1},r=document.getElementById("fiddle-form")||document.createElement("form");r.innerHTML="";var c=document.createElement("textarea");r.method="post",r.action="https://jsfiddle.net/api/post/library/pure/",r.target="_blank";for(var p in _)c.name=p,c.value=_[p].toString(),r.appendChild(c.cloneNode());r.setAttribute("id","fiddle-form"),r.style.display="none",document.body.appendChild(r),r.submit()}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0]["demo-block"]},blockClass:function(){return"demo-"+this.lang+" demo-"+this.$router.currentRoute.path.split("/").pop()},iconClass:function(){return this.isExpanded?"el-icon-caret-top":"el-icon-caret-bottom"},controlText:function(){return this.isExpanded?this.langConfig["hide-text"]:this.langConfig["show-text"]},codeArea:function(){return this.$el.getElementsByClassName("meta")[0];
-},codeAreaHeight:function(){return this.$el.getElementsByClassName("description").length>0?Math.max(this.$el.getElementsByClassName("description")[0].clientHeight,this.$el.getElementsByClassName("highlight")[0].clientHeight):this.$el.getElementsByClassName("highlight")[0].clientHeight}},watch:{isExpanded:function(s){this.codeArea.style.height=s?this.codeAreaHeight+1+"px":"0"}},mounted:function(){var s=this;this.$nextTick(function(){var t=s.$el.getElementsByClassName("highlight")[0];0===s.$el.getElementsByClassName("description").length&&(t.style.width="100%",t.borderRight="none")})}}},function(s,t){s.exports=[{lang:"zh-CN","demo-block":{"hide-text":"隐藏代码","show-text":"显示代码","button-text":"在线运行","tooltip-text":"前往 jsfiddle.net 运行此示例"},footer:{feedback:"反馈建议",contribution:"贡献指南",eleme:"饿了么"},header:{guide:"指南",components:"组件",resource:"资源"},nav:{dropdown:"版本："}},{lang:"en-US","demo-block":{"hide-text":"Hide","show-text":"Expand","button-text":"Try it!","tooltip-text":"Run this demo on jsfiddle.net"},footer:{feedback:"Feedback",contribution:"Contribution",eleme:"Eleme"},header:{guide:"Guide",components:"Component",resource:"Resource"},nav:{dropdown:"Version: "}}]},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"demo-block",class:[s.blockClass,{hover:s.hovering}],on:{mouseenter:function(t){s.hovering=!0},mouseleave:function(t){s.hovering=!1}}},[s._t("source"),a("div",{staticClass:"meta"},[a("div",{staticClass:"description"},[s._t("default"),a("el-tooltip",{attrs:{effect:"dark",content:s.langConfig["tooltip-text"],placement:"right"}},[a("el-button",{attrs:{size:"small",type:"primary"},on:{click:s.goJsfiddle}},[s._v(s._s(s.langConfig["button-text"]))])],1)],2),s._t("highlight")],2),a("div",{staticClass:"demo-block-control",on:{click:function(t){s.isExpanded=!s.isExpanded}}},[a("transition",{attrs:{name:"arrow-slide"}},[a("i",{class:[s.iconClass,{hovering:s.hovering}]})]),a("transition",{attrs:{name:"text-slide"}},[a("span",{directives:[{name:"show",rawName:"v-show",value:s.hovering,expression:"hovering"}]},[s._v(s._s(s.controlText))])])],1)],2)},staticRenderFns:[]}},function(s,t,a){a(965);var l=a(13)(a(967),a(968),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(962),e=l(n),i=a(578);t.default={data:function(){return{version:i.version}},computed:{lang:function(){return this.$route.path.split("/")[1]},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0].footer}}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("footer",{staticClass:"footer"},[l("div",{staticClass:"container"},[l("div",{staticClass:"footer-main"},[l("p",{staticClass:"footer-main-title"},[s._v("Element "+s._s(s.version)+" Lithium")]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/issues",target:"_blank"}},[s._v(s._s(s.langConfig.feedback))]),l("a",{staticClass:"footer-main-link",attrs:{href:"https://github.com/ElemeFE/element/blob/master/.github/CONTRIBUTING."+s.lang+".md",target:"_blank"}},[s._v(s._s(s.langConfig.contribution))])]),l("div",{staticClass:"footer-social"},[l("el-popover",{ref:"weixin",attrs:{placement:"top",width:"120","popper-class":"footer-popover",trigger:"hover"}},[l("div",{staticClass:"footer-popover-title"},[s._v(s._s(s.langConfig.eleme)+" UED")]),l("img",{attrs:{src:a(969),alt:""}})]),l("i",{directives:[{name:"popover",rawName:"v-popover:weixin",arg:"weixin"}],staticClass:"doc-icon-weixin elementdoc"}),s._m(0)],1)])])},staticRenderFns:[function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("a",{attrs:{href:"//github.com/elemefe",target:"_blank"}},[a("i",{staticClass:"doc-icon-github elementdoc"})])}]}},function(s,t,a){s.exports=a.p+"static/qrcode.a88f522.png"},function(s,t,a){a(971);var l=a(13)(a(973),a(974),"data-v-7ad4e6e1",null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(962),e=l(n);t.default={data:function(){return{active:"",isHome:!1,headerStyle:{}}},watch:{"$route.path":{immediate:!0,handler:function(){this.isHome=/^home/.test(this.$route.name),this.headerStyle.backgroundColor="rgba(32, 160, 255, "+(this.isHome?"0":"1")+")"}}},computed:{lang:function(){return this.$route.path.split("/")[1]||"zh-CN"},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.lang})[0].header}},methods:{switchLang:function(s){this.lang!==s&&(localStorage.setItem("ELEMENT_LANGUAGE",s),this.$router.push(this.$route.path.replace(this.lang,s)))}},mounted:function(){function s(s){window.addEventListener("scroll",function(){s()},!1)}var t=this;s(function(){if(t.isHome){var s=200,a=Math.min(document.documentElement.scrollTop||document.body.scrollTop,s)/s;t.$refs.header.style.backgroundColor="rgba(32, 160, 255, "+a+")"}})}}},function(s,t,a){s.exports={render:function(){var s=this,t=s.$createElement,l=s._self._c||t;return l("div",{staticClass:"headerWrapper"},[l("header",{ref:"header",staticClass:"header",class:{"header-home":s.isHome},style:s.headerStyle},[l("div",{staticClass:"container"},[l("h1",[l("router-link",{attrs:{to:"/"+s.lang}},[l("img",{staticClass:"nav-logo",attrs:{src:a(975),alt:"element-logo"}}),l("img",{staticClass:"nav-logo-small",attrs:{src:a(976),alt:"element-logo"}})])],1),l("ul",{staticClass:"nav"},[l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/guide"}},[s._v(s._s(s.langConfig.guide)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/component"}},[s._v(s._s(s.langConfig.components)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("router-link",{attrs:{"active-class":"active",to:"/"+s.lang+"/resource",exact:""}},[s._v(s._s(s.langConfig.resource)+"\n          ")])],1),l("li",{staticClass:"nav-item"},[l("span",{staticClass:"nav-lang",class:{active:"zh-CN"===s.lang},on:{click:function(t){s.switchLang("zh-CN")}}},[s._v("\n            中文\n          ")]),l("span",[s._v(" / ")]),l("span",{staticClass:"nav-lang",class:{active:"en-US"===s.lang},on:{click:function(t){s.switchLang("en-US")}}},[s._v("\n            En\n          ")])])])])])])},staticRenderFns:[]}},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjE0NnB4IiBoZWlnaHQ9IjM4cHgiIHZpZXdCb3g9IjAgMCAxNDYgMzgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQwICgzMzc2MikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+U2hhcGUgQ29weTwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJ2Mi4yLjAiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSLpppbpobUt6buY6K6k5pWI5p6cLWNvcHktMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTcwLjAwMDAwMCwgLTE5LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8cGF0aCBkPSJNMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IEMyMTIuMTM1NDQxLDQ1LjE1NzgwNzcgMjEyLjQyMDIzNyw0NS4xNTA1MTA1IDIxMi45NjA5MzcsNDUuMTU3ODA3NyBDMjEzLjUwMTYzNyw0NS4xNjUxMDQ5IDIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTMuNjQ4ODUxLDQ1LjU3MDg1NTYgQzIxMy42NDg4NTEsNDUuNTcwODU1NiAyMTQuNzMzODI4LDQ3LjU2NjU2NTcgMjE1LjAyNDY3Nyw0OC4wNDkxNDM0IEMyMTUuMjgzNjA4LDQ4LjQ3ODcxMzMgMjE0Ljk3MzIyMSw0OC40NzA4NjU0IDIxNC45MDE4MTYsNDguNDYzODQzNiBDMjE0LjkwMjUwNCw0OC40NjI4Nzk4IDIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODg3MDk1LDQ4LjQ2MjE5MTQgQzIxNC44ODcwOTUsNDguNDYyMTkxNCAyMTQuODkzMDExLDQ4LjQ2MzAxNzUgMjE0LjkwMTgxNiw0OC40NjM4NDM2IEMyMTQuODk4NjUyLDQ4LjQ2ODI0OTUgMjE0LjU5NDczMSw0OC40NzgzMDAzIDIxMS40NDc1MjgsNDguNDYyMTkxNCBDMjA3LjA1ODY0MSw0Ny44NjY1NzYyIDIwNi45MDczLDQzLjkxODY2MzggMjA2LjkwNzMsNDMuOTE4NjYzOCBMMjA2LjkwNzMsMzYuODk2ODQ4MyBMMjA0LjQzMDgxMiwzNi44OTY4NDgzIEwyMDQuNDMwODEyLDM0LjI4MDg3NzkgQzIwNC40MzA4MTIsMzMuOTI0Mjc5OCAyMDQuODQzNTYsMzMuODY3ODI5OSAyMDQuODQzNTYsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzMuODY3ODI5OSBMMjA2LjkwNzMsMzEuMjUxODU5NCBDMjA2LjkwNzMsMzAuODI1MTgwOSAyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA3LjMyMDA0OCwzMC43MDExMjg4IEMyMDcuMzIwMDQ4LDMwLjcwMTEyODggMjA4Ljc3MjY0NiwzMC4yODU4Nzc5IDIwOS42MTc4MTYsMzAuMDQ0MTA3MiBDMjA5Ljk2NDY2MiwyOS45NDQ5NzU2IDIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMDcxNzAxLDMwLjE1MDM5ODIgQzIxMC4wNzE3MDEsMzAuMTUwMzk4MiAyMTAuMjA5Mjg0LDMwLjA3NzQyNjQgMjEwLjIwOTI4NCwzMC4zOTI3MTk2IEwyMTAuMjA5Mjg0LDM0LjAwNTUxMjUgTDIxMy43ODY0MzMsMzQuMDA1NTEyNSBDMjE0LjEzNDY1NSwzNC4wMDU1MTI1IDIxNC4xOTkxODEsMzQuNDE4NTYwNSAyMTQuMTk5MTgxLDM0LjQxODU2MDUgTDIxNC4xOTkxODEsMzcuMDM0NTMxIEwyMTAuMjA5Mjg0LDM3LjAzNDUzMSBMMjEwLjIwOTI4NCw0My4wOTI1Njc4IEMyMTAuMjA5Mjg0LDQ0Ljg1MzM5MTMgMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IDIxMi4xMzU0NDEsNDUuMTU3ODA3NyBMMjEyLjEzNTQ0MSw0NS4xNTc4MDc3IFogTTIwMS41NDE1NzYsNDguMTg2ODI2MSBMMTk5LjM0MDI1Myw0OC4xODY4MjYxIEMxOTguOTA4MzgxLDQ4LjE4NjgyNjEgMTk4LjkyNzUwNSw0Ny42MzYwOTU1IDE5OC45Mjc1MDUsNDcuNjM2MDk1NSBMMTk4LjkyNzUwNSwzNy40NDc1Nzg5IEMxOTguOTI3NTA1LDM2LjgyODY5NTQgMTk4LjEwMjAwOSwzNi42MjE0ODMgMTk4LjEwMjAwOSwzNi42MjE0ODMgTDE5My41NjE3ODEsMzYuNjIxNDgzIEMxOTIuODg0NDYyLDM2LjYyMTQ4MyAxOTIuODczODY4LDM3LjQ0NzU3ODkgMTkyLjg3Mzg2OCwzNy40NDc1Nzg5IEwxOTIuODczODY4LDQ3Ljc3Mzc3ODEgQzE5Mi44NzM4NjgsNDguMTc4NzAyOCAxOTIuNDYxMTIsNDguMTg2ODI2MSAxOTIuNDYxMTIsNDguMTg2ODI2MSBMMTkwLjI1OTc5Nyw0OC4xODY4MjYxIEMxODkuNzc1NzgyLDQ4LjE4NjgyNjEgMTg5Ljg0NzA0OSw0Ny42MzYwOTU1IDE4OS44NDcwNDksNDcuNjM2MDk1NSBMMTg5Ljg0NzA0OSwzNC44MzE2MDg1IEMxODkuODQ3MDQ5LDMzLjgwMzExOSAxOTEuMDg1MjkzLDMzLjU5MjQ2NDYgMTkxLjA4NTI5MywzMy41OTI0NjQ2IEwyMDAuNzE2MDgsMzMuNTkyNDY0NiBDMjAxLjY3Nzc4MywzMy41OTI0NjQ2IDIwMS45NTQzMjQsMzQuODMxNjA4NSAyMDEuOTU0MzI0LDM0LjgzMTYwODUgTDIwMS45NTQzMjQsNDcuNDk4NDEyOCBDMjAxLjk1NDMyNCw0OC4yMTg2MzA4IDIwMS41NDE1NzYsNDguMTg2ODI2MSAyMDEuNTQxNTc2LDQ4LjE4NjgyNjEgTDIwMS41NDE1NzYsNDguMTg2ODI2MSBaIE0xODUuODU3MTUyLDQyLjQwNDE1NDYgTDE3Ny4zMjcwMjcsNDIuNDA0MTU0NiBMMTc3LjMyNzAyNyw0NC40NjkzOTQ0IEMxNzcuMzI3MDI3LDQ1LjIxMzU2OTEgMTc4LjI5MDEwNiw0NS40MzMxNzMgMTc4LjI5MDEwNiw0NS40MzMxNzMgTDE4NS4xNjkyMzksNDUuNDMzMTczIEMxODUuNjU4NzU4LDQ1LjQzMzE3MyAxODUuOTk0NzM1LDQ1Ljg0NjIyMSAxODUuOTk0NzM1LDQ1Ljg0NjIyMSBDMTg1Ljk5NDczNSw0NS44NDYyMjEgMTg2LjU5NTAwOCw0Ny4wOTUxNDAzIDE4Ni44MjAyMzEsNDcuNjM2MDk1NSBDMTg3LjA0NTQ1NCw0OC4xNzcwNTA2IDE4Ni40MDc0ODMsNDguMTg2ODI2MSAxODYuNDA3NDgzLDQ4LjE4NjgyNjEgTDE3Ni4wODg3ODMsNDguMTg2ODI2MSBDMTc0Ljg0NjEzNiw0OC4xODY4MjYxIDE3NC41NzUzNzQsNDYuNjcyMzE2OSAxNzQuNTc1Mzc0LDQ2LjY3MjMxNjkgTDE3NC41NzUzNzQsMzQuOTY5MjkxMSBDMTc0LjU3NTM3NCwzNC4yOTYyOTgzIDE3NS41Mzg0NTIsMzQuMDA1NTEyNSAxNzUuNTM4NDUyLDM0LjAwNTUxMjUgTDE4NS44NTcxNTIsMzQuMDA1NTEyNSBDMTg2Ljg5NDExMywzNC4wMDU1MTI1IDE4Ny4wOTUzOTYsMzUuMjQ0NjU2NCAxODcuMDk1Mzk2LDM1LjI0NDY1NjQgTDE4Ny4wOTUzOTYsNDEuMTY1MDEwNyBDMTg3LjA5NTM5Niw0Mi4xNjM4OTgzIDE4NS44NTcxNTIsNDIuNDA0MTU0NiAxODUuODU3MTUyLDQyLjQwNDE1NDYgTDE4NS44NTcxNTIsNDIuNDA0MTU0NiBaIE0xODQuMzQzNzQzLDM3LjQ0NzU3ODkgQzE4NC4zNDM3NDMsMzcuNDQ3NTc4OSAxODQuMjU3MDY2LDM2Ljc1OTE2NTcgMTgzLjY1NTgzLDM2Ljc1OTE2NTcgTDE3OC4wMTQ5NCwzNi43NTkxNjU3IEMxNzguMDE0OTQsMzYuNzU5MTY1NyAxNzcuMzI3MDI3LDM2Ljk0Mzc5ODEgMTc3LjMyNzAyNywzNy40NDc1Nzg5IEwxNzcuMzI3MDI3LDM4Ljk2MjA4ODIgQzE3Ny4zMjcwMjcsMzguOTYyMDg4MiAxNzcuMzQ2ODM5LDM5LjY1MDUwMTQgMTc4LjAxNDk0LDM5LjY1MDUwMTQgTDE4My42NTU4MywzOS42NTA1MDE0IEMxODMuNjU1ODMsMzkuNjUwNTAxNCAxODQuMzQzNzQzLDM5LjQ4MDQ2MzQgMTg0LjM0Mzc0MywzOC44MjQ0MDU1IEwxODQuMzQzNzQzLDM3LjQ0NzU3ODkgTDE4NC4zNDM3NDMsMzcuNDQ3NTc4OSBaIE0xNzEuNDEwOTcyLDQ4LjE4NjgyNjEgTDE2OS4yMDk2NSw0OC4xODY4MjYxIEMxNjguOTE5MjEzLDQ4LjE4NjgyNjEgMTY4Ljc5NjkwMiw0Ny43NzM3NzgxIDE2OC43OTY5MDIsNDcuNzczNzc4MSBMMTY4Ljc5NjkwMiwzNy40NDc1Nzg5IEMxNjguNzk2OTAyLDM2LjgwNzIxNjkgMTY3Ljk3MTQwNiwzNi42MjE0ODMgMTY3Ljk3MTQwNiwzNi42MjE0ODMgTDE2NS45MDc2NjYsMzYuNjIxNDgzIEMxNjUuMzMxODgyLDM2LjYyMTQ4MyAxNjUuMjE5NzUyLDM3LjQ0NzU3ODkgMTY1LjIxOTc1MiwzNy40NDc1Nzg5IEwxNjUuMjE5NzUyLDQ3Ljc3Mzc3ODEgQzE2NS4yMTk3NTIsNDguMTE2MzMyNiAxNjQuODA3MDA0LDQ4LjE4NjgyNjEgMTY0LjgwNzAwNCw0OC4xODY4MjYxIEwxNjIuNjA1NjgyLDQ4LjE4NjgyNjEgQzE2Mi4yOTk1Niw0OC4xODY4MjYxIDE2Mi4xOTI5MzQsNDcuNzczNzc4MSAxNjIuMTkyOTM0LDQ3Ljc3Mzc3ODEgTDE2Mi4xOTI5MzQsMzcuNDQ3NTc4OSBDMTYyLjE5MjkzNCwzNi43OTI4OTc5IDE2MS4zNjc0MzgsMzYuNjIxNDgzIDE2MS4zNjc0MzgsMzYuNjIxNDgzIEwxNTkuMzAzNjk4LDM2LjYyMTQ4MyBDMTU4LjY3Mzk4MiwzNi42MjE0ODMgMTU4LjYxNTc4NCwzNy40NDc1Nzg5IDE1OC42MTU3ODQsMzcuNDQ3NTc4OSBMMTU4LjYxNTc4NCw0Ny43NzM3NzgxIEMxNTguNjE1Nzg0LDQ4LjIxNTczOTUgMTU4LjIwMzAzNiw0OC4xODY4MjYxIDE1OC4yMDMwMzYsNDguMTg2ODI2MSBMMTU2LjAwMTcxNCw0OC4xODY4MjYxIEMxNTUuNTg5Mzc4LDQ4LjE4NjgyNjEgMTU1LjU4ODk2Niw0Ny43NzM3NzgxIDE1NS41ODg5NjYsNDcuNzczNzc4MSBMMTU1LjU4ODk2NiwzNC42OTM5MjU4IEMxNTUuNTg4OTY2LDMzLjkzNjI1ODIgMTU2LjY4OTYyNywzMy41OTI0NjQ2IDE1Ni42ODk2MjcsMzMuNTkyNDY0NiBMMTcwLjQ0Nzg5NCwzMy41OTI0NjQ2IEMxNzEuNTUyMjcsMzMuNTkyNDY0NiAxNzEuODIzNzIsMzQuOTY5MjkxMSAxNzEuODIzNzIsMzQuOTY5MjkxMSBMMTcxLjgyMzcyLDQ3Ljc3Mzc3ODEgQzE3MS44MjM3Miw0OC4yNDkzMzQgMTcxLjQxMDk3Miw0OC4xODY4MjYxIDE3MS40MTA5NzIsNDguMTg2ODI2MSBMMTcxLjQxMDk3Miw0OC4xODY4MjYxIFogTTE1MS40NjE0ODYsNDIuNDA0MTU0NiBMMTQyLjkzMTM2LDQyLjQwNDE1NDYgTDE0Mi45MzEzNiw0NC40NjkzOTQ0IEMxNDIuOTMxMzYsNDUuMjEzNTY5MSAxNDMuODk0NDM5LDQ1LjQzMzE3MyAxNDMuODk0NDM5LDQ1LjQzMzE3MyBMMTUwLjc3MzU3Miw0NS40MzMxNzMgQzE1MS4yNjMwOTIsNDUuNDMzMTczIDE1MS41OTkwNjgsNDUuODQ2MjIxIDE1MS41OTkwNjgsNDUuODQ2MjIxIEMxNTEuNTk5MDY4LDQ1Ljg0NjIyMSAxNTIuMTk5MjA0LDQ3LjA5NTE0MDMgMTUyLjQyNDU2NCw0Ny42MzYwOTU1IEMxNTIuNjQ5Nzg3LDQ4LjE3NzA1MDYgMTUyLjAxMTgxNiw0OC4xODY4MjYxIDE1Mi4wMTE4MTYsNDguMTg2ODI2MSBMMTQxLjY5MzExNyw0OC4xODY4MjYxIEMxNDAuNDUwNDcsNDguMTg2ODI2MSAxNDAuMTc5NzA3LDQ2LjY3MjMxNjkgMTQwLjE3OTcwNyw0Ni42NzIzMTY5IEwxNDAuMTc5NzA3LDM0Ljk2OTI5MTEgQzE0MC4xNzk3MDcsMzQuMjk2Mjk4MyAxNDEuMTQyNzg2LDM0LjAwNTUxMjUgMTQxLjE0Mjc4NiwzNC4wMDU1MTI1IEwxNTEuNDYxNDg2LDM0LjAwNTUxMjUgQzE1Mi40OTg0NDYsMzQuMDA1NTEyNSAxNTIuNjk5NzMsMzUuMjQ0NjU2NCAxNTIuNjk5NzMsMzUuMjQ0NjU2NCBMMTUyLjY5OTczLDQxLjE2NTAxMDcgQzE1Mi42OTk3Myw0Mi4xNjM4OTgzIDE1MS40NjE0ODYsNDIuNDA0MTU0NiAxNTEuNDYxNDg2LDQyLjQwNDE1NDYgTDE1MS40NjE0ODYsNDIuNDA0MTU0NiBaIE0xNDkuOTQ4MDc2LDM3LjQ0NzU3ODkgQzE0OS45NDgwNzYsMzcuNDQ3NTc4OSAxNDkuODYxMzk5LDM2Ljc1OTE2NTcgMTQ5LjI2MDE2MywzNi43NTkxNjU3IEwxNDMuNjE5Mjc0LDM2Ljc1OTE2NTcgQzE0My42MTkyNzQsMzYuNzU5MTY1NyAxNDIuOTMxMzYsMzYuOTQzNzk4MSAxNDIuOTMxMzYsMzcuNDQ3NTc4OSBMMTQyLjkzMTM2LDM4Ljk2MjA4ODIgQzE0Mi45MzEzNiwzOC45NjIwODgyIDE0Mi45NTExNzIsMzkuNjUwNTAxNCAxNDMuNjE5Mjc0LDM5LjY1MDUwMTQgTDE0OS4yNjAxNjMsMzkuNjUwNTAxNCBDMTQ5LjI2MDE2MywzOS42NTA1MDE0IDE0OS45NDgwNzYsMzkuNDgwNDYzNCAxNDkuOTQ4MDc2LDM4LjgyNDQwNTUgTDE0OS45NDgwNzYsMzcuNDQ3NTc4OSBMMTQ5Ljk0ODA3NiwzNy40NDc1Nzg5IFogTTEzOC4xMTU5NjcsNDguMTg2ODI2MSBMMTMyLjg4NzgyNiw0OC4xODY4MjYxIEMxMzIuODg3ODI2LDQ4LjE4NjgyNjEgMTI5LjA2MTkyNyw0OC4wMDYxODY1IDEyOC43NjAzNDYsNDQuMTk0MDI5MSBDMTI4Ljc0ODIzOSw0MC4yNzkwMjI4IDEyOC43NjAzNDYsMjguMDg1MTU4MyAxMjguNzYwMzQ2LDI4LjA4NTE1ODMgTDEzMS4yMzY4MzQsMjguMDg1MTU4MyBDMTMxLjIzNjgzNCwyOC4wODUxNTgzIDEzMi4wNjIzMywyOC4wNzAxNTA5IDEzMi4wNjIzMywyOC45MTEyNTQzIEwxMzIuMDYyMzMsNDMuMzY3OTMzMSBDMTMyLjA2MjMzLDQzLjM2NzkzMzEgMTMyLjM1MDAxNSw0NC41NjM4NDQ3IDEzMy45ODg0ODcsNDUuMDIwMTI1IEMxMzUuODM5OCw0NS4wMTA3NjI2IDEzNi4xODk4MSw0NS4wMjAxMjUgMTM2LjE4OTgxLDQ1LjAyMDEyNSBDMTM2LjE4OTgxLDQ1LjAyMDEyNSAxMzYuOTA3MzAzLDQ0Ljc5MDE5NSAxMzcuNDI4MDU0LDQ1LjcwODUzODMgQzEzNy45NDg4MDQsNDYuNjI2ODgxNiAxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjUyODcxNSw0Ny42MzYwOTU1IEMxMzguNTI4NzE1LDQ3LjYzNjA5NTUgMTM4LjYxMTU0LDQ4LjE4NjgyNjEgMTM4LjExNTk2Nyw0OC4xODY4MjYxIEwxMzguMTE1OTY3LDQ4LjE4NjgyNjEgWiBNMTExLjU2MjUxMyw0Ny4zNjA3MzAyIEwxMTEuNTYyNTEzLDI5LjE4NjYxOTYgQzExMS41NjI1MTMsMjguMzgwNzYzIDExMi4yNTA0MjYsMjguMjIyODQxIDExMi4yNTA0MjYsMjguMjIyODQxIEwxMjUuMTgzMTk3LDI4LjIyMjg0MSBDMTI1LjkwNjQ2OSwyOC4yMjI4NDEgMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS41OTU5NDUsMjkuMDQ4OTM2OSBDMTI1LjU5NTk0NSwyOS4wNDg5MzY5IDEyNS4xOTI4MjcsMzAuMTY2MDk0IDEyNC45MDgwMzEsMzAuNzAxMTI4OCBDMTI0LjYyMzIzNSwzMS4yMzYxNjM2IDEyNC4wODI1MzUsMzEuMjUxODU5NCAxMjQuMDgyNTM1LDMxLjI1MTg1OTQgTDExNS42ODk5OTMsMzEuMjUxODU5NCBDMTE0LjkwODUyMywzMS4yNTE4NTk0IDExNC44NjQ0OTcsMzEuOTQwMjcyNyAxMTQuODY0NDk3LDMxLjk0MDI3MjcgTDExNC44NjQ0OTcsMzYuNDgzODAwMyBMMTI0LjM1NzcwMSwzNi40ODM4MDAzIEMxMjQuOTE0NjM1LDM2LjQ4MzgwMDMgMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyNC42MzI4NjYsMzcuMTcyMjEzNiBDMTI0LjYzMjg2NiwzNy4xNzIyMTM2IDEyMy45MjE4MzksMzguNjg4OTI1OCAxMjMuNjY5Nzg3LDM5LjA5OTc3MDggQzEyMy40MTc3MzYsMzkuNTEwNjE1OSAxMjIuODQ0MjkxLDM5LjUxMjgxODggMTIyLjg0NDI5MSwzOS41MTI4MTg4IEwxMTQuODY0NDk3LDM5LjUxMjgxODggTDExNC44NjQ0OTcsNDQuMzMxNzExNyBDMTE0Ljg2NDQ5Nyw0NC45ODg0NTggMTE1LjU1MjQxLDQ1LjE1NzgwNzcgMTE1LjU1MjQxLDQ1LjE1NzgwNzcgTDEyNC4zNTc3MDEsNDUuMTU3ODA3NyBDMTI0Ljk5NjIyMiw0NS4xNTc4MDc3IDEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjUuMTgzMTk3LDQ1LjU3MDg1NTYgQzEyNS4xODMxOTcsNDUuNTcwODU1NiAxMjYuMDU1MTk2LDQ2LjkzMjM5OTQgMTI2LjQyMTQ0MSw0Ny40OTg0MTI4IEMxMjYuNzg3ODIzLDQ4LjA2NDQyNjIgMTI2LjI4Mzg1OCw0OC4xODY4MjYxIDEyNi4yODM4NTgsNDguMTg2ODI2MSBMMTEyLjM4ODAwOSw0OC4xODY4MjYxIEMxMTEuODE0MTUxLDQ4LjE4NjgyNjEgMTExLjU2MjUxMyw0Ny4zNjA3MzAyIDExMS41NjI1MTMsNDcuMzYwNzMwMiBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t){s.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjMwcHgiIGhlaWdodD0iMzBweCIgdmlld0JveD0iMCAwIDM4IDQ4IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MCAoMzM3NjIpIC0gaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoIC0tPgogICAgPHRpdGxlPlNoYXBlIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0idjIuMi4wIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0i6aaW6aG1Lem7mOiupOaViOaenC1jb3B5LTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC03MC4wMDAwMDAsIC0xOS4wMDAwMDApIiBmaWxsPSIjRkZGRkZGIj4KICAgICAgICAgICAgPHBhdGggZD0iTTIxMi4xMzU0NDEsNDUuMTU3ODA3NyBaIE0xMDMuNDE2NTAyLDQ2LjIxNzU1MTEgQzEwMy40MDcwMDgsNDcuNzk0NTY4MiAxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgMTAyLjU4Nzg0MSw0OC4xNDYzNDc0IEMxMDIuNTg3ODQxLDQ4LjE0NjM0NzQgODguNDUyMDQ3OCw1Ni4zMTQ1MDg3IDg3LjUzMjk5NTYsNTYuODI2Mjc1MSBDODYuNjIyMzM2LDU3LjIxNzE1NjEgODYuMDEzNjcwMyw1Ni44MjYyNzUxIDg2LjAxMzY3MDMsNTYuODI2Mjc1MSBDODYuMDEzNjcwMyw1Ni44MjYyNzUxIDcxLjIyMjU3MDYsNDguMjQ3OTU3MiA3MC42ODI2OTYyLDQ3Ljg3MDg0NDQgQzcwLjE0MjY4NDMsNDcuNDkzNzMxNiA3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTMwMTY0Myw0Ni45MDYzNzc0IEM3MC4xMzAxNjQzLDQ2LjkwNjM3NzQgNzAuMTQ1MDIzMiwyOS45MTk5MTc0IDcwLjEzMDE2NDMsMjkuMTMzMzM2NCBDNzAuMTE1MzA1MywyOC4zNDY2MTc3IDcxLjA5Njk1NzYsMjcuNzU1NTQ2MSA3MS4wOTY5NTc2LDI3Ljc1NTU0NjEgTDg1Ljg3NTUzNzMsMTkuMjEzNDM4NyBDODYuNzg1MzcxNCwxOC43MzMyMDE2IDg3LjY3MTEyODYsMTkuMjEzNDM4NyA4Ny42NzExMjg2LDE5LjIxMzQzODcgQzg3LjY3MTEyODYsMTkuMjEzNDM4NyAxMDAuNzI2NjIzLDI2LjgwMjA5MzcgMTAyLjE3MzQ0MiwyNy42MTc3MjU3IEMxMDMuNTkxNTA3LDI4LjI5MTk1NzcgMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MTY1MDIsMjkuNjg0MzQyNCBDMTAzLjQxNjUwMiwyOS42ODQzNDI0IDEwMy40MjUzMDcsNDQuNzUxOTE5MiAxMDMuNDE2NTAyLDQ2LjIxNzU1MTEgTDEwMy40MTY1MDIsNDYuMjE3NTUxMSBaIE05Ny41MTYwMTA1LDI5LjE2OTEzMzkgQzk0LjQ5MDAxNzMsMjcuNDI3NDQ4MyA4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODcuMzYxNTg0MiwyMy4yOTcxMDYzIEM4Ny4zNjE1ODQyLDIzLjI5NzEwNjMgODYuNjY2MTAzOSwyMi45MjEyMzI2IDg1Ljk1MTc3NDcsMjMuMjk3MTA2MyBMNzQuMzQ4NzQwNiwyOS45ODIxNSBDNzQuMzQ4NzQwNiwyOS45ODIxNSA3My41NzgwMDI1LDMwLjQ0NDkwMTQgNzMuNTg5Njk3LDMxLjA2MDQ4MDUgQzczLjYwMTM5MTUsMzEuNjc2MDU5NyA3My41ODk2OTcsNDQuOTY5ODcwOCA3My41ODk2OTcsNDQuOTY5ODcwOCBDNzMuNTg5Njk3LDQ0Ljk2OTg3MDggNzMuNTk5NDY1NCw0NS40Mjk1OTMyIDc0LjAyMzQ5NTEsNDUuNzI0NjQ3MiBDNzQuNDQ3Mzg3Myw0Ni4wMTk3MDExIDg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni4wNjAxODk4LDUyLjczMzI0NTEgQzg2LjA2MDE4OTgsNTIuNzMzMjQ1MSA4Ni41MzgxNTIsNTMuMDM5MTc1OSA4Ny4yNTMwMzE1LDUyLjczMzI0NTEgQzg3Ljk3NDY1MjYsNTIuMzMyNzI2MiA5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuMDczMDMzNSw0NS45NDAyNTgyIEM5OS4wNzMwMzM1LDQ1Ljk0MDI1ODIgOTkuNzE2MjMyNSw0NS42NjQ4OTI5IDk5LjcyMzY2MTksNDQuNDMwNzA1NiBDOTkuNzI1NzI1Nyw0NC4wNzQ3OTU5IDk5LjcyNjU1MTIsNDIuNjkzMjg4MSA5OS43MjY2ODg3LDQwLjk1NzUyMjkgTDg2LjY2MDA1MDIsNDguODc1MjM5NCBMODYuNjYwMDUwMiw0NS44NDYyMjEgQzg2LjY2MDA1MDIsNDQuNjAyMTIwNSA4Ny42MjMxMjg5LDQzLjc4MDk4MTEgODcuNjIzMTI4OSw0My43ODA5ODExIEw5OS4xODA3NjA3LDM2LjgxNjU3OTMgQzk5LjYxNjg5NzgsMzYuMzYxMTI1MSA5OS43MDY4NzY4LDM1LjYzMTU0NDcgOTkuNzI1NDUwNSwzNS4zNTU2Mjg3IEM5OS43MjUwMzc4LDM0LjA5MDQ2MjcgOTkuNzI0NDg3NCwzMi45ODUyODQxIDk5LjcyNDA3NDcsMzIuMjg1MTY3OCBMODYuNjYwMDUwMiw0MC4yMDEyMzIxIEw4Ni42NjAwNTAyLDM3LjAzNDUzMSBDODYuNjYwMDUwMiwzNS43OTA0MzA1IDg3LjQ4NTU0NjIsMzUuMjQ0NjU2NCA4Ny40ODU1NDYyLDM1LjI0NDY1NjQgTDk3LjUxNjAxMDUsMjkuMTY5MTMzOSBaIiBpZD0iU2hhcGUtQ29weSI+PC9wYXRoPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(s,t,a){a(978);var l=a(13)(a(980),a(981),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(962),e=l(n),i=a(578);t.default={props:{data:Array,base:{type:String,default:""}},data:function(){return{highlights:[],navState:[],isSmallScreen:!1,versions:[],version:i.version,dropdownVisible:!1}},watch:{"$route.path":function(){this.handlePathChange()}},computed:{navStyle:function(){return this.isSmallScreen?{"padding-bottom":"60px"}:{}},isComponentPage:function(){return/^component-/.test(this.$route.name)},langConfig:function(){var s=this;return e.default.filter(function(t){return t.lang===s.$route.meta.lang})[0].nav}},methods:{switchVersion:function(s){s!==this.version&&(location.href=location.origin+"/"+this.versions[s]+"/"+location.hash+" ")},handleResize:function(){this.isSmallScreen=document.documentElement.clientWidth<768,this.handlePathChange()},handlePathChange:function(){var s=this;return this.isSmallScreen?void this.$nextTick(function(){s.hideAllMenu();for(var t=s.$el.querySelector("a.active"),a=t.parentNode;"UL"!==a.tagName;)a=a.parentNode;a.style.height="auto"}):void this.expandAllMenu()},hideAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="0"})},expandAllMenu:function(){[].forEach.call(this.$el.querySelectorAll(".pure-menu-list"),function(s){s.style.height="auto"})},expandMenu:function(s){if(this.isSmallScreen){var t=s.currentTarget;t.nextElementSibling&&"UL"===t.nextElementSibling.tagName&&(this.hideAllMenu(),s.currentTarget.nextElementSibling.style.height="auto")}},handleDropdownToggle:function(s){this.dropdownVisible=s}},created:function(){var s=this,t=new XMLHttpRequest;t.onreadystatechange=function(a){4===t.readyState&&200===t.status&&(s.versions=JSON.parse(t.responseText))},t.open("GET","/versions.json"),t.send()},mounted:function(){this.handleResize(),window.addEventListener("resize",this.handleResize)},beforeDestroy:function(){window.removeEventListener("resize",this.handleResize)}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"side-nav",style:s.navStyle},[a("el-dropdown",{directives:[{name:"show",rawName:"v-show",value:s.isComponentPage,expression:"isComponentPage"}],staticClass:"nav-dropdown",class:{"is-active":s.dropdownVisible},attrs:{trigger:"click"}},[a("span",[s._v("\n      "+s._s(s.langConfig.dropdown)+s._s(s.version)+"\n      "),a("i",{staticClass:"el-icon-caret-bottom el-icon--right"})]),a("el-dropdown-menu",{staticClass:"nav-dropdown-list",attrs:{offset:-80},on:{input:s.handleDropdownToggle},slot:"dropdown"},s._l(Object.keys(s.versions),function(t){return a("el-dropdown-item",{nativeOn:{click:function(a){s.switchVersion(t)}}},[s._v("\n        "+s._s(t)+"\n      ")])}))],1),a("ul",s._l(s.data,function(t){return a("li",{staticClass:"nav-item"},[t.path?a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}}):a("a",{on:{click:s.expandMenu}},[s._v(s._s(t.name))]),t.children?a("ul",{staticClass:"pure-menu-list sub-nav"},s._l(t.children,function(t){return a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title||t.name)}})],1)})):s._e(),t.groups?s._l(t.groups,function(t){return a("div",{staticClass:"nav-group"},[a("div",{staticClass:"nav-group__title",on:{click:s.expandMenu}},[s._v(s._s(t.groupName))]),a("ul",{staticClass:"pure-menu-list"},s._l(t.list,function(t){return t.disabled?s._e():a("li",{staticClass:"nav-item"},[a("router-link",{attrs:{"active-class":"active",to:s.base+t.path,exact:""},domProps:{textContent:s._s(t.title)}})],1)}))])}):s._e()],2)}))],1)},staticRenderFns:[]}},function(s,t,a){a(983);var l=a(13)(a(985),a(986),null,null);s.exports=l.exports},function(s,t){},,function(s,t,a){"use strict";function l(s){return s&&s.__esModule?s:{default:s}}t.__esModule=!0;var n=a(24),e=l(n);t.default={data:function(){return{currentComponent:null,nav:[],currentIndex:-1,leftNav:null,rightNav:null}},computed:{lang:function(){return this.$route.meta.lang}},watch:{"$route.path":function(){this.setNav(),this.updateNav()}},methods:{setNav:function(){var s=this,t=e.default[this.lang];this.nav=t[0].children.concat(t[1]),t[2].groups.map(function(s){return s.list}).forEach(function(t){s.nav=s.nav.concat(t)})},updateNav:function(){this.currentComponent="/"+this.$route.path.split("/")[3];for(var s=0,t=this.nav.length;s<t;s++)if(this.nav[s].path===this.currentComponent){this.currentIndex=s;break}this.leftNav=this.nav[this.currentIndex-1],this.rightNav=this.nav[this.currentIndex+1]},handleNavClick:function(s){this.$router.push("/"+this.lang+"/component"+("prev"===s?this.leftNav.path:this.rightNav.path))}},created:function(){this.setNav(),this.updateNav()}}},function(s,t){s.exports={render:function(){var s=this,t=s.$createElement,a=s._self._c||t;return a("div",{staticClass:"footer-nav"},[s.leftNav?a("span",{staticClass:"footer-nav-link footer-nav-left",on:{click:function(t){s.handleNavClick("prev")}}},[a("i",{staticClass:"el-icon-arrow-left"}),s._v("\n    "+s._s(s.leftNav.title||s.leftNav.name)+"\n  ")]):s._e(),s.rightNav?a("span",{staticClass:"footer-nav-link footer-nav-right",on:{click:function(t){s.handleNavClick("next")}}},[s._v("\n    "+s._s(s.rightNav.title||s.rightNav.name)+"\n    "),a("i",{staticClass:"el-icon-arrow-right"})]):s._e()])},staticRenderFns:[]}},function(s,t){s.exports={"zh-CN":{home:"Element - 网站快速成型工具",guide:"指南 | Element",component:"组件 | Element",resource:"资源 | Element"},"en-US":{home:"Element - A Desktop UI Toolkit for Web",guide:"Guide | Element",component:"Component | Element",resource:"Resource | Element"}}}]);
\ No newline at end of file
diff --git a/docs.b00d8e3.css b/docs.b00d8e3.css
deleted file mode 100644
index 6b3fba27c..000000000
--- a/docs.b00d8e3.css
+++ /dev/null
@@ -1 +0,0 @@
-.hljs{display:block;overflow-x:auto;padding:.5em;background:#fff}.hljs,.hljs-subst{color:#000}.hljs-addition,.hljs-meta,.hljs-string,.hljs-symbol,.hljs-template-tag,.hljs-template-variable{color:#756bb1}.hljs-comment,.hljs-quote{color:#636363}.hljs-bullet,.hljs-link,.hljs-literal,.hljs-number,.hljs-regexp{color:#31a354}.hljs-deletion,.hljs-variable{color:#88f}.hljs-built_in,.hljs-doctag,.hljs-keyword,.hljs-name,.hljs-section,.hljs-selector-class,.hljs-selector-id,.hljs-selector-tag,.hljs-strong,.hljs-tag,.hljs-title,.hljs-type{color:#3182bd}.hljs-emphasis{font-style:italic}.hljs-attribute{color:#e6550d}@font-face{font-family:icomoon;src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=);src:url(data:application/vnd.ms-fontobject;base64,SAgAAKQHAAABAAIAAAAAAAAAAAAAAAAAAAABAJABAAAAAExQAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAa7522AAAAAAAAAAAAAAAAAAAAAAAAA4AaQBjAG8AbQBvAG8AbgAAAA4AUgBlAGcAdQBsAGEAcgAAABYAVgBlAHIAcwBpAG8AbgAgADEALgAwAAAADgBpAGMAbwBtAG8AbwBuAAAAAAAAAQAAAAsAgAADADBPUy8yDxIFxwAAALwAAABgY21hcBdW0ooAAAEcAAAAVGdhc3AAAAAQAAABcAAAAAhnbHlmx3GYOgAAAXgAAAPUaGVhZArUIjUAAAVMAAAANmhoZWEHwgPJAAAFhAAAACRobXR4FgAAAAAABagAAAAgbG9jYQMUAf4AAAXIAAAAEm1heHAADgBvAAAF3AAAACBuYW1lmUoJ+wAABfwAAAGGcG9zdAADAAAAAAeEAAAAIAADA5oBkAAFAAACmQLMAAAAjwKZAswAAAHrADMBCQAAAAAAAAAAAAAAAAAAAAEQAAAAAAAAAAAAAAAAAAAAAEAAAOkDA8D/wABAA8AAQAAAAAEAAAAAAAAAAAAAACAAAAAAAAMAAAADAAAAHAABAAMAAAAcAAMAAQAAABwABAA4AAAACgAIAAIAAgABACDpA//9//8AAAAAACDpAP/9//8AAf/jFwQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAUAAP/ABAADwAATACcANQBDAFEAABM0PgIzMh4CFRQOAiMiLgIlNC4CIyIOAhUUHgIzMj4CJTQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQEiBhUUFjMhMjY1NCYjAFCLu2pqu4tQUIu7amq7i1ADs0R2n1pan3ZERHafWlqfdkT9cx4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEQHAaruLUFCLu2pqu4tQUIu7alqfdkREdp9aWp92RER2n+cVHh4VMxYeHhYzFR4eFTMWHh4W/wAZEREZGRERGQAAAAQAAP/ABAADwAATACEALwBPAAABIg4CFRQeAjMyPgI1NC4CATQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNRMnLgEjIgYPAQ4BIyImNTQ2Nyc3PgEzMhYXHgEVFAYnAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHkQEKlovMFsqBAEFAhAVBgYBCjJrNTZpMwkKHBMDwFCLu2pqu4tQUIu7amq7i1D+jRUeHhUzFh4eFjMVHh4VMxYeHhb+mwEVFRUVAQEBGBEIDwYDBRgaGRoFEwwTGgYAAAQAAP/ABAADwAATACEALwA9AAAFIi4CNTQ+AjMyHgIVFA4CARUUFjMyNj0BNCYjIgYFFRQWMzI2PQE0JiMiBgEiBhUUFjMhMjY1NCYjAgBqu4tQUIu7amq7i1BQi7v+vB4WFR4eFRYeAU0eFRYeHhYVHv72ERgYEQEuERgYEUBQi7tqaruLUFCLu2pqu4tQAo0zFh4eFjMVHh4VMxYeHhYzFR4e/rgZEREZGRERGQAABAAA/8AEAAPAABMAUABeAGwAAAEiDgIVFB4CMzI+AjU0LgITFAYVDgEVDgMjOAExOAExIi4CJzQmJzQmNS4BNTQ2Nz4BMzIWFzEeATMyNjcxPgEzMhYXHgEVFAYHAzQ2MzIWHQEUBiMiJjUlNDYzMhYdARQGIyImNQIAaruLUFCLu2pqu4tQUIu7xwEBARU/TVsyMltNPxUBAQEBAQICBRUMDBUFIHhLS3ggBRUMDBUFAgIBAb4eFRYeHhYVHv6zHhYVHh4VFh4DwFCLu2pqu4tQUIu7amq7i1D9cgICAQECASlCMBsbMEIpAQIBAQICAgYDBQkECwwMCz1MTD0LDAwLBAkFAwYCARsVHh4VMxYeHhYzFR4eFTMWHh4WAAAAAQAAAAAAANh2vmtfDzz1AAsEAAAAAADT2u7cAAAAANPa7twAAP/ABAADwAAAAAgAAgAAAAAAAAABAAADwP/AAAAEAAAAAAAEAAABAAAAAAAAAAAAAAAAAAAACAQAAAAAAAAAAAAAAAIAAAAEAAAABAAAAAQAAAAEAAAAAAAAAAAKABQAHgCQAQIBWgHqAAAAAQAAAAgAbQAFAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABAAcAAAABAAAAAAACAAcAYAABAAAAAAADAAcANgABAAAAAAAEAAcAdQABAAAAAAAFAAsAFQABAAAAAAAGAAcASwABAAAAAAAKABoAigADAAEECQABAA4ABwADAAEECQACAA4AZwADAAEECQADAA4APQADAAEECQAEAA4AfAADAAEECQAFABYAIAADAAEECQAGAA4AUgADAAEECQAKADQApGljb21vb24AaQBjAG8AbQBvAG8AblZlcnNpb24gMS4wAFYAZQByAHMAaQBvAG4AIAAxAC4AMGljb21vb24AaQBjAG8AbQBvAG8Abmljb21vb24AaQBjAG8AbQBvAG8AblJlZ3VsYXIAUgBlAGcAdQBsAGEAcmljb21vb24AaQBjAG8AbQBvAG8AbkZvbnQgZ2VuZXJhdGVkIGJ5IEljb01vb24uAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAGIAeQAgAEkAYwBvAE0AbwBvAG4ALgAAAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=#iefix) format("embedded-opentype"),url(data:application/x-font-ttf;base64,AAEAAAALAIAAAwAwT1MvMg8SBccAAAC8AAAAYGNtYXAXVtKKAAABHAAAAFRnYXNwAAAAEAAAAXAAAAAIZ2x5ZsdxmDoAAAF4AAAD1GhlYWQK1CI1AAAFTAAAADZoaGVhB8IDyQAABYQAAAAkaG10eBYAAAAAAAWoAAAAIGxvY2EDFAH+AAAFyAAAABJtYXhwAA4AbwAABdwAAAAgbmFtZZlKCfsAAAX8AAABhnBvc3QAAwAAAAAHhAAAACAAAwOaAZAABQAAApkCzAAAAI8CmQLMAAAB6wAzAQkAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADpAwPA/8AAQAPAAEAAAAABAAAAAAAAAAAAAAAgAAAAAAADAAAAAwAAABwAAQADAAAAHAADAAEAAAAcAAQAOAAAAAoACAACAAIAAQAg6QP//f//AAAAAAAg6QD//f//AAH/4xcEAAMAAQAAAAAAAAAAAAAAAQAB//8ADwABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAAFAAD/wAQAA8AAEwAnADUAQwBRAAATND4CMzIeAhUUDgIjIi4CJTQuAiMiDgIVFB4CMzI+AiU0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUBIgYVFBYzITI2NTQmIwBQi7tqaruLUFCLu2pqu4tQA7NEdp9aWp92RER2n1pan3ZE/XMeFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBEBwGq7i1BQi7tqaruLUFCLu2pan3ZERHafWlqfdkREdp/nFR4eFTMWHh4WMxUeHhUzFh4eFv8AGRERGRkRERkAAAAEAAD/wAQAA8AAEwAhAC8ATwAAASIOAhUUHgIzMj4CNTQuAgE0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUTJy4BIyIGDwEOASMiJjU0NjcnNz4BMzIWFx4BFRQGJwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR5EBCpaLzBbKgQBBQIQFQYGAQoyazU2aTMJChwTA8BQi7tqaruLUFCLu2pqu4tQ/o0VHh4VMxYeHhYzFR4eFTMWHh4W/psBFRUVFQEBARgRCA8GAwUYGhkaBRMMExoGAAAEAAD/wAQAA8AAEwAhAC8APQAABSIuAjU0PgIzMh4CFRQOAgEVFBYzMjY9ATQmIyIGBRUUFjMyNj0BNCYjIgYBIgYVFBYzITI2NTQmIwIAaruLUFCLu2pqu4tQUIu7/rweFhUeHhUWHgFNHhUWHh4WFR7+9hEYGBEBLhEYGBFAUIu7amq7i1BQi7tqaruLUAKNMxYeHhYzFR4eFTMWHh4WMxUeHv64GRERGRkRERkAAAQAAP/ABAADwAATAFAAXgBsAAABIg4CFRQeAjMyPgI1NC4CExQGFQ4BFQ4DIzgBMTgBMSIuAic0Jic0JjUuATU0Njc+ATMyFhcxHgEzMjY3MT4BMzIWFx4BFRQGBwM0NjMyFh0BFAYjIiY1JTQ2MzIWHQEUBiMiJjUCAGq7i1BQi7tqaruLUFCLu8cBAQEVP01bMjJbTT8VAQEBAQECAgUVDAwVBSB4S0t4IAUVDAwVBQICAQG+HhUWHh4WFR7+sx4WFR4eFRYeA8BQi7tqaruLUFCLu2pqu4tQ/XICAgEBAgEpQjAbGzBCKQECAQECAgIGAwUJBAsMDAs9TEw9CwwMCwQJBQMGAgEbFR4eFTMWHh4WMxUeHhUzFh4eFgAAAAEAAAAAAADYdr5rXw889QALBAAAAAAA09ru3AAAAADT2u7cAAD/wAQAA8AAAAAIAAIAAAAAAAAAAQAAA8D/wAAABAAAAAAABAAAAQAAAAAAAAAAAAAAAAAAAAgEAAAAAAAAAAAAAAACAAAABAAAAAQAAAAEAAAABAAAAAAAAAAACgAUAB4AkAECAVoB6gAAAAEAAAAIAG0ABQAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAHAAAAAQAAAAAAAgAHAGAAAQAAAAAAAwAHADYAAQAAAAAABAAHAHUAAQAAAAAABQALABUAAQAAAAAABgAHAEsAAQAAAAAACgAaAIoAAwABBAkAAQAOAAcAAwABBAkAAgAOAGcAAwABBAkAAwAOAD0AAwABBAkABAAOAHwAAwABBAkABQAWACAAAwABBAkABgAOAFIAAwABBAkACgA0AKRpY29tb29uAGkAYwBvAG0AbwBvAG5WZXJzaW9uIDEuMABWAGUAcgBzAGkAbwBuACAAMQAuADBpY29tb29uAGkAYwBvAG0AbwBvAG5pY29tb29uAGkAYwBvAG0AbwBvAG5SZWd1bGFyAFIAZQBnAHUAbABhAHJpY29tb29uAGkAYwBvAG0AbwBvAG5Gb250IGdlbmVyYXRlZCBieSBJY29Nb29uLgBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAAADAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA) format("truetype"),url(data:application/font-woff;base64,d09GRgABAAAAAAfwAAsAAAAAB6QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgDxIFx2NtYXAAAAFoAAAAVAAAAFQXVtKKZ2FzcAAAAbwAAAAIAAAACAAAABBnbHlmAAABxAAAA9QAAAPUx3GYOmhlYWQAAAWYAAAANgAAADYK1CI1aGhlYQAABdAAAAAkAAAAJAfCA8lobXR4AAAF9AAAACAAAAAgFgAAAGxvY2EAAAYUAAAAEgAAABIDFAH+bWF4cAAABigAAAAgAAAAIAAOAG9uYW1lAAAGSAAAAYYAAAGGmUoJ+3Bvc3QAAAfQAAAAIAAAACAAAwAAAAMDmgGQAAUAAAKZAswAAACPApkCzAAAAesAMwEJAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA6QMDwP/AAEADwABAAAAAAQAAAAAAAAAAAAAAIAAAAAAAAwAAAAMAAAAcAAEAAwAAABwAAwABAAAAHAAEADgAAAAKAAgAAgACAAEAIOkD//3//wAAAAAAIOkA//3//wAB/+MXBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAABQAA/8AEAAPAABMAJwA1AEMAUQAAEzQ+AjMyHgIVFA4CIyIuAiU0LgIjIg4CFRQeAjMyPgIlNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1ASIGFRQWMyEyNjU0JiMAUIu7amq7i1BQi7tqaruLUAOzRHafWlqfdkREdp9aWp92RP1zHhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRAcBqu4tQUIu7amq7i1BQi7tqWp92RER2n1pan3ZERHaf5xUeHhUzFh4eFjMVHh4VMxYeHhb/ABkRERkZEREZAAAABAAA/8AEAAPAABMAIQAvAE8AAAEiDgIVFB4CMzI+AjU0LgIBNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1EycuASMiBg8BDgEjIiY1NDY3Jzc+ATMyFhceARUUBicCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUeRAQqWi8wWyoEAQUCEBUGBgEKMms1NmkzCQocEwPAUIu7amq7i1BQi7tqaruLUP6NFR4eFTMWHh4WMxUeHhUzFh4eFv6bARUVFRUBAQEYEQgPBgMFGBoZGgUTDBMaBgAABAAA/8AEAAPAABMAIQAvAD0AAAUiLgI1ND4CMzIeAhUUDgIBFRQWMzI2PQE0JiMiBgUVFBYzMjY9ATQmIyIGASIGFRQWMyEyNjU0JiMCAGq7i1BQi7tqaruLUFCLu/68HhYVHh4VFh4BTR4VFh4eFhUe/vYRGBgRAS4RGBgRQFCLu2pqu4tQUIu7amq7i1ACjTMWHh4WMxUeHhUzFh4eFjMVHh7+uBkRERkZEREZAAAEAAD/wAQAA8AAEwBQAF4AbAAAASIOAhUUHgIzMj4CNTQuAhMUBhUOARUOAyM4ATE4ATEiLgInNCYnNCY1LgE1NDY3PgEzMhYXMR4BMzI2NzE+ATMyFhceARUUBgcDNDYzMhYdARQGIyImNSU0NjMyFh0BFAYjIiY1AgBqu4tQUIu7amq7i1BQi7vHAQEBFT9NWzIyW00/FQEBAQEBAgIFFQwMFQUgeEtLeCAFFQwMFQUCAgEBvh4VFh4eFhUe/rMeFhUeHhUWHgPAUIu7amq7i1BQi7tqaruLUP1yAgIBAQIBKUIwGxswQikBAgEBAgICBgMFCQQLDAwLPUxMPQsMDAsECQUDBgIBGxUeHhUzFh4eFjMVHh4VMxYeHhYAAAABAAAAAAAA2Ha+a18PPPUACwQAAAAAANPa7twAAAAA09ru3AAA/8AEAAPAAAAACAACAAAAAAAAAAEAAAPA/8AAAAQAAAAAAAQAAAEAAAAAAAAAAAAAAAAAAAAIBAAAAAAAAAAAAAAAAgAAAAQAAAAEAAAABAAAAAQAAAAAAAAAAAoAFAAeAJABAgFaAeoAAAABAAAACABtAAUAAAAAAAIAAAAAAAAAAAAAAAAAAAAAAAAADgCuAAEAAAAAAAEABwAAAAEAAAAAAAIABwBgAAEAAAAAAAMABwA2AAEAAAAAAAQABwB1AAEAAAAAAAUACwAVAAEAAAAAAAYABwBLAAEAAAAAAAoAGgCKAAMAAQQJAAEADgAHAAMAAQQJAAIADgBnAAMAAQQJAAMADgA9AAMAAQQJAAQADgB8AAMAAQQJAAUAFgAgAAMAAQQJAAYADgBSAAMAAQQJAAoANACkaWNvbW9vbgBpAGMAbwBtAG8AbwBuVmVyc2lvbiAxLjAAVgBlAHIAcwBpAG8AbgAgADEALgAwaWNvbW9vbgBpAGMAbwBtAG8AbwBuaWNvbW9vbgBpAGMAbwBtAG8AbwBuUmVndWxhcgBSAGUAZwB1AGwAYQByaWNvbW9vbgBpAGMAbwBtAG8AbwBuRm9udCBnZW5lcmF0ZWQgYnkgSWNvTW9vbi4ARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format("woff"),url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pgo8IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiID4KPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8bWV0YWRhdGE+R2VuZXJhdGVkIGJ5IEljb01vb248L21ldGFkYXRhPgo8ZGVmcz4KPGZvbnQgaWQ9Imljb21vb24iIGhvcml6LWFkdi14PSIxMDI0Ij4KPGZvbnQtZmFjZSB1bml0cy1wZXItZW09IjEwMjQiIGFzY2VudD0iOTYwIiBkZXNjZW50PSItNjQiIC8+CjxtaXNzaW5nLWdseXBoIGhvcml6LWFkdi14PSIxMDI0IiAvPgo8Z2x5cGggdW5pY29kZT0iJiN4MjA7IiBob3Jpei1hZHYteD0iNTEyIiBkPSIiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAwOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLW9mZiIgZD0iTTAgNDQ4YzAgMjgyLjc2NiAyMjkuMjM0IDUxMiA1MTIgNTEyczUxMi0yMjkuMjM0IDUxMi01MTJjMC0yODIuNzY2LTIyOS4yMzQtNTEyLTUxMi01MTJzLTUxMiAyMjkuMjM0LTUxMiA1MTJ6TTk0Ny4yIDQ0OGMwIDI0MC4zNTEtMTk0Ljg0OSA0MzUuMi00MzUuMiA0MzUuMnMtNDM1LjItMTk0Ljg0OS00MzUuMi00MzUuMmMwLTI0MC4zNTEgMTk0Ljg0OS00MzUuMiA0MzUuMi00MzUuMnM0MzUuMiAxOTQuODQ5IDQzNS4yIDQzNS4yek0yOTQuNCA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNNjI3LjIgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTM2MS4xNDMgMjgxLjZjLTIyLjcxMSAwLTQxLjE0My0xOC42MzctNDEuMTQzLTQxLjZzMTguNDMyLTQxLjYgNDEuMTQzLTQxLjZoMzAxLjcxNGMyMi43MTEgMCA0MS4xNDMgMTguNjM3IDQxLjE0MyA0MS42cy0xOC40MzIgNDEuNi00MS4xNDMgNDEuNmgtMzAxLjcxNHoiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAxOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTEiIGQ9Ik01MTIuMDAxIDk2MGMtMjgyLjc3MSAwLTUxMi4wMDEtMjI5LjIzLTUxMi4wMDEtNTEyLjAwMiAwLTI4Mi43NyAyMjkuMjMtNTExLjk5OCA1MTIuMDAxLTUxMS45OTggMjgyLjc2OSAwIDUxMS45OTkgMjI5LjIyNyA1MTEuOTk5IDUxMS45OThzLTIyOS4yMyA1MTIuMDAyLTUxMS45OTkgNTEyLjAwMnpNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6TTYyNy4yIDU4OC44NTNjMCAyOC4yNDcgMjIuNzI2IDUxLjE0NyA1MS4yIDUxLjE0NyAyOC4yNzcgMCA1MS4yLTIyLjY2NCA1MS4yLTUxLjE0N3YtNTEuMzA3YzAtMjguMjQ3LTIyLjcyNi01MS4xNDctNTEuMi01MS4xNDctMjguMjc3IDAtNTEuMiAyMi42NjQtNTEuMiA1MS4xNDd2NTEuMzA3ek02OTQuNTI5IDE4MS4xOTdsLTMuNDIyIDEuMjE2Yy01Ni4xNSAyNy44NzItMTE2LjM4OCA0Mi4wNDctMTc4Ljg4MiA0Mi4wNDctNjQuNTU2IDAtMTI1LjYxMS0xNC4zMTYtMTgxLjUxNS00Mi40NWwtMy4zODItMS4xMzJjLTIuMTAyLTAuNjI4LTQuOTQ1LTEuNTI5LTguNDg5LTEuNTI5LTIwLjU1NCAwLTM3LjIzOSAxOC4yOS0zNy4yMzkgNDAuNzM0IDAgMTAuNjU1IDQuNTcxIDIxLjM2MSAxMi4xMTQgMjkuMzk5bC0wLjQ1NiAyLjQ4MyA5LjUxNiA0LjY5OGM2Ni43NCAzMy4xMDQgMTM5LjMzNiA1MC41MzcgMjA5LjkwNyA1MC41MzcgNzEuODg5IDAgMTQyLjMzNi0xNi45ODQgMjEwLjMxNC01MC45NDggMTEuOTQzLTcuMTgxIDE5LjQwNS0yMC45NTMgMTkuNDA1LTM1LjkwMyAwLTI2LjMyOC0yMS43MS00Ny45NTgtNDcuODcxLTM5LjE1M3oiIC8+CjxnbHlwaCB1bmljb2RlPSImI3hlOTAyOyIgZ2x5cGgtbmFtZT0icmF0ZS1mYWNlLTIiIGQ9Ik01MTItNjRjLTI4Mi43NjYgMC01MTIgMjI5LjIzNC01MTIgNTEyczIyOS4yMzQgNTEyIDUxMiA1MTJjMjgyLjc2NiAwIDUxMi0yMjkuMjM0IDUxMi01MTJzLTIyOS4yMzQtNTEyLTUxMi01MTJ6TTI5NC40IDU4OC44NTN2LTUxLjMwN2MwLTI4LjQ4MiAyMi45MjMtNTEuMTQ3IDUxLjItNTEuMTQ3IDI4LjQ3NCAwIDUxLjIgMjIuODk5IDUxLjIgNTEuMTQ3djUxLjMwN2MwIDI4LjQ4Mi0yMi45MjMgNTEuMTQ3LTUxLjIgNTEuMTQ3LTI4LjQ3NCAwLTUxLjItMjIuODk5LTUxLjItNTEuMTQ3ek02MjcuMiA1ODguODUzdi01MS4zMDdjMC0yOC40ODIgMjIuOTIzLTUxLjE0NyA1MS4yLTUxLjE0NyAyOC40NzQgMCA1MS4yIDIyLjg5OSA1MS4yIDUxLjE0N3Y1MS4zMDdjMCAyOC40ODItMjIuOTIzIDUxLjE0Ny01MS4yIDUxLjE0Ny0yOC40NzQgMC01MS4yLTIyLjg5OS01MS4yLTUxLjE0N3pNMzYxLjE0MyAyODEuNmMtMjIuNzExIDAtNDEuMTQzLTE4LjYzNy00MS4xNDMtNDEuNnMxOC40MzItNDEuNiA0MS4xNDMtNDEuNmgzMDEuNzE0YzIyLjcxMSAwIDQxLjE0MyAxOC42MzcgNDEuMTQzIDQxLjZzLTE4LjQzMiA0MS42LTQxLjE0MyA0MS42aC0zMDEuNzE0eiIgLz4KPGdseXBoIHVuaWNvZGU9IiYjeGU5MDM7IiBnbHlwaC1uYW1lPSJyYXRlLWZhY2UtMyIgZD0iTTUxMi4wMDEgOTYwYy0yODIuNzcgMC01MTIuMDAxLTIyOS4yMy01MTIuMDAxLTUxMS45OTlzMjI5LjIzLTUxMi4wMDEgNTEyLjAwMS01MTIuMDAxYzI4Mi43NyAwIDUxMS45OTkgMjI5LjIzIDUxMS45OTkgNTExLjk5OXMtMjI5LjIyOSA1MTIuMDAxLTUxMS45OTkgNTEyLjAwMXpNODE3LjQ5NSAzMDUuNTY1Yy0wLjQ0NS0xLjQ4NS0wLjk2My0yLjkzOS0xLjU2OS00LjM1LTAuNjc2LTEuNTcyLTEuNDU1LTMuMDg5LTIuMzE3LTQuNTU2LTU1LjYzMS0xMDcuNjEzLTE2OS41MTgtMTgxLjQ1OS0zMDEuMzIzLTE4MS40NTktMC4wOTYgMC0wLjE5IDAuMDAyLTAuMjg2IDAuMDAycy0wLjE5LTAuMDAyLTAuMjg2LTAuMDAyYy0xMzEuODA0IDAtMjQ1LjY5MyA3My44NDUtMzAxLjMyMyAxODEuNDU5LTAuODYyIDEuNDY3LTEuNjQxIDIuOTg0LTIuMzE3IDQuNTU2LTAuNjA2IDEuNDEtMS4xMjQgMi44NjUtMS41NjkgNC4zNS0xLjEwMyAzLjY4LTEuNzA1IDcuNTY5LTEuNzA1IDExLjU5NyAwIDYuNTY2IDEuNTc5IDEyLjc3MSA0LjM3MiAxOC4yODIgNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIyIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIzLTIyLjk1NWgwLjY3NmM0MS40MTEtODEuNDUzIDEyNy4xMzEtMTM3LjU0NCAyMjYuNTA3LTEzNy42NTIgOTkuMzc1IDAuMTA4IDE4NS4wOTUgNTYuMiAyMjYuNTA3IDEzNy42NTJoMC42NzZjNi44OTcgMTMuNjAxIDIxLjIzOSAyMi45NTUgMzcuODIzIDIyLjk1NXMzMC45MjctOS4zNTUgMzcuODIyLTIyLjk1NWMyLjc5NC01LjUxMSA0LjM3Mi0xMS43MTUgNC4zNzItMTguMjgyIDAtNC4wMjktMC42MDItNy45MTgtMS43MDUtMTEuNTk3ek02MjcuMiA1ODguODUzYzAgMjguMjQ3IDIyLjcyNiA1MS4xNDcgNTEuMiA1MS4xNDcgMjguMjc3IDAgNTEuMi0yMi42NjQgNTEuMi01MS4xNDd2LTUxLjMwN2MwLTI4LjI0Ny0yMi43MjYtNTEuMTQ3LTUxLjItNTEuMTQ3LTI4LjI3NyAwLTUxLjIgMjIuNjY0LTUxLjIgNTEuMTQ3djUxLjMwN3pNMjk0LjQgNTg4Ljg1M2MwIDI4LjI0NyAyMi43MjYgNTEuMTQ3IDUxLjIgNTEuMTQ3IDI4LjI3NyAwIDUxLjItMjIuNjY0IDUxLjItNTEuMTQ3di01MS4zMDdjMC0yOC4yNDctMjIuNzI2LTUxLjE0Ny01MS4yLTUxLjE0Ny0yOC4yNzcgMC01MS4yIDIyLjY2NC01MS4yIDUxLjE0N3Y1MS4zMDd6IiAvPgo8L2ZvbnQ+PC9kZWZzPjwvc3ZnPg==#icomoon) format("svg");font-weight:400;font-style:normal}[class*=" icon-"],[class^=icon-]{font-family:icomoon!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-rate-face-off:before{content:"\E900"}.icon-rate-face-1:before{content:"\E901"}.icon-rate-face-2:before{content:"\E902"}.icon-rate-face-3:before{content:"\E903"}body,html{margin:0;padding:0}#app,body,html{height:100%}body{font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;overflow:auto;font-weight:400;-webkit-font-smoothing:antialiased}a{color:#4078c0;text-decoration:none}code{background-color:#f9fafc;padding:0 4px;border:1px solid #eaeefb;border-radius:4px}button,input,select,textarea{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit}.hljs{line-height:1.8;font-family:Menlo,Monaco,Consolas,Courier,monospace;font-size:12px;padding:18px 24px;background-color:#f9fafc;border:1px solid #eaeefb;margin-bottom:25px;border-radius:4px;-webkit-font-smoothing:auto}.main-cnt{margin-top:-80px;padding:80px 0 120px;box-sizing:border-box;min-height:100%}.container,.page-container{width:1140px;padding:0 30px;margin:0 auto}.page-container{padding-top:55px}.page-container h2{font-size:28px;color:#1f2d3d;margin:0}.page-container h3{font-size:22px}.page-container h2,.page-container h3,.page-container h4,.page-container h5{font-weight:400;color:#1f2f3d}.page-container h2 a,.page-container h3 a,.page-container h4 a,.page-container h5 a{float:left;margin-left:-20px;opacity:0;cursor:pointer}.page-container h2 a:hover,.page-container h2:hover a,.page-container h3 a:hover,.page-container h3:hover a,.page-container h4 a:hover,.page-container h4:hover a,.page-container h5 a:hover,.page-container h5:hover a{opacity:.4}.page-container p{font-size:14px;color:#5e6d82;line-height:1.5em}.page-container .tip{padding:8px 16px;background-color:#ecf8ff;border-radius:4px;border-left:5px solid #50bfff}.page-container .tip code{background-color:hsla(0,0%,100%,.7);color:#445368}.demo{margin:20px 0}@media (max-width:1140px){.container,.page-container{width:100%}}@media (max-width:768px){.container,.page-container{padding:0 20px}}.page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}.page-component{padding-bottom:95px;box-sizing:border-box}.page-component .content{margin-left:-1px}.page-component .content>h3{margin:45px 0 15px}.page-component .content>table{border-collapse:collapse;width:100%;background-color:#fff;color:#5e6d82;font-size:14px;margin-bottom:45px;line-height:1.5em}.page-component .content>table strong{font-weight:400}.page-component .content>table th{text-align:left;border-top:1px solid #eaeefb;background-color:#eff2f7;white-space:nowrap}.page-component .content>table td,.page-component .content>table th{border-bottom:1px solid #eaeefb;padding:10px;max-width:250px}.page-component .content>table td:first-child,.page-component .content>table th:first-child{padding-left:10px}.page-component .page-component-up{background-color:#58b7ff;position:fixed;right:100px;bottom:150px;width:50px;height:50px;border-radius:25px;cursor:pointer;opacity:.4;transition:.3s}.page-component .page-component-up i{color:#fff;display:block;line-height:50px;text-align:center;font-size:22px}.page-component .page-component-up.hover{opacity:1}.page-component .back-top-fade-enter,.page-component .back-top-fade-leave-active{transform:translateY(-30px);opacity:0}.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}.page-changelog{padding-bottom:100px}.page-changelog .fr{float:right;padding:0}.page-changelog .fr a{display:block;padding:10px 15px;color:#475669}.page-changelog .fr:hover a{color:#20a0ff}.page-changelog .heading{margin-bottom:40px}.page-changelog .timeline{margin:0 0 0 105px;padding-left:25px;position:relative;color:#5e6d82}.page-changelog .timeline>li{list-style:none;position:relative;line-height:1.8}.page-changelog .timeline>li:not(:last-child){margin-bottom:50px}.page-changelog .timeline>li:first-child{margin-top:-10px}.page-changelog .timeline>li:first-child h3:before{left:-33px;top:10px;width:17px;height:17px;background-color:#20a0ff;border:0}.page-changelog .timeline ul{padding-left:0}.page-changelog .timeline ul ul{padding-left:20px}.page-changelog .timeline ul ul li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#fff;border:1px solid #5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline li li{font-size:14px;list-style:none;padding-left:0;word-break:break-all}.page-changelog .timeline li li:before{content:"";width:4px;height:4px;border-radius:50%;background-color:#5e6d82;margin-right:5px;display:inline-block;vertical-align:middle}.page-changelog .timeline h3{margin:0 0 10px}.page-changelog .timeline h3 a{opacity:1;float:none;margin-left:0;color:inherit}.page-changelog .timeline h3:before{content:"";display:block;position:absolute;left:-31px;top:13px;width:13px;height:13px;border-radius:50%;background-color:transparent;border:2px solid #20a0ff;box-sizing:border-box;background-color:#fff}.page-changelog .timeline h4{margin:50px 0 10px}.page-changelog .timeline p{margin:0}.page-changelog .timeline em{position:absolute;left:-127px;font-style:normal;top:6px;font-size:14px;color:#99a9bf}.page-changelog .timeline:before{content:"";width:1px;height:100%;position:absolute;left:0;top:10px;background-color:#eaeefa}.clearfix[data-v-01da8809]:after,.clearfix[data-v-01da8809]:before{display:table;content:""}.clearfix[data-v-01da8809]:after{clear:both}.share-button[data-v-01da8809]{width:36px;padding:10px}.mark[data-v-01da8809]{margin-top:8px;line-height:1;float:right}.item[data-v-01da8809]{margin-right:40px}.clearfix[data-v-11476eae]:after,.clearfix[data-v-11476eae]:before{display:table;content:""}.clearfix[data-v-11476eae]:after{clear:both}.text[data-v-11476eae]{font-size:14px}.time[data-v-11476eae]{font-size:13px;color:#999}.bottom[data-v-11476eae]{margin-top:13px;line-height:12px}.item[data-v-11476eae]{padding:18px 0}.button[data-v-11476eae]{padding:0;float:right}.image[data-v-11476eae]{width:100%;display:block}.box-card[data-v-11476eae]{width:480px}.demo-form.demo-en-US .el-select .el-input{width:360px}.demo-form.demo-en-US .el-form{width:480px}.demo-form.demo-en-US .line{text-align:center}.demo-form.demo-en-US .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-en-US .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-en-US .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-en-US .el-checkbox-group:after,.demo-form.demo-en-US .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-en-US .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-en-US .demo-form-normal{width:480px}.demo-form.demo-en-US .demo-form-inline{width:auto}.demo-form.demo-en-US .demo-form-inline .el-input{width:150px}.demo-form.demo-en-US .demo-form-inline>*{margin-right:10px}.demo-form.demo-en-US .demo-ruleForm{width:480px}.demo-form.demo-en-US .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-en-US .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-en-US .fr{float:right}.demo-input.demo-en-US .el-select .el-input{width:110px}.demo-input.demo-en-US .el-input{width:180px}.demo-input.demo-en-US .el-textarea{width:414px}.demo-input.demo-en-US .el-input-group{width:100%}.demo-input.demo-en-US .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-en-US .demo-autocomplete{text-align:center}.demo-input.demo-en-US .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-en-US .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-en-US .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-tooltip.demo-en-US .box .left{float:left;width:110px}.demo-tooltip.demo-en-US .box .right{float:right;width:110px}.demo-tooltip.demo-en-US:first-of-type .source .el-button{width:110px}.demo-box.demo-alert .el-alert{margin:20px 0 0}.demo-box.demo-alert .el-alert:first-child{margin:0}.demo-badge.demo-box .el-dropdown{vertical-align:middle}.clearfix[data-v-3971f377]:after,.clearfix[data-v-3971f377]:before{display:table;content:""}.clearfix[data-v-3971f377]:after{clear:both}.share-button[data-v-3971f377]{width:36px;padding:10px}.mark[data-v-3971f377]{margin-top:8px;line-height:1;float:right}.item[data-v-3971f377]{margin-right:40px}.demo-box.demo-button .el-row{margin-bottom:10px}.demo-box.demo-button .el-button+.el-button{margin-left:10px}.demo-box.demo-button .el-button-group{margin-bottom:20px}.demo-box.demo-button .el-button-group .el-button+.el-button{margin-left:0}.demo-box.demo-button .el-button-group+.el-button-group{margin-left:10px}.demo-box.demo-button .intro-block{padding:0}.demo-button .intro-block .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-button .intro-block .block:last-child{border-bottom:none}.demo-button .intro-block .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-button .intro-block .wrapper{float:right;margin-right:20px}.clearfix[data-v-140d6310]:after,.clearfix[data-v-140d6310]:before{display:table;content:""}.clearfix[data-v-140d6310]:after{clear:both}.text[data-v-140d6310]{font-size:14px}.time[data-v-140d6310]{font-size:13px;color:#999}.bottom[data-v-140d6310]{margin-top:13px;line-height:12px}.item[data-v-140d6310]{padding:18px 0}.button[data-v-140d6310]{padding:0;float:right}.image[data-v-140d6310]{width:100%;display:block}.box-card[data-v-140d6310]{width:480px}.demo-carousel .block{padding:30px;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-carousel .block:last-child{border-right:none}.demo-carousel .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-carousel .el-carousel__container{text-align:center}.demo-carousel .el-carousel__item h3{color:#fff;font-size:18px;line-height:300px;margin:0}.demo-carousel .el-carousel__item:nth-child(2n){background-color:#99a9bf}.demo-carousel .el-carousel__item:nth-child(2n+1){background-color:#d3dce6}.demo-carousel .small h3{font-size:14px;line-height:150px}.demo-carousel .medium h3{font-size:14px;line-height:200px}.demo-cascader .el-cascader{width:222px}.demo-cascader-size .el-cascader{vertical-align:top;margin-right:15px}.demo-cascader .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-cascader .block:last-child{border-right:none}.demo-cascader .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-box.demo-checkbox .checkbox{margin-right:5px}.demo-box.demo-checkbox .checkbox+.checkbox{margin-left:10px}.demo-collapse .el-collapse-item__header .header-icon{margin-left:5px}.demo-color-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-color-picker .block:last-child{border-right:none}.demo-color-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-color-box{border-radius:4px;padding:20px;height:74px;box-sizing:border-box;color:#fff;font-size:14px}.demo-color-box .value{font-size:12px;opacity:.69;line-height:24px}.demo-color-box-group .demo-color-box{border-radius:0}.demo-color-box-group .demo-color-box:first-child{border-radius:4px 4px 0 0}.demo-color-box-group .demo-color-box:last-child{border-radius:0 0 4px 4px}.bg-blue-light{background-color:#58b7ff}.bg-blue,.bg-info{background-color:#20a0ff}.bg-blue-dark{background-color:#1d8ce0}.bg-success{background-color:#13ce66}.bg-warning{background-color:#f7ba2a}.bg-danger{background-color:#ff4949}.bg-black{background-color:#1f2d3d}.bg-black-light{background-color:#324057}.bg-black-lighter{background-color:#475669}.bg-silver{background-color:#8492a6}.bg-silver-light{background-color:#99a9bf}.bg-silver-lighter{background-color:#c0ccda}.bg-gray{background-color:#d3dce6}.bg-gray-light{background-color:#e5e9f2}.bg-gray-lighter{background-color:#eff2f7}.bg-white-dark{background-color:#f9fafc}.color-gray{color:#5e6d82}.demo-block.demo-date-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-date-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-date-picker .block:last-child{border-right:none}.demo-date-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-block.demo-datetime-picker .source{padding:0;display:-ms-flexbox;display:flex}.demo-datetime-picker .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;-ms-flex:1;flex:1}.demo-datetime-picker .block:last-child{border-right:none}.demo-datetime-picker .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-box.demo-dialog .dialog-footer button:first-child{margin-right:10px}.demo-box.demo-dialog .full-image{width:100%}.demo-box.demo-dialog .el-dialog__wrapper{margin:0}.demo-box.demo-dialog .el-input,.demo-box.demo-dialog .el-select{width:300px}.demo-box.demo-dialog .el-button--text{margin-right:15px}.demo-box .el-dropdown{vertical-align:top}.demo-box .el-dropdown+.el-dropdown{margin-left:15px}.demo-box .el-dropdown-link{cursor:pointer;color:#20a0ff}.demo-box .el-icon-caret-bottom{font-size:12px}.block-col-2{margin:-24px}.block-col-2 .el-col{padding:30px 0;text-align:center;border-right:1px solid #eff2f6}.block-col-2 .el-col:last-child{border-right:0}.demo-dropdown .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-form.demo-zh-CN .el-select .el-input{width:360px}.demo-form.demo-zh-CN .el-form{width:440px}.demo-form.demo-zh-CN .line{text-align:center}.demo-form.demo-zh-CN .el-checkbox-group{width:320px;margin:0;padding:0;list-style:none}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox{float:left;width:160px;padding-right:20px;margin:0;padding:0}.demo-form.demo-zh-CN .el-checkbox-group .el-checkbox+.el-checkbox{margin-left:0}.demo-form.demo-zh-CN .el-checkbox-group:after,.demo-form.demo-zh-CN .el-checkbox-group:before{content:" ";display:table}.demo-form.demo-zh-CN .el-checkbox-group:after{clear:both;visibility:hidden;font-size:0;height:0}.demo-form.demo-zh-CN .demo-form-normal{width:440px}.demo-form.demo-zh-CN .demo-form-inline{width:auto}.demo-form.demo-zh-CN .demo-form-inline .el-input{width:150px}.demo-form.demo-zh-CN .demo-form-inline>*{margin-right:10px}.demo-form.demo-zh-CN .demo-ruleForm{width:460px}.demo-form.demo-zh-CN .demo-ruleForm .el-select .el-input{width:360px}.demo-form.demo-zh-CN .demo-dynamic .el-input{margin-right:10px;width:270px;vertical-align:top}.demo-form.demo-zh-CN .fr{float:right}ul.language-list{color:#5e6d82;font-size:14px;padding-left:20px}ul.language-list li{line-height:1.8}.icon-list li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.demo-icon .source>i{font-size:24px;color:#8492a6;margin:0 20px;font-size:1.5em;vertical-align:middle}.demo-icon .source>button{margin:0 20px}.icon-list{overflow:hidden;list-style:none;padding:0;border:1px solid #eaeefb;border-radius:4px}.icon-list li{float:left;width:16.66%;text-align:center;height:120px;line-height:120px;color:#666;font-size:13px;transition:color .15s linear;border-right:1px solid #eee;border-bottom:1px solid #eee;margin-right:-1px;margin-bottom:-1px}.icon-list li span{display:inline-block;line-height:normal;vertical-align:middle;font-family:Helvetica Neue,Helvetica,PingFang SC,Hiragino Sans GB,Microsoft YaHei,SimSun,sans-serif;color:#99a9bf}.icon-list li i{display:block;font-size:24px;margin-bottom:15px;color:#8492a6}.icon-list li:hover{color:#5cb6ff}.demo-box.demo-input-number .el-input-number+.el-input-number{margin-left:10px}.demo-input.demo-zh-CN .el-select .el-input{width:110px}.demo-input.demo-zh-CN .el-input{width:180px}.demo-input.demo-zh-CN .el-textarea{width:414px}.demo-input.demo-zh-CN .el-input-group{width:100%}.demo-input.demo-zh-CN .demo-input-size .el-input{vertical-align:top;margin:0 10px 10px 0}.demo-input.demo-zh-CN .demo-autocomplete{text-align:center}.demo-input.demo-zh-CN .demo-autocomplete .sub-title{margin-bottom:10px;font-size:14px;color:#8492a6}.demo-input.demo-zh-CN .demo-autocomplete .el-col:not(:last-child){border-right:1px solid rgba(224,230,237,.5)}.demo-input.demo-zh-CN .demo-autocomplete .el-autocomplete{text-align:left}.el-autocomplete-suggestion.my-autocomplete li{line-height:normal;padding-top:7px;padding-bottom:7px}.el-autocomplete-suggestion.my-autocomplete li .name{text-overflow:ellipsis;overflow:hidden}.el-autocomplete-suggestion.my-autocomplete li .addr{font-size:12px;color:#b4b4b4}.el-autocomplete-suggestion.my-autocomplete li .highlighted .addr{color:#ddd}.demo-layout .el-row{margin-bottom:20px}.demo-layout .el-row:last-child{margin-bottom:0}.demo-layout .el-col{border-radius:4px}.demo-layout .bg-purple-dark{background:#99a9bf}.demo-layout .bg-purple{background:#d3dce6}.demo-layout .bg-purple-light{background:#e5e9f2}.demo-layout .grid-content{border-radius:4px;min-height:36px}.demo-layout .row-bg{padding:10px 0;background-color:#f9fafc}.demo-loading .el-table{border:none}.demo-box.demo-menu .el-menu-demo{padding-left:55px}.demo-box.demo-menu .el-menu-vertical-demo{width:200px;min-height:400px}.demo-box.demo-menu .line{height:1px;background-color:#e0e6ed;margin:35px -24px}.demo-box.demo-menu h5{font-size:14px;color:#8492a6;margin-top:10px}.demo-box.demo-menu .tac{text-align:center}.demo-box.demo-menu .tac .el-menu-vertical-demo{display:inline-block;text-align:left}.demo-pagination .source.first{padding:0}.demo-pagination .first .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-pagination .first .block:last-child{border-right:none}.demo-pagination .first .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-pagination .source.last{padding:0}.demo-pagination .last .block{padding:30px 24px;border-bottom:1px solid #eff2f6}.demo-pagination .last .block:last-child{border-bottom:none}.demo-pagination .last .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-pagination .last .demonstration+.el-pagination{float:right;width:70%;margin:5px 20px 0 0}.demo-box.demo-popover .el-popover+.el-popover{margin-left:10px}.demo-box.demo-popover .el-input{width:360px}.demo-box.demo-popover .el-button{margin-left:10px}.demo-box.demo-progress .el-progress--line{margin-bottom:15px;width:350px}.demo-box.demo-progress .el-progress--circle{margin-right:15px}.demo-rate .block{padding:30px 0;text-align:center;border-right:1px solid #eff2f6;float:left;width:50%;box-sizing:border-box}.demo-rate .block:last-child{border-right:none}.demo-rate .demonstration{display:block;color:#8492a6;font-size:14px;margin-bottom:20px}.demo-select .el-select{width:240px}.demo-box.demo-slider .source{padding:0}.demo-box.demo-slider .block{padding:30px 24px;overflow:hidden;border-bottom:1px solid #eff2f6}.demo-box.demo-slider .block:last-child{border-bottom:none}.demo-box.demo-slider .demonstration{font-size:14px;color:#8492a6;line-height:44px}.demo-box.demo-slider .demonstration+.el-slider{float:right;width:70%;margin-right:20px}.demo-box.demo-switch .el-switch{margin:20px 20px 20px 0}.el-table .info-row{background:#c9e5f5}.el-table .positive-row{background:#e2f0e4}.demo-table .name-wrapper{display:inline-block}.demo-table .demo-table-expand label{width:90px;color:#99a9bf}.demo-table .demo-table-expand .el-form-item{margin-right:0;margin-bottom:0;width:50%}.demo-box.demo-tag .el-tag+.el-tag{margin-left:10px}.demo-box.demo-tag .button-new-tag{margin-left:10px;height:24px;line-height:22px;padding-top:0;padding-bottom:0}.demo-box.demo-tag .input-new-tag{width:78px;margin-left:10px;vertical-align:bottom}.demo-box.demo-tag .input-new-tag .el-input__inner{height:24px}.demo-box .el-date-editor+.el-date-editor{margin-left:10px}.demo-tooltip .el-tooltip+.el-tooltip{margin-left:15px}.demo-tooltip .box{width:400px}.demo-tooltip .box .top{text-align:center}.demo-tooltip .box .left{float:left;width:60px}.demo-tooltip .box .right{float:right;width:60px}.demo-tooltip .box .bottom{clear:both;text-align:center}.demo-tooltip .box .item{margin:4px}.demo-tooltip .box .left .el-tooltip__popper,.demo-tooltip .box .right .el-tooltip__popper{padding:8px 10px}.demo-tooltip .box .el-tooltip{margin-left:0}.demo-tree .leaf{width:20px;background:#ddd}.demo-tree .folder{width:20px;background:#888}.demo-tree .buttons,.demo-tree .filter-tree{margin-top:20px}.demo-typo-box{height:200px;width:200px;position:relative;border:1px solid #eaeefb;font-size:40px;color:#1f2d3d;text-align:center;line-height:162px;padding-bottom:36px;box-sizing:border-box;display:inline-block;margin-right:17px;border-radius:4px}.demo-typo-box .name{position:absolute;bottom:0;width:100%;height:35px;border-top:1px solid #eaeefb;font-size:14px;color:#8492a6;line-height:35px;text-align:left;text-indent:10px;font-family:Helvetica Neue}.demo-typo-size .h1{font-size:20px}.demo-typo-size .h2{font-size:18px}.demo-typo-size .h3{font-size:16px}.demo-typo-size .text-regular{font-size:14px}.demo-typo-size .text-small{font-size:13px}.demo-typo-size .text-smaller{font-size:12px}.demo-typo-size .color-dark-light{color:#99a9bf}.typo-PingFang{font-family:PingFang SC}.typo-Hiragino{font-family:Hiragino Sans GB}.typo-Microsoft{font-family:Microsoft YaHei}.typo-Helvetica-Neue{font-family:Helvetica Neue}.typo-Helvetica{font-family:Helvetica}.typo-Arial{font-family:Arial}.upload-tip{color:#8492a6;font-size:12px;margin-top:7px}.demo-box{margin-bottom:24px}.demo-box .upload-demo{width:360px}.demo-box .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}.demo-box .avatar-uploader .el-upload:hover{border-color:#20a0ff}.demo-box .avatar-uploader .avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.demo-box .avatar-uploader .avatar{width:178px;height:178px;display:block}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}.page-guide{padding:55px 30px 95px;box-sizing:border-box}.page-guide .content{padding-left:25px;margin-left:-1px}.page-guide .content h2{margin-bottom:10px}.page-guide .content h3{font-size:22px;font-weight:400;margin:0 0 30px;color:#1f2d3d}.page-guide .content p{line-height:1.6;font-size:14px;color:#5e6d82}.page-guide .content ul{margin-bottom:50px;padding-left:0}.page-guide .content li{font-size:14px;margin-bottom:10px;color:#99a9bf;list-style:none}.page-guide .content li strong{color:#5e6d82;font-weight:400}.page-guide .content li:before{content:"";display:inline-block;width:4px;height:4px;border-radius:50%;vertical-align:middle;background-color:#5e6d82;margin-right:5px}@media (max-width:768px){.page-guide .content{padding-left:0}}.cards[data-v-f413aa2a]{margin:30px 0 70px}.card[data-v-f413aa2a]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-f413aa2a]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-f413aa2a]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-f413aa2a]{font-size:14px;color:#99a9bf}.cards[data-v-001a30c3]{margin:30px 0 70px}.card[data-v-001a30c3]{background:#fbfcfd;height:204px;text-align:center}.card img[data-v-001a30c3]{margin:40px auto 25px;width:80px;height:80px}.card h4[data-v-001a30c3]{font-size:18px;color:#1f2d3d;font-weight:400;margin:0}.card span[data-v-001a30c3]{font-size:14px;color:#99a9bf}h3[data-v-d0518674]{margin-bottom:15px}.block[data-v-d0518674]{margin-bottom:55px}p[data-v-d0518674]{margin:0 0 15px}.nav-demos p[data-v-d0518674]{margin-bottom:50px}.nav-demos h5[data-v-d0518674]{margin:0}.nav-demos img[data-v-d0518674]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-d0518674]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-d0518674]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-d0518674]{display:block;width:100%}.mask[data-v-d0518674]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-d0518674],.zoom-leave-active[data-v-d0518674]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-d0518674],.fade-leave-active[data-v-d0518674]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-d0518674],.fade-leave-active[data-v-d0518674]{opacity:0}h3[data-v-30267424]{margin-bottom:15px}.block[data-v-30267424]{margin-bottom:55px}p[data-v-30267424]{margin:0 0 15px}.nav-demos p[data-v-30267424]{margin-bottom:50px}.nav-demos h5[data-v-30267424]{margin:0}.nav-demos img[data-v-30267424]{padding:15px;background-color:#f9fafc;width:100%;margin-bottom:15px;cursor:pointer}.dialog-img[data-v-30267424]{position:fixed;overflow:auto;top:0;right:0;bottom:0;left:0;z-index:1000;-webkit-overflow-scrolling:touch;outline:0}.dialog-img .imgWrap[data-v-30267424]{margin:0 auto;position:relative;top:100px;padding-bottom:50px}.dialog-img img[data-v-30267424]{display:block;width:100%}.mask[data-v-30267424]{position:fixed;top:0;right:0;left:0;bottom:0;background-color:#373737;background-color:rgba(55,55,55,.6);height:100%;z-index:1000}.zoom-enter-active[data-v-30267424],.zoom-leave-active[data-v-30267424]{transition:transform .3s cubic-bezier(.78,.14,.15,.86),opacity .3s cubic-bezier(.78,.14,.15,.86)}.zoom-enter[data-v-30267424],.zoom-leave-active[data-v-30267424]{transform:scale(.3);opacity:0}.fade-enter-active[data-v-30267424],.fade-leave-active[data-v-30267424]{transition:opacity .3s cubic-bezier(.78,.14,.15,.86)}.fade-enter[data-v-30267424],.fade-leave-active[data-v-30267424]{opacity:0}.cards .container[data-v-bc99180a]:after,.cards .container[data-v-bc99180a]:before{display:table;content:""}.cards .container[data-v-bc99180a]:after{clear:both}.page-resource[data-v-bc99180a]{padding-top:55px;box-sizing:border-box}.cards[data-v-bc99180a]{margin:35px auto 110px}.cards .container[data-v-bc99180a]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-bc99180a]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-bc99180a]{font-size:28px;margin:0}p[data-v-bc99180a]{font-size:14px;color:#5e6d82}.card[data-v-bc99180a]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-bc99180a]{margin:75px auto 35px;height:87px}.card h3[data-v-bc99180a]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-bc99180a]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.6}.card a[data-v-bc99180a]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-bc99180a]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-bc99180a]{height:auto;padding-bottom:20px}.cards h3[data-v-bc99180a]{height:auto}}.cards .container[data-v-22ed63d3]:after,.cards .container[data-v-22ed63d3]:before{display:table;content:""}.cards .container[data-v-22ed63d3]:after{clear:both}.page-resource[data-v-22ed63d3]{padding-top:55px;box-sizing:border-box}.cards[data-v-22ed63d3]{margin:35px auto 110px}.cards .container[data-v-22ed63d3]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-22ed63d3]{width:33.33333%;padding:0 11px;box-sizing:border-box;float:left;list-style:none}h2[data-v-22ed63d3]{font-size:28px;margin:0}p[data-v-22ed63d3]{font-size:14px;color:#5e6d82}.card[data-v-22ed63d3]{height:394px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:bottom .3s;bottom:0}.card img[data-v-22ed63d3]{margin:75px auto 35px;height:87px}.card h3[data-v-22ed63d3]{margin:0 0 10px;font-size:18px;color:#1f2f3d;font-weight:400;height:22px}.card p[data-v-22ed63d3]{font-size:14px;color:#99a9bf;padding:0 30px;margin:0;line-height:1.8}.card a[data-v-22ed63d3]{height:42px;width:190px;display:inline-block;line-height:42px;font-size:14px;background-color:#20a0ff;color:#fff;text-align:center;border:0;padding:0;cursor:pointer;border-radius:2px;transition:all .3s;text-decoration:none;margin-top:20px}@media (max-width:850px){.cards li[data-v-22ed63d3]{max-width:500px;float:none;margin:10px auto 30px;width:80%}.cards li .card[data-v-22ed63d3]{height:auto;padding-bottom:20px}.cards h3[data-v-22ed63d3]{height:auto}}.cards .container[data-v-05bad635]:after,.cards .container[data-v-05bad635]:before{display:table;content:""}.cards .container[data-v-05bad635]:after{clear:both}.actor[data-v-05bad635]{min-height:65px}.actor[data-v-05bad635]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-05bad635]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-05bad635]{position:relative}.banner img[data-v-05bad635]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-05bad635]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-05bad635]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-05bad635]{padding-top:110px;padding-left:30px;font-size:42px;position:relative;z-index:10}.banner-desc h2[data-v-05bad635]{font-size:50px;margin:0;color:#fff}.banner-desc p[data-v-05bad635]{font-size:14px;opacity:.8;width:420px;line-height:1.6;padding-left:3px}.cards[data-v-05bad635]{margin:0 auto 110px;width:1140px}.cards .container[data-v-05bad635]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-05bad635]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-05bad635]{width:160px;height:120px}.card[data-v-05bad635]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-05bad635]{margin:66px auto 60px}.card h3[data-v-05bad635]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-05bad635]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.6}.card a[data-v-05bad635]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-05bad635]:hover{color:#fff;background:#20a0ff}.card[data-v-05bad635]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-05bad635],.cards[data-v-05bad635]{width:100%}.banner .container[data-v-05bad635]{width:100%;box-sizing:border-box}.banner img[data-v-05bad635]{right:0}}@media (max-width:1000px){.banner .container img[data-v-05bad635]{display:none}}@media (max-width:768px){.cards li[data-v-05bad635]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-05bad635]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-05bad635],.banner-stars[data-v-05bad635]{display:none}.banner-desc h2[data-v-05bad635]{font-size:32px}.banner-desc p[data-v-05bad635]{width:auto}}.cards .container[data-v-b2da9546]:after,.cards .container[data-v-b2da9546]:before{display:table;content:""}.cards .container[data-v-b2da9546]:after{clear:both}.actor[data-v-b2da9546]{min-height:65px}.actor[data-v-b2da9546]:after{content:"";width:6px;height:50px;vertical-align:-8px;margin-left:5px;background-color:#fff;display:inline-block;animation:blink .4s infinite alternate}.banner[data-v-b2da9546]{position:relative;height:420px;color:#fff;margin-bottom:130px}.banner .container[data-v-b2da9546]{position:relative}.banner img[data-v-b2da9546]{position:absolute;top:15px;right:-10px}.banner-sky[data-v-b2da9546]{position:absolute;top:-150px;bottom:-15px;width:100%;margin-top:-140px;transform:skewY(-5deg);transform-origin:center;background-image:linear-gradient(180deg,#0d1a44 13%,#3c4f91 56%,#5fc1e4)}img.banner-stars[data-v-b2da9546]{top:-10px;left:50%;transform:translateX(-50%)}.banner-desc[data-v-b2da9546]{padding-top:110px;padding-left:30px;font-size:46px;position:relative;z-index:10}.banner-desc h2[data-v-b2da9546]{font-size:46px;margin:0;color:#fff}.banner-desc p[data-v-b2da9546]{font-size:14px;opacity:.8;width:420px;line-height:1.8;padding-left:3px}.cards[data-v-b2da9546]{margin:0 auto 110px;width:1140px}.cards .container[data-v-b2da9546]{padding:0;margin:0 -11px;width:auto}.cards li[data-v-b2da9546]{width:33.33333%;padding:0 19px;box-sizing:border-box;float:left;list-style:none}.cards img[data-v-b2da9546]{width:160px;height:120px}.card[data-v-b2da9546]{height:430px;width:100%;background:#fff;border:1px solid #eaeefb;border-radius:5px;box-sizing:border-box;text-align:center;position:relative;transition:all .3s ease-in-out;bottom:0}.card img[data-v-b2da9546]{margin:66px auto 60px}.card h3[data-v-b2da9546]{margin:0;font-size:18px;color:#1f2f3d;font-weight:400}.card p[data-v-b2da9546]{font-size:14px;color:#99a9bf;padding:0 25px;line-height:1.8}.card a[data-v-b2da9546]{height:53px;line-height:52px;font-size:14px;color:#20a0ff;text-align:center;border:0;border-top:1px solid #eaeefb;padding:0;cursor:pointer;width:100%;position:absolute;bottom:0;left:0;background-color:#fff;border-radius:0 0 5px 5px;transition:all .3s;text-decoration:none;display:block}.card a[data-v-b2da9546]:hover{color:#fff;background:#20a0ff}.card[data-v-b2da9546]:hover{bottom:6px;box-shadow:0 6px 18px 0 rgba(232,237,250,.5)}@keyframes blink{0%{opacity:0}to{opacity:1}}@media (max-width:1140px){.cards .container[data-v-b2da9546],.cards[data-v-b2da9546]{width:100%}.banner .container[data-v-b2da9546]{width:100%;box-sizing:border-box}.banner img[data-v-b2da9546]{right:0}}@media (max-width:1000px){.banner .container img[data-v-b2da9546]{display:none}}@media (max-width:768px){.cards li[data-v-b2da9546]{width:80%;margin:0 auto 20px;float:none}.cards .card[data-v-b2da9546]{height:auto;padding-bottom:54px}.banner-desc #line2[data-v-b2da9546],.banner-stars[data-v-b2da9546]{display:none}.banner-desc h2[data-v-b2da9546]{font-size:32px}.banner-desc p[data-v-b2da9546]{width:auto}}.el-progress-bar__inner:after,.el-upload-cover:after,.el-upload-list--picture-card .el-upload-list__item-actions:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-row:after,.el-row:before{display:table;content:""}.el-row:after{clear:both}.el-slider__button-wrapper:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-slider:after,.el-slider:before{display:table;content:""}.el-slider:after{clear:both}.el-form-item__content:after,.el-form-item__content:before{display:table;content:""}.el-form-item__content:after{clear:both}.el-form-item:after,.el-form-item:before{display:table;content:""}.el-form-item:after{clear:both}.el-breadcrumb:after,.el-breadcrumb:before{display:table;content:""}.el-breadcrumb:after{clear:both}.el-menu:after,.el-menu:before{display:table;content:""}.el-menu:after{clear:both}.el-button-group:after,.el-button-group:before{display:table;content:""}.el-button-group:after{clear:both}.el-autocomplete-suggestion.is-loading li:after{display:inline-block;content:"";height:100%;vertical-align:middle}.el-pagination:after,.el-pagination:before{display:table;content:""}.el-pagination:after{clear:both}@font-face{font-family:element-icons;src:url(data:application/font-woff;base64,d09GRgABAAAAAB9EABAAAAAANAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABbAAAABoAAAAcdCWJ3kdERUYAAAGIAAAAHQAAACAAWAAET1MvMgAAAagAAABNAAAAYFdvXOBjbWFwAAAB+AAAAFAAAAFS5mHtc2N2dCAAAAJIAAAAGAAAACQNZf70ZnBnbQAAAmAAAAT8AAAJljD3npVnYXNwAAAHXAAAAAgAAAAIAAAAEGdseWYAAAdkAAAUPAAAIUw4RPqwaGVhZAAAG6AAAAAvAAAANgxJKwtoaGVhAAAb0AAAAB4AAAAkCQwFDGhtdHgAABvwAAAAVgAAAKyk5AaSbG9jYQAAHEgAAABYAAAAWJwQpAxtYXhwAAAcoAAAACAAAAAgAU4CJG5hbWUAABzAAAABNQAAAit/uX3PcG9zdAAAHfgAAACyAAABsMLAXoJwcmVwAAAerAAAAJUAAACVpbm+ZnicY2BgYGQAgjO2i86D6MufP7fDaABY8wj8AAB4nGNgZGBg4ANiCQYQYGJgBEItIGYB8xgABhgAXQAAAHicY2Bh4WX8wsDKwMA0k+kMAwNDP4RmfM1gzMgJFGVgY2aAAUYBBgQISHNNYTjAUPFMnbnhfwNDDHMDQwNIDUiOWQKsRIGBEQCQ/wz4AAAAeJxjYGBgZoBgGQZGBhDwAfIYwXwWBgMgzQGETEC64pnKM/X//8Eshmdq////75ZikWKG6gIDRjYGOJcRpIeJARUwMtAMMNPOaJIAAAr1C6J4nGNgQANGDEbMEv8fMjf8b4DRAEVmCF94nJ1VaXfTRhSVvGRP2pLEUETbMROnNBqZsAUDLgQpsgvp4kBoJegiJzFd+AN87Gf9mqfQntOP/LTeO14SWnpO2xxL776ZO2/TexNxjKjseSCuUUdKXveksv5UKvGzpK7rXp4o6fWSumynnpIWUStNlczF/SO5RHUuVrJJsEnG616inqs874PSSzKsKEsi2iLayrwsTVNPHD9NtTi9ZJCmgZSMgp1Ko48QqlEvkaoOZUqHXr2eipsFUjYa8aijonoQKu4czzmljTpgpHKVw1yxWW3ke0nW8/qP0kSn2Nt+nGDDY/QjV4FUjMzA9jQeh08k09FeIjORf+y4TpSFUhtcAK9qsMegSvGhuPFBthPI1HjN8XVRqTQyFee6z7LZLB2PlRDlwd/YoZQbur+Ds9OmqFZjcfvAMwY5KZQoekgWgA5Tmaf2CNo8tEBmjfqj4hzwdQgvshBlKs+ULOhQBzJndveTYtrdSddkcaBfBjJvdveS3cfDRa+O9WW7vmAKZzF6khSLixHchzLrp0y71AhHGRdzwMU8XuLWtELIyAKMSiPMUVv4ntmoa5wdY290Ho/VU2TSRfzdTH49OKlY4TjLekfcSJy7x67rwlUgiwinGu8njizqUGWw+vvSkussOGGYZ8VCxZcXvncR+S8xbj+Qd0zhUr5rihLle6YoU54xRYVyGYWlXDHFFOWqKaYpa6aYoTxrilnKc0am/X/p+334Pocz5+Gb0oNvygvwTfkBfFN+CN+UH8E3pYJvyjp8U16Eb0pt4G0pUxGqmLF0+O0lWrWhajkzuMA+D2TNiPZFbwTSMEp11Ukpdb+lVf4k+euix2Prk5K6NWlsiLu6abP4+HTGb25dMuqGnatPjCPloT109dg0oVP7zeHfzl3dKi65q4hqw6g2IpgEgDbotwLxTfNsOxDzll18/EMwAtTPqTVUU3Xt1JUaD/K8q7sYnuTA44hjoI3rrq7ASxNTVkPz4WcpMhX7g7yplWrnsHX5ZFs1hzakwtsi9pVknKbtveRVSZWV96q0Xj6fhiF6ehbXhLZs3cmkEqFRM87x8K4qRdmRlnLUP0Lnl6K+B5xxdkHrwzHuRN1BtTXsdPj5ZiNrCyaGprS9E6BkLF0VY1HlWZxjdA1rHW/cEp6upycW8Sk2mY/CSnV9lI9uI80rdllm0ahKdXSX9lnsqzb9MjtoWB1nP2mqNu7qYVuNKlI9Vb4GtAd2Vt34UA8rPuqgUVU12+jayGM0LmvGfwzIYlz560arJtPv4JZqp81izV1Bc9+YLPdOL2+9yX4r56aRpv9Woy0jl/0cjvltEeDfOSh2U9ZAvTVpiHEB2QsYLtVE5w7N3cYg4jr7H53T/W/NwiA5q22N2Tz14erpKJI7THmcZZtZ1vUozVG0k8Q+RWKrw4nBTY3hWG7KBgbk7j+s38M94K4siw+8bSSAuM/axKie6uDuHlcjNOwruQ8YmWPHuQ2wA+ASxObYtSsdALvSJecOwGfkEDwgh+AhOQS75NwE+Jwcgi/IIfiSHIKvyLkF0COHYI8cgkfkEDwmpw2wTw7BE3IIviaH4BtyWgAJOQQpOQRPySF4ZmRzUuZvqch1oO8sugH0ve0aKFtQfjByZcLOqFh23yKyDywi9dDI1Qn1iIqlDiwi9blFpP5o5NqE+hMVS/3ZIlJ/sYjUF8aXmYGU13oveUcHfwIrvqx+AAEAAf//AA94nKVaC3Bc1Xk+/zn3uXe1e3fva6V9aXe1u5JWXq32aUlIun7IGGTZlsAPGTABHEUOIQkUcAgMESUEKMnQItl0SId2mEwyzWNipqV5kpB0ChNDQzLBtBPaztQJM23iaWdo+gi1rvufu7ItOWCcZnX3nHPP8z/nf33/WRFKsoRAlX6RMCKTPrdACGGUsH2EAtApQinsErAEWwiRJVHAbiwihku1SCZSrEVyWdD/7ZVX6BdX9mbpPI4VycDZf2bfZjFikwoZIbPkIByZOm7s3u9eTYF0hDpIaJ6wEITYQQKKAtfroCoBST0YgaAkSMGDRBO0w2FQiBRUpP0kIItU0ALCXBRCoY4Z0tERCG2OTx13cMapS8yoqIH533LKGE654/KmFOYva05350XTwTzOFwLl0P9vwrm5Obf3mmtGR6tDjnPNwWsOXrd/dHZ0dmpLqzE0Uh1xKk5lJjIUi/RarmGXQCpBNkSTkGnUC416mZbAyoiWaZshmpMKJShmZOxRzJbpGDhZybRr1Wa94EhyiKVgVKo2i2UoForQqI/TUajaSYDOeNc10Xwiyv4QArFi6iHvavoMWOlcKJQOdW/wrhpIZs3Ozm5DORKMRoMd0einFUnUBCqEQ/ktM7vdHsdWRVUUJe9zYrjL+na6j6Yh2Fns2tGnJ4SO7nj0pkfqzshI3lEBFhfBiHeHvjAR6Yrgc1+XbfSE9A4l1tWRixgmHPm5FjOCycLPUIRR9h4QCF0kSdLvFgNAiQMCpS4AoWSBARXoggiCcCN2TJKk4ZiOFC3l7WYLmmWQZBXKIEuW6UClZjs2/zrwL9H+EDwfpYVG1Lvdu9WoG2YUvgf8QwMAn1KkDljSN3RT3TsGCxHQ9Zite7fzZhE4SQSLZxdRZzhdWTed7HSsAJGAgMvbyDTvMoPUw2SfRfUSFDg9KZ+eFNKTyxah0igUC/xbBOnSC8LCpen16SFnF+nZy6aniasWQmAjO0KAx1JtIT3NVpN/W/RtpMe7zacHPuj98So98PhvQQ9+F5Fvn2jzzUE+BZBj1EVeUYHzjdAF3nM936AgySCloNni54Tk1PGccnhG/FukMVzX2+Kvi8Qc9df1Js6vSz9+abp9uhg5yr5OnyQacVyT0wnT/IRmeNtkPYKH0xaeQi6TlRx4KrErAR9ppadXxOl069kExOH9jR07Gv6Za2c/wzrYZhIk0l8EREDVK9RxqG1FTKkIUIhj5+aOHU3vs5CP745fmAc+8i7jm7jhgoTj7RbQt+Jx7ym+GMy/43jcy7E1e7mI0f5eoFl1wJZwL4XWRXuh9+H0n21OTTX9ucbP/rtYZgdIlIw8p+J4cKeO96DljKDHoAt8RuQawaXQ/IXX190495xlWroQLYko14U6rqniwraJvMzRnt6Ed29yeCYBLj2U3D2cWNmX6Isk4CFe9l6ghxLDu5NYh/qMMixwnQqTAhl1N6aAMi7AAlkggigsSCAycQH9GFvw3dg0d2OzBL3YNl3XC3rBjHU6umyUCJpHM0Wr47ReBgZSdpAW6hNIUhr8BCmjH3ztW4/t3v3Yt9qZ7D2mGIr8Q1muyab8R1DFtKoobPF8D5553/Mek2Xlh4rf+AQMKUoVh+H5XaA9TUqk4VZjukIErn94QCKIBOaRYgGl/xD6UkGcJqIozPBdTVrRLrMrKpkllPeqY5th1EdJRprRTmSLnO4iWg9sinaPg16G7hDoNg2c0FKapp04oUEAS5inAxdeG2CffvTR094vMIWvnNC0QJq3pbRA4OWXA2sGrKiPnj7fd90+wqTG91Hrz8QEgfJ9UBBQjedxDwSfQ3ju63THTJgJR8d9COh40LNUU9QMAWvWB6GQDeMmMJHMNO4KE7s6gdvEhDdfxIsRWW7g8S8fxaQhSUePShJ/P7rM32X56Hqe0EnZUmqKsrSkYGbJy0uY1GV5eVnGzFKWuI6f503eza7lDNcYLsEwg9xBneGcQDFWkWIZ7aKKBCOVaIwwQdVUuX6iP6HEu8caNU2w4GEsWeYoFuBhrLIs7x4s+DU/Xy149/i9rd/ojOPJqq0kHIGRPvKkq+mAIutG0WZNTB3XUAPz6O+AyQzkeY7mJCbPKSARIk1jJpFZEYhEtiHQsbFz6kJnbPWb9hJZZjOEsYCMunt5syEg0XrMTE/ejJjdqlPK1MYRLhRylVwFs6xkVaxKDjPTdmqNXLbQVi4bkQltnpx/fHlBWfrxsrKw/Pj8mwfMoPZp2ZA/EwgaB9jy/OGjyuHl5cPK0cPzy+zLtv56IPC6bvuyB6t8SpJRMugOjLYatd5U25cFOcdom2PU5xjzOTa4oSfXZwl6ybiki81fsvU9/C8lv5t/pu/pLtfoXQLRdcXdMNyoDVWKyUSMb77jXTZfHshl/c2/iz+fgAq68/w7NJ739RX2tiKG3tlpUgnAI+/a/B57p8HL2Dkl7z/7EHsY940+jGsnAURVQHjM8QFCGfONPJdeyibrZj3CnQwq43n/vNa/fb1rexcM1OPbVj61LV6DDeteb4nFIFHZurVCvxqLeW8Obd06xGMiUkIcdxLXd0gc7cMzqyrnowW4XgOVKLKq7AuATFBp9hJUkRnUIEICEo8tqti5h3eGhffo65ba3fwKSSXS/rUDGJOnMJPZLB/K1c9JJGKxRDqRTiVj8Vg8Gsk3MhE9aJUQ9ucsrnsIEmqZarMRqSNwaOQAQzf+pT/wPvxkNVEsJFghUSjGa0+u/B19wXsZ4ULojjuKiTP/kygWE0xJFO8482E6tvLXMHbWt0ESWcSzwD/SidHjANlItpLd5Ab3ADdPQIS5sBhiWKAy0DkiBwNUUWVlrkOjqiSp0zxXpRkdJFWazOe6ugjZOb39ys2brhhtNiqDfb25gfxAV7Yrm07iAp1NoxaJlLhRwVhFSkLO5DC9vaN6YRDERr1Z82MTf48Z3C0gsvCxVbbQYO9Spr+fiT3S2fcKHcrF6B/EcqlQ2Lu3J5HM4R4XG1Mri1NwT9jWdTv8dNgOh89n9Pv3x/OFrvsB7P6uQqErlhEF6nbjxz3zwlQDLT5pTMHPtUhE874Y1PUg7H3nMpfpPXiOX8Jz7ECJGnabaNAFxDEMkS+j81wMBAbCHFd6X7y5A6VkEoFwPGYbOg4L1qUweqE1HM4Zpi/ljUiNV+DJWPAN709mR+j4yOzsSKY/6YVSfb9O9uPDFr0nVn49PDs7TH8xPHvmuWR/XwqW+1MA/cl1tkZA5Bl1w7KE9IhkDNtujEO41GJ5KLZkB11eIXvttVCDN089f8/P7ipf/+Bfeq/sgTffeP6eN+4qP3g9158LeCFGekjdHSIgcdyGIsIQ3zDcp0iID3j4PkUyGdGzmUTcMvVYJIZwTV8PGIAHrDxeNXw/E+EvjYsQgvdGur801l9KZqtZfC4CBCdLYyV8vNNOJuN4/xvr7o6twQB+PEIEypAZGLUTKrRJJWwaXSQnkZFJy8rlDdEoRcwUtFFXrh1HpwBJzJbBd4LnoNNjuuPod790550vnX7pTifjwOJjvJo34ptfe+dLd2Mn7uYvnFeaDJIJst2d1CSVoVIxtHdzAUFhvp33C2jpfasxWa1ku6M6JSOtykR1or/YPZgd7HL0dDQdkEmYhoOhEicxCaaNEX1zDO0ju+h9fXv9ovZ6AeZ/Nbhly+CvKpvplqELRfhvzDZXzlW0S3DdlsH/rGzFmqGtNH+hYeUNrOc931pf78vcSdx3iZikQj7qhnosXURbkrMpqgWGGnE0pLYPJrmDC2wigsBtIdMYN7P92Gr6ng+x59zaNrdzTTVjwvRqo8CN6F+VWrFYN/IRMnyvKaE6zlocxkAkJaBmjdMJiISEHMrfILDFFdK3Lzr69AP3D9z/wNOj0X19Zxap3JkoOYxYpaQjSeHaZ+77dF/fIw/fWyyw0khPNFxdvHn3rps/UQsbPSPe2ytvMdWOhkKGIctUD234vf3bJ2+6OZv1MR4MIZGvop9Lu4l1vtyP1hBjiESjGguVjAyGTr6y15u72M2Zcjlz5mlM4dXy5jI+xPdbBAI4338RZD/6roybEpk/3TTPoe14EJUb/MNReZTrFAqxcFE+efMkPvDquizQrl3ztNdc5WGYDJFR0N3gaJVSeah3lYdB5FKVyCIV5YOESiKVDhFJECWMeQQmCuyQbwOUNn8Z46EbaMD5y7lfa4+k87/dUC4aQ5ccykeJMhHn1g50m5c7Bq339OpIBtv4VZ0NZHhjo14u9eQSXZahSiQMIRUZt94p51iZoo6FgSHcLAzSMsUXGkG3luHuCri/8j3X0tjevWP0pzz9FEhxw0yJ4vGAo0UFdgMNJOMJWd7en6ZLqX7vKvc6Fx9W2ju28iN/WGVsr/dJqgQ1UfT+1QgI4m1Mi0ZVdR+8kiqVUt4+SG4Yn9g/Pj6wGmus2p+4j7ZEQsVp1EPGUS6qkCjSGayik0YuZ+S6eVSa8S1fpm2IIxkuNrlMxDfO8DVvKV0qpeG20hUluI0XvSVe/AEmv9HUxrnFs99nz7MRlNskKbo9NsqqgqEl5RdV/EIPyxjd0xsJScSxk2wI4VJPW1RtMQQFjL/Gqe3YURljZR4hU+HYsdeOHYMDU9/42tar6/WlF1+8+n2JK182jGjDfIk3vXZs4Iqe1uTVL/7Ncr1+9fu8//jICaOBarHqC7+M53Et+RC5m9zuqh+69YN1gV87tO+N7VWfgGKHfoJyZV2VO343Ygj81CjsOd+LW6Su1bv2OWzltxTnBlKYROEJ3n3XHbd/+LadO2KOiEa7DBgeF3n8xAMR/w0lhkf//N4Sg1AULcDISpZ4wYdIaYxgsMaxsR+/zvTfEOsjXEr7t2atcZiAcT5Vq8kLrTaiGoK2vKFtYWdYIqJPZDJhUdQ69AGjW5L0YjA4+FBFCxZ1c8BAEewIimI4k5nQIwnUb1SDRCTs+kOCHeEBsz1Eq2zeUtG0Xt0Y4GLboYmCnsm4up4QuB3yhGs/9rE/P3JkD7yoJwVmbNw4EdaLWkenFmZUUjuCAwPBDlWSY0FDEAKFSHhi43CUCUndrNo5SX7HMdqGDZo/RjMFphV0fWLjRuPCGO+tuz5/Fz4oTjXEYX+Lsn4L2exO1IbQ4+/fi6ETjYQpEZnLAQplPhADkcJvAJVbbtq+7YrR3kKiy0E4lufwhPqX6vUWvyzNc37wUJLzDdEqHnut6vPDyfO4kl/O88oqr7JMzsx236KIXUzkgyXJpixyBrWQeey2eJ/j9DXHm30OP7olzQ51hEJ6eti0YzHbHE6Hw1hha3CYB1Axy9o4fqEpyVu8J+Hc50OBWBBHh9J/qvU1J5r+zGlVZPicVHVRoqzTtFsZf3LGJFFXX2OiKIiqiFVWZ6eFk2Y2WmZMkAU98BNRFUQlEBDROgqvqyE0maytz/TsI8IonvEV5BDZ4rqpLgpCfxG9Kp6zWxMpwkoBhAVuPBfQQYnkMMF1fJMqziIXxG2Hbtm9a3Sk2UjGo3jMou1kJbmJwstFuoUSXhhc1RIeufpqgIIvj0PR1wQsO2iReOeqgy++KrVHczVoVtvqkjqnSBK/jmLD4QDTgAp1NZE+HkICmWL8sne7fgM6blnGQOwGfXvvLw0FgbsQejaVUGsCBKmqn8gdyD5wojkcqovR6LOD9vhpp6ze0Hll5w1q2Tk9bg8+G42K9dBw84Q1PKKCwtToqd49XU8FFRYCgdqs0XMyIqPTjJzsaTAbwWcYbfdTXXt6T0VVpoB6xLJqR7r7x045zfBTfZsli2atkyMjJ60staTNfU+Fm86psf7uI0FuLs+dfZHEXOviu2x0MRSl1r92e89DKdLd1rB1ORsLBIOXQd8qRln1NTpJkA1k0t1M0NNSUfJxt8hxt6Tg0UvCgTUAXOb32pOpJJC+Yk8uuSE1EHOiEVUhOujoZEUffa9GCzSaDQFi9Oo4B7DZwpgfIiZRD7mVowRx+Myj3/nRdx6dwUz86TdvvfWbPPF+aiYSvYk/w9RcRPy+0O7A+7En2l0w8Y4mjTeNZNJ4LlFMkvWxjkNypOT28l9GBY4SsBqty9yFa+m2vbcsw/HvRNfdSJNVO9zwI9aIjwEujnB+5Uc27eeiW+iVcnYolxv6p85crhOMzmy2k8fuebR1b5yPK0bJFvIBssO9ioSIqoTUfeEOlLMAlUCR5jhC5PAQTxrjeE2Tp4ksazNEk7XJ+UM3Hbxu7trZXTuuunKTa9SNBv/UdKeE0Sj/4dEnmP9q6LzHu8Fj9hRwmI0xPDo3tM2ixftEzoWyuTbHRgGtJB+S5oyD+4NqCaUsUFKDXwmqA2rQT77iV/hN+1aeCQQordJAwBuBcrcov472aCaobprYsPLDDRObeL8fDwYa8b+PNwKDP1aD8EtvkU8Ji7zpXcqeST+28kg4FgzG6D/slCiVbsEVVx5pzexs0XtxZTX40VguF/tocK0sxEmNuFy2y0kq8zBfAmmByIJ8GIVcgGmqoK8Bhn0PoG7yO38QJoEMVXpyGOxHwx0BBUUoDnGVh3B+XJlsR5uj6DRsHpv5P99CcdwHP1yQuENpthweJqP+luk4TaFeffyJZG/yCS7T7UIyCbec2lKc2Dnxuc9/7v5NmyZ2vfranlPh/pT3hU3Hjz9YLj/op/D2Eh+zlOhLnC+s/OPP9vzk1Z3upk2fwLE4Q++WU+FUP0QwAPnkV48/ODj44PGvXri33IXnYGFMsMvd0d1JBRlcSeUZnsc8IjpRBvEQYjmRymL71oP/AwKZVfhvuNscm5JSf082mbCHnCE9HNQUmVjUCqCuZ87rBwrTuVseQHDUvuyJ+N63sfrTjo3CJYTPDMXz+UaezeTrhbz37YSxG992G4l4Xv+uMWx8V88vFrrAxU5xfu3Fc++FrgL9kjXn3cdvfuCTc1Y+Hou+blmvR2Px/P8BEpxdcHicY2BkYGAA4iUXFTLj+W2+MsizMIDA5c+f2xH0/wZWPeYGIJeDgQkkCgBf1AyCAHicY2BkYGBu+N/AEMOawAAErHoMjAyoQBsAVCkDJAAAeJxjLGNQYgACxlAGBuaXDDosQDYLAyMjEDOA2YwMzEA2NxgD2awJDHYQNWiYkYERiEHsVCDWBuIGIA7FqhYTq0P1GrPYMTCBMUJOFUz7MzAAAGi0Bh0AAAAAACgAKAAoAWQBsAH4AkACjAKyAtIC8gMYA1oDuAQcBIYE1gVaBdgGVAaUBxoHvggOCDQIiAjMCUgJyAnwCioLDAtMC5QMgg00DfIOQg6qDvgPsBA0EKYAAQAAACsAdwAGAAAAAAACACYANABsAAAAigF3AAAAAHicdY9Na8JAEIbfaNQWivTY45BL9bBhE6L4cZX4D3oXSTSQGkjWj0v/QQs99dxjf2ZfN0uhBxNm55mZd2dnADzgCx6un4cBHh134CNw3CW9Ovap+XbcQ+pNHfcx8D6o9Px7Zob21pU7uMOT4y5WeHbsU/PpuId3/DjuY+i9IUMJhQJbVDgAWamKbUX4y7RhagNjfY0drwlihND0C9r/Nm1uysycFlMVMUJaHUxa1btM4lDLQtxjpKmaq1hH1Nya54WVGg0r7QORe3xJM/xzbHCkr7Cn5jqqYIQTNSGHSDBmrNhbMLNU85zYDgpru4x20cV2TyyfeQasBzbK7dlwmKxuCg4ecY2lGJNvjqbaFwcjo5MO58lYVCkzUbVMtKi1xJruIlEi6izBOhCVi2puLvsLTjBRRQAAAHicbc3LNsJxGEbh3/47JHKIQomcwlomfV8Uw5Cb6ApMzLoCF46lPfSu9a49fEpV/vb9VbL8t/vfU6oyp2KFVdZYp8YGdTbZosE2O+yyR5N9DmjR5pAjjunQ5YQep5zR55wLLrnimgE33HJXW3x+zMbDoQ2bdmQf7KMd24l9ss92al/sq32zM/u+bOiHfuiHfuiHfuiHfuiHfuiHfuiHfuiHfuqnfuqnfuqnbk5+APaSXBUAAEu4AMhSWLEBAY5ZuQgACABjILABI0QgsAMjcLAORSAgS7gADlFLsAZTWliwNBuwKFlgZiCKVViwAiVhsAFFYyNisAIjRLMKCQUEK7MKCwUEK7MODwUEK1myBCgJRVJEswoNBgQrsQYBRLEkAYhRWLBAiFixBgNEsSYBiFFYuAQAiFixBgFEWVlZWbgB/4WwBI2xBQBEAAAA) format("woff"),url(static/element-icons.b02bdc1.ttf) format("truetype");font-weight:400;font-style:normal}[class*=" el-icon-"],[class^=el-icon-]{font-family:element-icons!important;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;line-height:1;vertical-align:baseline;display:inline-block;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-icon-arrow-down:before{content:"\E600"}.el-icon-arrow-left:before{content:"\E601"}.el-icon-arrow-right:before{content:"\E602"}.el-icon-arrow-up:before{content:"\E603"}.el-icon-caret-bottom:before{content:"\E604"}.el-icon-caret-left:before{content:"\E605"}.el-icon-caret-right:before{content:"\E606"}.el-icon-caret-top:before{content:"\E607"}.el-icon-check:before{content:"\E608"}.el-icon-circle-check:before{content:"\E609"}.el-icon-circle-close:before{content:"\E60A"}.el-icon-circle-cross:before{content:"\E60B"}.el-icon-close:before{content:"\E60C"}.el-icon-upload:before{content:"\E60D"}.el-icon-d-arrow-left:before{content:"\E60E"}.el-icon-d-arrow-right:before{content:"\E60F"}.el-icon-d-caret:before{content:"\E610"}.el-icon-date:before{content:"\E611"}.el-icon-delete:before{content:"\E612"}.el-icon-document:before{content:"\E613"}.el-icon-edit:before{content:"\E614"}.el-icon-information:before{content:"\E615"}.el-icon-loading:before{content:"\E616"}.el-icon-menu:before{content:"\E617"}.el-icon-message:before{content:"\E618"}.el-icon-minus:before{content:"\E619"}.el-icon-more:before{content:"\E61A"}.el-icon-picture:before{content:"\E61B"}.el-icon-plus:before{content:"\E61C"}.el-icon-search:before{content:"\E61D"}.el-icon-setting:before{content:"\E61E"}.el-icon-share:before{content:"\E61F"}.el-icon-star-off:before{content:"\E620"}.el-icon-star-on:before{content:"\E621"}.el-icon-time:before{content:"\E622"}.el-icon-warning:before{content:"\E623"}.el-icon-delete2:before{content:"\E624"}.el-icon-upload2:before{content:"\E627"}.el-icon-view:before{content:"\E626"}.el-icon-loading{animation:rotating 1s linear infinite}.el-icon--right{margin-left:5px}.el-icon--left{margin-right:5px}@keyframes rotating{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.el-pagination{white-space:nowrap;padding:2px 5px;color:#48576a}.el-pagination button,.el-pagination span{display:inline-block;font-size:13px;min-width:28px;height:28px;line-height:28px;vertical-align:top;box-sizing:border-box}.el-pagination .el-select .el-input{width:110px}.el-pagination .el-select .el-input input{padding-right:25px;border-radius:2px;height:28px}.el-pagination button{border:none;padding:0 6px;background:transparent}.el-pagination button:focus{outline:none}.el-pagination button:hover{color:#20a0ff}.el-pagination button.disabled{color:#e4e4e4;background-color:#fff;cursor:not-allowed}.el-pagination .btn-next,.el-pagination .btn-prev{background:50% no-repeat;background-size:16px;background-color:#fff;border:1px solid #d1dbe5;cursor:pointer;margin:0;color:#97a8be}.el-pagination .btn-next .el-icon,.el-pagination .btn-prev .el-icon{display:block;font-size:12px}.el-pagination .btn-prev{border-radius:2px 0 0 2px;border-right:0}.el-pagination .btn-next{border-radius:0 2px 2px 0;border-left:0}.el-pagination--small .btn-next,.el-pagination--small .btn-prev,.el-pagination--small .el-pager li,.el-pagination--small .el-pager li:last-child{border-color:transparent;font-size:12px;line-height:22px;height:22px;min-width:22px}.el-pagination--small .arrow.disabled{visibility:hidden}.el-pagination--small .el-pager li{border-radius:2px}.el-pagination__sizes{margin:0 10px 0 0}.el-pagination__sizes .el-input .el-input__inner{font-size:13px;border-color:#d1dbe5}.el-pagination__sizes .el-input .el-input__inner:hover{border-color:#20a0ff}.el-pagination__jump{margin-left:10px}.el-pagination__total{margin:0 10px}.el-pagination__rightwrapper{float:right}.el-pagination__editor{border:1px solid #d1dbe5;border-radius:2px;line-height:18px;padding:4px 2px;width:30px;text-align:center;margin:0 6px;box-sizing:border-box;transition:border .3s}.el-pagination__editor::-webkit-inner-spin-button,.el-pagination__editor::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.el-pagination__editor:focus{outline:none;border-color:#20a0ff}.el-pager{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;font-size:0;padding:0}.el-pager,.el-pager li{display:inline-block;vertical-align:top;margin:0}.el-pager li{padding:0 4px;border:1px solid #d1dbe5;border-right:0;background:#fff;font-size:13px;min-width:28px;height:28px;line-height:28px;cursor:pointer;box-sizing:border-box;text-align:center}.el-pager li:last-child{border-right:1px solid #d1dbe5}.el-pager li.btn-quicknext,.el-pager li.btn-quickprev{line-height:28px;color:#97a8be}.el-pager li.btn-quicknext:hover,.el-pager li.btn-quickprev:hover{cursor:pointer}.el-pager li.active+li{border-left:0;padding-left:5px}.el-pager li:hover{color:#20a0ff}.el-pager li.active{border-color:#20a0ff;background-color:#20a0ff;color:#fff;cursor:default}.el-dialog{position:absolute;left:50%;transform:translateX(-50%);background:#fff;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.3);box-sizing:border-box;margin-bottom:50px}.el-dialog--tiny{width:30%}.el-dialog--small{width:50%}.el-dialog--large{width:90%}.el-dialog--full{width:100%;top:0;margin-bottom:0;height:100%;overflow:auto}.el-dialog__wrapper{top:0;right:0;bottom:0;left:0;position:fixed;overflow:auto;margin:0}.el-dialog__header{padding:20px 20px 0}.el-dialog__close{cursor:pointer;color:#bfcbd9}.el-dialog__close:hover{color:#20a0ff}.el-dialog__title{line-height:1;font-size:16px;font-weight:700;color:#1f2d3d}.el-dialog__body{padding:30px 20px;color:#48576a;font-size:14px}.el-dialog__headerbtn{float:right}.el-dialog__footer{padding:10px 20px 15px;text-align:right;box-sizing:border-box}.dialog-fade-enter-active{animation:dialog-fade-in .3s}.dialog-fade-leave-active{animation:dialog-fade-out .3s}@keyframes dialog-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes dialog-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-autocomplete{position:relative;display:inline-block}.el-autocomplete-suggestion{margin:5px 0;box-shadow:0 0 6px 0 rgba(0,0,0,.04),0 2px 4px 0 rgba(0,0,0,.12)}.el-autocomplete-suggestion li{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer;color:#48576a;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.el-autocomplete-suggestion li:hover{background-color:#e4e8f1}.el-autocomplete-suggestion li.highlighted{background-color:#20a0ff;color:#fff}.el-autocomplete-suggestion li:active{background-color:#0082e6}.el-autocomplete-suggestion li.divider{margin-top:6px;border-top:1px solid #d1dbe5}.el-autocomplete-suggestion li.divider:last-child{margin-bottom:-6px}.el-autocomplete-suggestion.is-loading li{text-align:center;height:100px;line-height:100px;font-size:20px;color:#999}.el-autocomplete-suggestion.is-loading li:hover{background-color:#fff}.el-autocomplete-suggestion.is-loading .el-icon-loading{vertical-align:middle}.el-autocomplete-suggestion__wrap{max-height:280px;overflow:auto;background-color:#fff;border:1px solid #d1dbe5;padding:6px 0;border-radius:2px;box-sizing:border-box}.el-autocomplete-suggestion__list{margin:0;padding:0}.el-dropdown{display:inline-block;position:relative;color:#48576a;font-size:14px}.el-dropdown .el-button-group{display:block}.el-dropdown .el-dropdown__caret-button{padding-right:5px;padding-left:5px}.el-dropdown .el-dropdown__caret-button .el-dropdown__icon{padding-left:0}.el-dropdown__icon{font-size:12px;margin:0 3px}.el-dropdown-menu{margin:5px 0;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);padding:6px 0;z-index:10;position:absolute;top:0;left:0;min-width:100px}.el-dropdown-menu__item{list-style:none;line-height:36px;padding:0 10px;margin:0;cursor:pointer}.el-dropdown-menu__item:not(.is-disabled):hover{background-color:#e4e8f1;color:#48576a}.el-dropdown-menu__item.is-disabled{cursor:default;color:#bfcbd9;pointer-events:none}.el-dropdown-menu__item--divided{position:relative;margin-top:6px;border-top:1px solid #d1dbe5}.el-dropdown-menu__item--divided:before{content:"";height:6px;display:block;margin:0 -10px;background-color:#fff}.el-menu-item,.el-submenu__title{height:56px;line-height:56px;font-size:14px;color:#48576a;padding:0 20px;cursor:pointer;position:relative;transition:border-color .3s,background-color .3s,color .3s;box-sizing:border-box;white-space:nowrap}.el-menu{border-radius:2px;position:relative;margin:0;padding-left:0;background-color:#eef1f6}.el-menu,.el-menu li{list-style:none}.el-menu--dark{background-color:#324157}.el-menu--dark .el-menu-item,.el-menu--dark .el-submenu__title{color:#bfcbd9}.el-menu--dark .el-menu-item:hover,.el-menu--dark .el-submenu__title:hover{background-color:#48576a}.el-menu--dark .el-submenu .el-menu{background-color:#1f2d3d}.el-menu--dark .el-submenu .el-menu .el-menu-item:hover{background-color:#48576a}.el-menu--horizontal .el-menu-item{float:left;height:60px;line-height:60px;margin:0;cursor:pointer;position:relative;box-sizing:border-box;border-bottom:5px solid transparent}.el-menu--horizontal .el-menu-item a,.el-menu--horizontal .el-menu-item a:hover{color:inherit}.el-menu--horizontal .el-menu-item:hover{background-color:#d1dbe5}.el-menu--horizontal .el-submenu{float:left;position:relative}.el-menu--horizontal .el-submenu>.el-menu{position:absolute;top:65px;left:0;border:1px solid #d1dbe5;padding:5px 0;background-color:#fff;z-index:100;min-width:100%;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-menu--horizontal .el-submenu .el-submenu__title{height:60px;line-height:60px;border-bottom:5px solid transparent}.el-menu--horizontal .el-submenu .el-menu-item{background-color:#fff;float:none;height:36px;line-height:36px;padding:0 10px}.el-menu--horizontal .el-submenu .el-submenu__icon-arrow{position:static;vertical-align:middle;margin-left:5px;color:#97a8be;margin-top:-3px}.el-menu--horizontal .el-menu-item:hover,.el-menu--horizontal .el-submenu__title:hover{background-color:#eef1f6}.el-menu--horizontal>.el-menu-item:hover,.el-menu--horizontal>.el-submenu.is-active .el-submenu__title,.el-menu--horizontal>.el-submenu:hover .el-submenu__title{border-bottom:5px solid #20a0ff}.el-menu--horizontal.el-menu--dark .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu__title:hover{background-color:#324157}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title{color:#48576a}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item:hover,.el-menu--horizontal.el-menu--dark .el-submenu .el-submenu-title:hover{background-color:#d1dbe5}.el-menu--horizontal.el-menu--dark .el-submenu .el-menu-item.is-active{color:#20a0ff}.el-menu-item [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-menu-item:first-child{margin-left:0}.el-menu-item:last-child{margin-right:0}.el-menu-item:hover{background-color:#d1dbe5}.el-menu-item.is-active{color:#20a0ff}.el-submenu [class^=el-icon-]{vertical-align:baseline;margin-right:10px}.el-submenu .el-menu{background-color:#e4e8f1}.el-submenu .el-menu-item{height:50px;line-height:50px;padding:0 45px}.el-submenu .el-menu-item:hover{background-color:#d1dbe5}.el-submenu.is-opened>.el-submenu__title .el-submenu__icon-arrow{transform:rotate(180deg)}.el-submenu.is-active .el-submenu__title{border-bottom-color:#20a0ff}.el-submenu__title{position:relative}.el-submenu__title:hover{background-color:#d1dbe5}.el-submenu__icon-arrow{position:absolute;top:50%;right:20px;margin-top:-7px;transition:transform .3s;font-size:12px}.el-menu-item-group>ul{padding:0}.el-menu-item-group__title{padding-top:15px;line-height:normal;font-size:14px;padding-left:20px;color:#97a8be}.el-radio{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-radio+.el-radio{margin-left:15px}.el-radio__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-radio__input.is-focus .el-radio__inner{border-color:#20a0ff}.el-radio__input.is-checked .el-radio__inner{border-color:#20a0ff;background:#20a0ff}.el-radio__input.is-checked .el-radio__inner:after{transform:translate(-50%,-50%) scale(1)}.el-radio__input.is-disabled .el-radio__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-radio__input.is-disabled .el-radio__inner:after{cursor:not-allowed;background-color:#eef1f6}.el-radio__input.is-disabled .el-radio__inner+.el-radio__label{cursor:not-allowed}.el-radio__input.is-disabled.is-checked .el-radio__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-radio__input.is-disabled.is-checked .el-radio__inner:after{background-color:#fff}.el-radio__input.is-disabled+.el-radio__label{color:#bbb;cursor:not-allowed}.el-radio__inner{border:1px solid #bfcbd9;border-radius:100%;width:18px;height:18px;border-radius:50%;background-color:#fff;position:relative;cursor:pointer;display:inline-block;box-sizing:border-box}.el-radio__inner:hover{border-color:#20a0ff}.el-radio__inner:after{width:6px;height:6px;border-radius:50%;background-color:#fff;content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(0);transition:transform .15s cubic-bezier(.71,-.46,.88,.6)}.el-radio__original{opacity:0;outline:none;position:absolute;z-index:-1;top:0;left:0;right:0;bottom:0;margin:0}.el-radio__label{font-size:14px;padding-left:5px}.el-radio-group{display:inline-block;font-size:0;line-height:1}.el-radio-group .el-radio{font-size:14px}.el-radio-button{position:relative;display:inline-block}.el-radio-button:first-child .el-radio-button__inner{border-left:1px solid #bfcbd9;border-radius:4px 0 0 4px;box-shadow:none!important}.el-radio-button:last-child .el-radio-button__inner{border-radius:0 4px 4px 0}.el-radio-button__inner{display:inline-block;line-height:1;white-space:nowrap;vertical-align:middle;background:#fff;border:1px solid #bfcbd9;border-left:0;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;position:relative;cursor:pointer;transition:all .3s cubic-bezier(.645,.045,.355,1);padding:10px 15px;font-size:14px;border-radius:0}.el-radio-button__inner:hover{color:#20a0ff}.el-radio-button__inner [class*=el-icon-]{line-height:.9}.el-radio-button__inner [class*=el-icon-]+span{margin-left:5px}.el-radio-button__orig-radio{opacity:0;outline:none;position:absolute;z-index:-1;left:-999px}.el-radio-button__orig-radio:checked+.el-radio-button__inner{color:#fff;background-color:#20a0ff;border-color:#20a0ff;box-shadow:-1px 0 0 0 #20a0ff}.el-radio-button__orig-radio:disabled+.el-radio-button__inner{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5;box-shadow:none}.el-radio-button--large .el-radio-button__inner{padding:11px 19px;font-size:16px;border-radius:0}.el-radio-button--small .el-radio-button__inner{padding:7px 9px;font-size:12px;border-radius:0}.el-radio-button--mini .el-radio-button__inner{padding:4px;font-size:12px;border-radius:0}.el-switch{display:inline-block;position:relative;font-size:14px;line-height:22px;height:22px;vertical-align:middle}.el-switch .label-fade-enter,.el-switch .label-fade-leave-active{opacity:0}.el-switch.is-disabled .el-switch__core{border-color:#e4e8f1!important;background:#e4e8f1!important}.el-switch.is-disabled .el-switch__core span{background-color:#fbfdff!important}.el-switch.is-disabled .el-switch__core~.el-switch__label *{color:#fbfdff!important}.el-switch.is-disabled .el-switch__input:checked+.el-switch__core{border-color:#e4e8f1;background-color:#e4e8f1}.el-switch.is-disabled .el-switch__core,.el-switch.is-disabled .el-switch__label{cursor:not-allowed}.el-switch__label{transition:.2s;width:46px;height:22px;left:0;top:0;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-switch__label,.el-switch__label *{position:absolute;display:inline-block;font-size:14px}.el-switch__label *{line-height:1;top:4px;color:#fff}.el-switch__label--left i{left:6px}.el-switch__label--right i{right:6px}.el-switch__input{display:none}.el-switch__input:checked+.el-switch__core{border-color:#20a0ff;background-color:#20a0ff}.el-switch__core{margin:0;display:inline-block;position:relative;width:46px;height:22px;border:1px solid #bfcbd9;outline:none;border-radius:12px;box-sizing:border-box;background:#bfcbd9;cursor:pointer;transition:border-color .3s,background-color .3s}.el-switch__core .el-switch__button{top:0;left:0;position:absolute;border-radius:100%;transition:transform .3s;width:16px;height:16px;background-color:#fff}.el-switch--wide .el-switch__label.el-switch__label--left span{left:10px}.el-switch--wide .el-switch__label.el-switch__label--right span{right:10px}.el-select-dropdown{position:absolute;z-index:1001;border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);box-sizing:border-box;margin:5px 0}.el-select-dropdown .el-scrollbar.is-empty .el-select-dropdown__list{padding:0}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{color:#20a0ff;background-color:#fff}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover{background-color:#e4e8f1}.el-select-dropdown.is-multiple .el-select-dropdown__item.selected:after{position:absolute;right:10px;font-family:element-icons;content:"\E608";font-size:11px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.el-select-dropdown__empty{padding:10px 0;margin:0;text-align:center;color:#999;font-size:14px}.el-select-dropdown__wrap{max-height:274px}.el-select-dropdown__list{list-style:none;padding:6px 0;margin:0;box-sizing:border-box}.el-select-dropdown__item{font-size:14px;padding:8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-select-dropdown__item.hover{background-color:#e4e8f1}.el-select-dropdown__item.selected{color:#fff;background-color:#20a0ff}.el-select-dropdown__item.selected.hover{background-color:#1c8de0}.el-select-dropdown__item span{line-height:1.5!important}.el-select-dropdown__item.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-select-dropdown__item.is-disabled:hover{background-color:#fff}.el-select-group{margin:0;padding:0}.el-select-group .el-select-dropdown__item{padding-left:20px}.el-select-group__wrap{list-style:none;margin:0;padding:0}.el-select-group__title{padding-left:10px;font-size:12px;color:#999;height:30px;line-height:30px}.el-select{display:inline-block;position:relative}.el-select:hover .el-input__inner{border-color:#8391a5}.el-select .el-input__inner{cursor:pointer;padding-right:35px}.el-select .el-input__inner:focus{border-color:#20a0ff}.el-select .el-input .el-input__icon{color:#bfcbd9;font-size:12px;transition:transform .3s;transform:translateY(-50%) rotate(180deg);line-height:16px;top:50%;cursor:pointer}.el-select .el-input .el-input__icon.is-show-close{transition:0s;width:16px;height:16px;font-size:14px;right:8px;text-align:center;transform:translateY(-50%) rotate(180deg);border-radius:100%;color:#bfcbd9}.el-select .el-input .el-input__icon.is-show-close:hover{color:#97a8be}.el-select .el-input .el-input__icon.is-reverse{transform:translateY(-50%)}.el-select .el-input.is-disabled .el-input__inner{cursor:not-allowed}.el-select .el-input.is-disabled .el-input__inner:hover{border-color:#d1dbe5}.el-select>.el-input{display:block}.el-select .el-tag__close{margin-top:-2px}.el-select .el-tag{height:24px;line-height:24px;box-sizing:border-box;margin:3px 0 3px 6px}.el-select__input{border:none;outline:none;padding:0;margin-left:10px;color:#666;font-size:14px;vertical-align:baseline;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:28px;background-color:transparent}.el-select__input.is-mini{height:14px}.el-select__close{cursor:pointer;position:absolute;top:8px;z-index:1000;right:25px;color:#bfcbd9;line-height:18px;font-size:12px}.el-select__close:hover{color:#97a8be}.el-select__tags{position:absolute;line-height:normal;white-space:normal;z-index:1;top:50%;transform:translateY(-50%)}.el-select__tag{display:inline-block;height:24px;line-height:24px;font-size:14px;border-radius:4px;color:#fff;background-color:#20a0ff}.el-select__tag .el-icon-close{font-size:12px}.el-table{position:relative;overflow:hidden;box-sizing:border-box;width:100%;max-width:100%;background-color:#fff;border:1px solid #dfe6ec;font-size:14px;color:#1f2d3d}.el-table .el-tooltip.cell{white-space:nowrap}.el-table td,.el-table th{height:40px;min-width:0;box-sizing:border-box;text-overflow:ellipsis;vertical-align:middle;position:relative}.el-table td.is-right,.el-table th.is-right{text-align:right}.el-table td.is-left,.el-table th.is-left{text-align:left}.el-table td.is-center,.el-table th.is-center{text-align:center}.el-table td,.el-table th.is-leaf{border-bottom:1px solid #dfe6ec}.el-table td.gutter,.el-table th.gutter{width:15px;border-right-width:0;border-bottom-width:0;padding:0}.el-table td.is-hidden>*,.el-table th.is-hidden>*{visibility:hidden}.el-table:before{left:0;bottom:0;width:100%;height:1px}.el-table:after,.el-table:before{content:"";position:absolute;background-color:#dfe6ec;z-index:1}.el-table:after{top:0;right:0;width:1px;height:100%}.el-table th{background-color:#eef1f6;text-align:left}.el-table th,.el-table th>div{white-space:nowrap;overflow:hidden}.el-table th>div{display:inline-block;padding-left:18px;padding-right:18px;line-height:40px;text-overflow:ellipsis}.el-table td>div,.el-table th>div{box-sizing:border-box}.el-table th.required>div:before{display:inline-block;content:"";width:8px;height:8px;border-radius:50%;background:#ff4d51;margin-right:5px;vertical-align:middle}.el-table th>.cell{position:relative;word-wrap:normal;text-overflow:ellipsis;display:inline-block;line-height:20px;vertical-align:middle;width:100%;box-sizing:border-box}.el-table th>.cell.highlight{color:#20a0ff}.el-table .caret-wrapper{position:relative;cursor:pointer;display:inline-block;vertical-align:middle;margin-left:5px;margin-top:-2px;width:16px;height:34px;overflow:visible;overflow:initial}.el-table .sort-caret{display:inline-block;width:0;height:0;border:0;content:"";position:absolute;left:3px;z-index:2}.el-table .sort-caret.ascending{top:11px;border-top:none;border-bottom:5px solid #97a8be}.el-table .sort-caret.ascending,.el-table .sort-caret.descending{border-right:5px solid transparent;border-left:5px solid transparent}.el-table .sort-caret.descending{bottom:11px;border-top:5px solid #97a8be;border-bottom:none}.el-table .ascending .sort-caret.ascending{border-bottom-color:#48576a}.el-table .descending .sort-caret.descending{border-top-color:#48576a}.el-table td.gutter{width:0}.el-table .cell{box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:normal;word-break:break-all;line-height:24px;padding-left:18px;padding-right:18px}.el-table tr input[type=checkbox]{margin:0}.el-table tr{background-color:#fff}.el-table .hidden-columns{visibility:hidden;position:absolute;z-index:-1}.el-table__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-table__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.el-table__expand-column .cell{padding:0;text-align:center}.el-table__expand-icon{position:relative;cursor:pointer;color:#666;font-size:12px;transition:transform .2s ease-in-out;height:40px}.el-table__expand-icon>.el-icon{position:absolute;left:50%;top:50%;margin-left:-5px;margin-top:-5px}.el-table__expand-icon--expanded{transform:rotate(90deg)}.el-table__expanded-cell{padding:20px 50px;background-color:#fbfdff;box-shadow:inset 0 2px 0 #f4f4f4}.el-table__expanded-cell:hover{background-color:#fbfdff!important}.el-table--fit{border-right:0;border-bottom:0}.el-table--fit td.gutter,.el-table--fit th.gutter{border-right-width:1px}.el-table--border td,.el-table--border th{border-right:1px solid #dfe6ec}.el-table--border th{border-bottom:1px solid #dfe6ec}.el-table__fixed,.el-table__fixed-right{position:absolute;top:0;left:0;box-shadow:1px 0 8px #d3d4d6;overflow-x:hidden}.el-table__fixed-right:before,.el-table__fixed:before{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background-color:#dfe6ec;z-index:4}.el-table__fixed-right-patch{position:absolute;top:-1px;right:0;background-color:#eef1f6;border-bottom:1px solid #dfe6ec}.el-table__fixed-right{top:0;left:auto;right:0;box-shadow:-1px 0 8px #d3d4d6}.el-table__fixed-right .el-table__fixed-body-wrapper,.el-table__fixed-right .el-table__fixed-header-wrapper{left:auto;right:0}.el-table__fixed-header-wrapper{position:absolute;left:0;top:0;z-index:3}.el-table__fixed-header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__fixed-body-wrapper{position:absolute;left:0;top:37px;overflow:hidden;z-index:3}.el-table__body-wrapper,.el-table__header-wrapper{width:100%}.el-table__body,.el-table__header{table-layout:fixed}.el-table__header-wrapper{overflow:hidden}.el-table__header-wrapper thead div{background-color:#eef1f6;color:#1f2d3d}.el-table__body-wrapper{overflow:auto;position:relative}.el-table--striped .el-table__body tr:nth-child(2n) td{background:#fafafa;background-clip:padding-box}.el-table--striped .el-table__body tr:nth-child(2n).current-row td{background:#edf7ff}.el-table__body tr.hover-row>td{background-color:#eef1f6}.el-table__body tr.current-row>td{background:#edf7ff}.el-table__column-resize-proxy{position:absolute;left:200px;top:0;bottom:0;width:0;border-left:1px solid #dfe6ec;z-index:10}.el-table__column-filter-trigger{display:inline-block;line-height:34px;margin-left:5px;cursor:pointer}.el-table__column-filter-trigger i{color:#97a8be}.el-table--enable-row-transition .el-table__body td{transition:background-color .25s ease}.el-table--enable-row-hover .el-table__body tr:hover>td{background-color:#eef1f6;background-clip:padding-box}.el-table--fluid-height .el-table__fixed,.el-table--fluid-height .el-table__fixed-right{bottom:0;overflow:hidden}.el-checkbox{color:#1f2d3d;position:relative;cursor:pointer;display:inline-block;white-space:nowrap;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}.el-checkbox+.el-checkbox{margin-left:15px}.el-checkbox__input{white-space:nowrap;cursor:pointer;outline:none;display:inline-block;line-height:1;position:relative;vertical-align:middle}.el-checkbox__input.is-indeterminate .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-indeterminate .el-checkbox__inner:before{content:"";position:absolute;display:block;border:1px solid #fff;margin-top:-1px;left:3px;right:3px;top:50%}.el-checkbox__input.is-indeterminate .el-checkbox__inner:after{display:none}.el-checkbox__input.is-focus .el-checkbox__inner{border-color:#20a0ff}.el-checkbox__input.is-checked .el-checkbox__inner{background-color:#20a0ff;border-color:#0190fe}.el-checkbox__input.is-checked .el-checkbox__inner:after{transform:rotate(45deg) scaleY(1)}.el-checkbox__input.is-disabled .el-checkbox__inner{background-color:#eef1f6;border-color:#d1dbe5;cursor:not-allowed}.el-checkbox__input.is-disabled .el-checkbox__inner:after{cursor:not-allowed;border-color:#eef1f6}.el-checkbox__input.is-disabled .el-checkbox__inner+.el-checkbox__label{cursor:not-allowed}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-checked .el-checkbox__inner:after{border-color:#fff}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner{background-color:#d1dbe5;border-color:#d1dbe5}.el-checkbox__input.is-disabled.is-indeterminate .el-checkbox__inner:before{border-color:#fff}.el-checkbox__input.is-disabled+.el-checkbox__label{color:#bbb;cursor:not-allowed}.el-checkbox__inner{display:inline-block;position:relative;border:1px solid #bfcbd9;border-radius:4px;box-sizing:border-box;width:18px;height:18px;background-color:#fff;z-index:1;transition:border-color .25s cubic-bezier(.71,-.46,.29,1.46),background-color .25s cubic-bezier(.71,-.46,.29,1.46)}.el-checkbox__inner:hover{border-color:#20a0ff}.el-checkbox__inner:after{box-sizing:content-box;content:"";border:2px solid #fff;border-left:0;border-top:0;height:8px;left:5px;position:absolute;top:1px;transform:rotate(45deg) scaleY(0);width:4px;transition:transform .15s cubic-bezier(.71,-.46,.88,.6) .05s;transform-origin:center}.el-checkbox__original{opacity:0;outline:none;position:absolute;margin:0;visibility:hidden;left:-999px}.el-checkbox__label{font-size:14px;padding-left:5px}.el-table-column--selection .cell{padding-left:14px;padding-right:14px}.el-table-filter{border:1px solid #d1dbe5;border-radius:2px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12);box-sizing:border-box;margin:2px 0}.el-table-filter__list{padding:5px 0;margin:0;list-style:none;min-width:100px}.el-table-filter__list-item{line-height:36px;padding:0 10px;cursor:pointer;font-size:14px}.el-table-filter__list-item:hover{background-color:#e4e8f1;color:#48576a}.el-table-filter__list-item.is-active{background-color:#20a0ff;color:#fff}.el-table-filter__content{min-width:100px}.el-table-filter__bottom{border-top:1px solid #d1dbe5;padding:8px}.el-table-filter__bottom button{background:transparent;border:none;color:#8391a5;cursor:pointer;font-size:14px;padding:0 3px}.el-table-filter__bottom button:hover{color:#20a0ff}.el-table-filter__bottom button:focus{outline:none}.el-table-filter__bottom button.is-disabled{color:#bfcbd9;cursor:not-allowed}.el-table-filter__checkbox-group{padding:10px}.el-table-filter__checkbox-group .el-checkbox{display:block;margin-bottom:8px;margin-left:5px}.el-table-filter__checkbox-group .el-checkbox:last-child{margin-bottom:0}.el-date-table{font-size:12px;min-width:224px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-date-table td{width:32px;height:32px;box-sizing:border-box;text-align:center;cursor:pointer}.el-date-table td.next-month,.el-date-table td.prev-month{color:#ddd}.el-date-table td.today{color:#20a0ff;position:relative}.el-date-table td.today:before{content:" ";position:absolute;top:0;right:0;width:0;height:0;border-top:.5em solid #20a0ff;border-left:.5em solid transparent}.el-date-table td.available:hover{background-color:#e4e8f1}.el-date-table td.in-range{background-color:#d2ecff}.el-date-table td.in-range:hover{background-color:#afddff}.el-date-table td.current:not(.disabled),.el-date-table td.end-date,.el-date-table td.start-date{background-color:#20a0ff!important;color:#fff}.el-date-table td.disabled{background-color:#f4f4f4;opacity:1;cursor:not-allowed;color:#ccc}.el-date-table td.week{font-size:80%;color:#8391a5}.el-date-table th{padding:5px;color:#8391a5;font-weight:400}.el-date-table.is-week-mode .el-date-table__row:hover{background-color:#e4e8f1}.el-date-table.is-week-mode .el-date-table__row.current{background-color:#d2ecff}.el-month-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-month-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-month-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-month-table td .cell:hover{background-color:#e4e8f1}.el-month-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-month-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-year-table{font-size:12px;margin:-1px;border-collapse:collapse}.el-year-table .el-icon{color:#97a8be}.el-year-table td{text-align:center;padding:20px 3px;cursor:pointer}.el-year-table td .cell{width:48px;height:32px;display:block;line-height:32px;color:#48576a}.el-year-table td .cell:hover{background-color:#e4e8f1}.el-year-table td.disabled .cell{background-color:#f4f4f4;cursor:not-allowed;color:#ccc}.el-year-table td.current:not(.disabled) .cell{background-color:#20a0ff!important;color:#fff}.el-date-range-picker{min-width:520px}.el-date-range-picker table{table-layout:fixed;width:100%}.el-date-range-picker .el-picker-panel__body{min-width:513px}.el-date-range-picker .el-picker-panel__content{margin:0}.el-date-range-picker.has-sidebar.has-time{min-width:766px}.el-date-range-picker.has-sidebar{min-width:620px}.el-date-range-picker.has-time{min-width:660px}.el-date-range-picker__header{position:relative;text-align:center;height:28px}.el-date-range-picker__header button{float:left}.el-date-range-picker__header div{font-size:14px;margin-right:50px}.el-date-range-picker__content{float:left;width:50%;box-sizing:border-box;margin:0;padding:16px}.el-date-range-picker__content.is-right .el-date-range-picker__header button{float:right}.el-date-range-picker__content.is-right .el-date-range-picker__header div{margin-left:50px;margin-right:50px}.el-date-range-picker__content.is-left{border-right:1px solid #e4e4e4}.el-date-range-picker__editors-wrap{box-sizing:border-box;display:table-cell}.el-date-range-picker__editors-wrap.is-right{text-align:right}.el-date-range-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-range-picker__time-header>.el-icon-arrow-right{font-size:20px;vertical-align:middle;display:table-cell;color:#97a8be}.el-date-range-picker__time-picker-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-range-picker__time-picker-wrap .el-picker-panel{position:absolute;top:13px;right:0;z-index:1;background:#fff}.el-time-range-picker{min-width:354px;overflow:visible}.el-time-range-picker__content{position:relative;text-align:center;padding:10px}.el-time-range-picker__cell{box-sizing:border-box;margin:0;padding:4px 7px 7px;width:50%;display:inline-block}.el-time-range-picker__header{margin-bottom:5px;text-align:center;font-size:14px}.el-picker-panel,.el-time-range-picker__body{border-radius:2px;border:1px solid #d1dbe5}.el-picker-panel{color:#48576a;box-shadow:0 2px 6px #ccc;background:#fff;line-height:20px;margin:5px 0}.el-picker-panel__body-wrapper:after,.el-picker-panel__body:after{content:"";display:table;clear:both}.el-picker-panel__content{position:relative;margin:15px}.el-picker-panel__footer{border-top:1px solid #e4e4e4;padding:4px;text-align:right;background-color:#fff;position:relative}.el-picker-panel__shortcut{display:block;width:100%;border:0;background-color:transparent;line-height:28px;font-size:14px;color:#48576a;padding-left:12px;text-align:left;outline:none;cursor:pointer}.el-picker-panel__shortcut:hover{background-color:#e4e8f1}.el-picker-panel__shortcut.active{background-color:#e6f1fe;color:#20a0ff}.el-picker-panel__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-picker-panel__btn[disabled]{color:#ccc;cursor:not-allowed}.el-picker-panel__icon-btn{font-size:12px;color:#97a8be;border:0;background:transparent;cursor:pointer;outline:none;margin-top:3px}.el-picker-panel__icon-btn:hover{color:#20a0ff}.el-picker-panel__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-picker-panel [slot=sidebar],.el-picker-panel__sidebar{position:absolute;top:0;bottom:0;width:110px;border-right:1px solid #e4e4e4;box-sizing:border-box;padding-top:6px;background-color:#fbfdff}.el-picker-panel [slot=sidebar]+.el-picker-panel__body,.el-picker-panel__sidebar+.el-picker-panel__body{margin-left:110px}.el-date-picker{min-width:254px}.el-date-picker .el-picker-panel__content{min-width:224px}.el-date-picker table{table-layout:fixed;width:100%}.el-date-picker.has-sidebar.has-time{min-width:434px}.el-date-picker.has-sidebar{min-width:370px}.el-date-picker.has-time{min-width:324px}.el-date-picker__editor-wrap{position:relative;display:table-cell;padding:0 5px}.el-date-picker__time-header{position:relative;border-bottom:1px solid #e4e4e4;font-size:12px;padding:8px 5px 5px;display:table;width:100%;box-sizing:border-box}.el-date-picker__header{margin:12px;text-align:center}.el-date-picker__header-label{font-size:14px;padding:0 5px;line-height:22px;text-align:center;cursor:pointer}.el-date-picker__header-label.active,.el-date-picker__header-label:hover{color:#20a0ff}.el-date-picker__prev-btn{float:left}.el-date-picker__next-btn{float:right}.el-date-picker__time-wrap{padding:10px;text-align:center}.el-date-picker__time-label{float:left;cursor:pointer;line-height:30px;margin-left:10px}.time-select{margin:5px 0;min-width:0}.time-select .el-picker-panel__content{max-height:200px;margin:0}.time-select-item{padding:8px 10px;font-size:14px}.time-select-item.selected:not(.disabled){background-color:#20a0ff;color:#fff}.time-select-item.selected:not(.disabled):hover{background-color:#20a0ff}.time-select-item.disabled{color:#d1dbe5;cursor:not-allowed}.time-select-item:hover{background-color:#e4e8f1;cursor:pointer}.fade-in-linear-enter-active,.fade-in-linear-leave-active{transition:opacity .2s linear}.fade-in-linear-enter,.fade-in-linear-leave,.fade-in-linear-leave-active{opacity:0}.el-fade-in-enter-active,.el-fade-in-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-fade-in-enter,.el-fade-in-leave-active{opacity:0}.el-zoom-in-center-enter-active,.el-zoom-in-center-leave-active{transition:all .3s cubic-bezier(.55,0,.1,1)}.el-zoom-in-center-enter,.el-zoom-in-center-leave-active{opacity:0;transform:scaleX(0)}.el-zoom-in-top-enter-active,.el-zoom-in-top-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transform-origin:center top}.el-zoom-in-top-enter,.el-zoom-in-top-leave-active{opacity:0;transform:scaleY(0)}.el-zoom-in-bottom-enter-active,.el-zoom-in-bottom-leave-active{opacity:1;transform:scaleY(1);transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;transform-origin:center bottom}.el-zoom-in-bottom-enter,.el-zoom-in-bottom-leave-active{opacity:0;transform:scaleY(0)}.collapse-transition{transition:height .3s ease-in-out,padding-top .3s ease-in-out,padding-bottom .3s ease-in-out}.list-enter-active,.list-leave-active{transition:all 1s}.list-enter,.list-leave-active{opacity:0;transform:translateY(-30px)}.el-date-editor{position:relative;display:inline-block}.el-date-editor .el-picker-panel{position:absolute;min-width:180px;box-sizing:border-box;box-shadow:0 2px 6px #ccc;background:#fff;z-index:10;top:41px}.el-date-editor.el-input{width:193px}.el-date-editor--daterange.el-input{width:220px}.el-date-editor--datetimerange.el-input{width:350px}.el-time-spinner.has-seconds .el-time-spinner__wrapper{width:33%}.el-time-spinner.has-seconds .el-time-spinner__wrapper .el-scrollbar__wrap:not(.el-scrollbar__wrap--hidden-default){padding-bottom:15px}.el-time-spinner.has-seconds .el-time-spinner__wrapper:nth-child(2){margin-left:1%}.el-time-spinner__wrapper{max-height:190px;overflow:auto;display:inline-block;width:50%;vertical-align:top;position:relative}.el-time-spinner__list{padding:0;margin:0;list-style:none;text-align:center}.el-time-spinner__list:after,.el-time-spinner__list:before{content:"";display:block;width:100%;height:80px}.el-time-spinner__item{height:32px;line-height:32px;font-size:12px}.el-time-spinner__item:hover:not(.disabled):not(.active){background:#e4e8f1;cursor:pointer}.el-time-spinner__item.active:not(.disabled){color:#fff}.el-time-spinner__item.disabled{color:#d1dbe5;cursor:not-allowed}.el-time-panel{margin:5px 0;border:1px solid #d1dbe5;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);border-radius:2px;position:absolute;width:180px;left:0;z-index:1000;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-time-panel__content{font-size:0;position:relative;overflow:hidden}.el-time-panel__content:after,.el-time-panel__content:before{content:":";top:50%;color:#fff;position:absolute;font-size:14px;margin-top:-15px;line-height:16px;background-color:#20a0ff;height:32px;z-index:-1;left:0;right:0;box-sizing:border-box;padding-top:6px;text-align:left}.el-time-panel__content:after{left:50%;margin-left:-2px}.el-time-panel__content:before{padding-left:50%;margin-right:-2px}.el-time-panel__content.has-seconds:after{left:66.66667%}.el-time-panel__content.has-seconds:before{padding-left:33.33333%}.el-time-panel__footer{border-top:1px solid #e4e4e4;padding:4px;height:36px;line-height:25px;text-align:right;box-sizing:border-box}.el-time-panel__btn{border:none;line-height:28px;padding:0 5px;margin:0 5px;cursor:pointer;background-color:transparent;outline:none;font-size:12px;color:#8391a5}.el-time-panel__btn.confirm{font-weight:800;color:#20a0ff}.el-popover{position:absolute;background:#fff;min-width:150px;border-radius:2px;border:1px solid #d1dbe5;padding:10px;z-index:2000;font-size:12px;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-popover .popper__arrow,.el-popover .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-popover .popper__arrow{border-width:6px}.el-popover .popper__arrow:after{content:" ";border-width:6px}.el-popover[x-placement^=top]{margin-bottom:12px}.el-popover[x-placement^=top] .popper__arrow{bottom:-6px;left:50%;margin-right:3px;border-top-color:#d1dbe5;border-bottom-width:0}.el-popover[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-6px;border-top-color:#fff;border-bottom-width:0}.el-popover[x-placement^=bottom]{margin-top:12px}.el-popover[x-placement^=bottom] .popper__arrow{top:-6px;left:50%;margin-right:3px;border-top-width:0;border-bottom-color:#d1dbe5}.el-popover[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-6px;border-top-width:0;border-bottom-color:#fff}.el-popover[x-placement^=right]{margin-left:12px}.el-popover[x-placement^=right] .popper__arrow{top:50%;left:-6px;margin-bottom:3px;border-right-color:#d1dbe5;border-left-width:0}.el-popover[x-placement^=right] .popper__arrow:after{bottom:-6px;left:1px;border-right-color:#fff;border-left-width:0}.el-popover[x-placement^=left]{margin-right:12px}.el-popover[x-placement^=left] .popper__arrow{top:50%;right:-6px;margin-bottom:3px;border-right-width:0;border-left-color:#d1dbe5}.el-popover[x-placement^=left] .popper__arrow:after{right:1px;bottom:-6px;margin-left:-6px;border-right-width:0;border-left-color:#fff}.el-popover__title{color:#1f2d3d;font-size:13px;line-height:1;margin-bottom:9px}.v-modal-enter{animation:v-modal-in .2s ease}.v-modal-leave{animation:v-modal-out .2s ease forwards}@keyframes v-modal-in{0%{opacity:0}}@keyframes v-modal-out{to{opacity:0}}.v-modal{position:fixed;left:0;top:0;width:100%;height:100%;opacity:.5;background:#000}.el-button{display:inline-block;line-height:1;white-space:nowrap;cursor:pointer;background:#fff;border:1px solid #bfcbd9;color:#1f2d3d;-webkit-appearance:none;text-align:center;box-sizing:border-box;outline:none;margin:0;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;padding:10px 15px;font-size:14px;border-radius:4px}.el-button+.el-button{margin-left:10px}.el-button:focus,.el-button:hover{color:#20a0ff;border-color:#20a0ff}.el-button:active{color:#1d90e6;border-color:#1d90e6;outline:none}.el-button::-moz-focus-inner{border:0}.el-button [class*=el-icon-]+span{margin-left:5px}.el-button.is-loading{position:relative;pointer-events:none}.el-button.is-loading:before{pointer-events:none;content:"";position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border-radius:inherit;background-color:hsla(0,0%,100%,.35)}.el-button.is-disabled,.el-button.is-disabled:focus,.el-button.is-disabled:hover{color:#bfcbd9;cursor:not-allowed;background-image:none;background-color:#eef1f6;border-color:#d1dbe5}.el-button.is-disabled.el-button--text{background-color:transparent}.el-button.is-disabled.is-plain,.el-button.is-disabled.is-plain:focus,.el-button.is-disabled.is-plain:hover{background-color:#fff;border-color:#d1dbe5;color:#bfcbd9}.el-button.is-active{color:#1d90e6;border-color:#1d90e6}.el-button.is-plain:focus,.el-button.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--primary{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-button--primary:focus,.el-button--primary:hover{background:#4db3ff;border-color:#4db3ff;color:#fff}.el-button--primary:active{outline:none}.el-button--primary.is-active,.el-button--primary:active{background:#1d90e6;border-color:#1d90e6;color:#fff}.el-button--primary.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--primary.is-plain:focus,.el-button--primary.is-plain:hover{background:#fff;border-color:#20a0ff;color:#20a0ff}.el-button--primary.is-plain:active{background:#fff;border-color:#1d90e6;color:#1d90e6;outline:none}.el-button--success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-button--success:focus,.el-button--success:hover{background:#42d885;border-color:#42d885;color:#fff}.el-button--success:active{outline:none}.el-button--success.is-active,.el-button--success:active{background:#11b95c;border-color:#11b95c;color:#fff}.el-button--success.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--success.is-plain:focus,.el-button--success.is-plain:hover{background:#fff;border-color:#13ce66;color:#13ce66}.el-button--success.is-plain:active{background:#fff;border-color:#11b95c;color:#11b95c;outline:none}.el-button--warning{color:#fff;background-color:#f7ba2a;border-color:#f7ba2a}.el-button--warning:focus,.el-button--warning:hover{background:#f9c855;border-color:#f9c855;color:#fff}.el-button--warning:active{outline:none}.el-button--warning.is-active,.el-button--warning:active{background:#dea726;border-color:#dea726;color:#fff}.el-button--warning.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--warning.is-plain:focus,.el-button--warning.is-plain:hover{background:#fff;border-color:#f7ba2a;color:#f7ba2a}.el-button--warning.is-plain:active{background:#fff;border-color:#dea726;color:#dea726;outline:none}.el-button--danger{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-button--danger:focus,.el-button--danger:hover{background:#ff6d6d;border-color:#ff6d6d;color:#fff}.el-button--danger:active{outline:none}.el-button--danger.is-active,.el-button--danger:active{background:#e64242;border-color:#e64242;color:#fff}.el-button--danger.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--danger.is-plain:focus,.el-button--danger.is-plain:hover{background:#fff;border-color:#ff4949;color:#ff4949}.el-button--danger.is-plain:active{background:#fff;border-color:#e64242;color:#e64242;outline:none}.el-button--info{color:#fff;background-color:#50bfff;border-color:#50bfff}.el-button--info:focus,.el-button--info:hover{background:#73ccff;border-color:#73ccff;color:#fff}.el-button--info:active{outline:none}.el-button--info.is-active,.el-button--info:active{background:#48ace6;border-color:#48ace6;color:#fff}.el-button--info.is-plain{background:#fff;border:1px solid #bfcbd9;color:#1f2d3d}.el-button--info.is-plain:focus,.el-button--info.is-plain:hover{background:#fff;border-color:#50bfff;color:#50bfff}.el-button--info.is-plain:active{background:#fff;border-color:#48ace6;color:#48ace6;outline:none}.el-button--large{padding:11px 19px;font-size:16px;border-radius:4px}.el-button--small{padding:7px 9px;font-size:12px;border-radius:4px}.el-button--mini{padding:4px;font-size:12px;border-radius:4px}.el-button--text{border:none;color:#20a0ff;background:transparent;padding-left:0;padding-right:0}.el-button--text:focus,.el-button--text:hover{color:#4db3ff}.el-button--text:active{color:#1d90e6}.el-button-group{display:inline-block;vertical-align:middle}.el-button-group .el-button--primary:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--primary:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--success:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--warning:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--danger:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:first-child{border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:last-child{border-left-color:hsla(0,0%,100%,.5)}.el-button-group .el-button--info:not(:first-child):not(:last-child){border-left-color:hsla(0,0%,100%,.5);border-right-color:hsla(0,0%,100%,.5)}.el-button-group .el-button{float:left;position:relative}.el-button-group .el-button+.el-button{margin-left:0}.el-button-group .el-button:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.el-button-group .el-button:last-child{border-top-left-radius:0;border-bottom-left-radius:0}.el-button-group .el-button:not(:first-child):not(:last-child){border-radius:0}.el-button-group .el-button:not(:last-child){margin-right:-1px}.el-button-group .el-button.is-active,.el-button-group .el-button:active,.el-button-group .el-button:focus,.el-button-group .el-button:hover{z-index:1}.el-message-box{text-align:left;display:inline-block;vertical-align:middle;background-color:#fff;width:420px;border-radius:3px;font-size:16px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden}.el-message-box__wrapper{position:fixed;top:0;bottom:0;left:0;right:0;text-align:center}.el-message-box__wrapper:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle}.el-message-box__header{position:relative;padding:20px 20px 0}.el-message-box__content{padding:30px 20px;color:#48576a;font-size:14px;position:relative}.el-message-box__close{display:inline-block;position:absolute;top:19px;right:20px;color:#999;cursor:pointer;line-height:20px;text-align:center}.el-message-box__close:hover{color:#20a0ff}.el-message-box__input{padding-top:15px}.el-message-box__input input.invalid,.el-message-box__input input.invalid:focus{border-color:#ff4949}.el-message-box__errormsg{color:#ff4949;font-size:12px;min-height:18px;margin-top:2px}.el-message-box__title{padding-left:0;margin-bottom:0;font-size:16px;font-weight:700;height:18px;color:#333}.el-message-box__message{margin:0}.el-message-box__message p{margin:0;line-height:1.4}.el-message-box__btns{padding:10px 20px 15px;text-align:right}.el-message-box__btns button:nth-child(2){margin-left:10px}.el-message-box__btns-reverse{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.el-message-box__status{position:absolute;top:50%;transform:translateY(-50%);font-size:36px!important}.el-message-box__status.el-icon-circle-check{color:#13ce66}.el-message-box__status.el-icon-information{color:#50bfff}.el-message-box__status.el-icon-warning{color:#f7ba2a}.el-message-box__status.el-icon-circle-cross{color:#ff4949}.msgbox-fade-enter-active{animation:msgbox-fade-in .3s}.msgbox-fade-leave-active{animation:msgbox-fade-out .3s}@keyframes msgbox-fade-in{0%{transform:translate3d(0,-20px,0);opacity:0}to{transform:translateZ(0);opacity:1}}@keyframes msgbox-fade-out{0%{transform:translateZ(0);opacity:1}to{transform:translate3d(0,-20px,0);opacity:0}}.el-breadcrumb{font-size:13px;line-height:1}.el-breadcrumb__separator{margin:0 8px;color:#bfcbd9}.el-breadcrumb__item{float:left}.el-breadcrumb__item:last-child .el-breadcrumb__item__inner,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner:hover,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a,.el-breadcrumb__item:last-child .el-breadcrumb__item__inner a:hover{color:#97a8be;cursor:text}.el-breadcrumb__item:last-child .el-breadcrumb__separator{display:none}.el-breadcrumb__item__inner,.el-breadcrumb__item__inner a{transition:color .15s linear;color:#48576a}.el-breadcrumb__item__inner:hover,.el-breadcrumb__item__inner a:hover{color:#20a0ff;cursor:pointer}.el-form--label-left .el-form-item__label{text-align:left}.el-form--label-top .el-form-item__label{float:none;display:inline-block;text-align:left;padding:0 0 10px}.el-form--inline .el-form-item{display:inline-block;margin-right:10px;vertical-align:top}.el-form--inline .el-form-item__label{float:none;display:inline-block}.el-form--inline .el-form-item__content{display:inline-block;vertical-align:top}.el-form--inline.el-form--label-top .el-form-item__content{display:block}.el-form-item{margin-bottom:22px}.el-form-item .el-form-item{margin-bottom:0}.el-form-item .el-form-item .el-form-item__content{margin-left:0!important}.el-form-item.is-error .el-input-group__append .el-input__inner,.el-form-item.is-error .el-input-group__prepend .el-input__inner,.el-form-item.is-error .el-input__inner{border-color:transparent}.el-form-item.is-error .el-input__inner,.el-form-item.is-error .el-textarea__inner{border-color:#ff4949}.el-form-item.is-required .el-form-item__label:before{content:"*";color:#ff4949;margin-right:4px}.el-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:14px;color:#48576a;line-height:1;padding:11px 12px 11px 0;box-sizing:border-box}.el-form-item__content{line-height:36px;position:relative;font-size:14px}.el-form-item__error{color:#ff4949;font-size:12px;line-height:1;padding-top:4px;position:absolute;top:100%;left:0}.el-tabs__header{border-bottom:1px solid #d1dbe5;padding:0;position:relative;margin:0 0 15px}.el-tabs__active-bar{position:absolute;bottom:0;left:0;height:3px;background-color:#20a0ff;z-index:1;transition:transform .3s cubic-bezier(.645,.045,.355,1);list-style:none}.el-tabs__new-tab{float:right;border:1px solid #d3dce6;height:18px;width:18px;line-height:18px;margin:12px 0 9px 10px;border-radius:3px;text-align:center;font-size:12px;color:#d3dce6;cursor:pointer;transition:all .15s}.el-tabs__new-tab .el-icon-plus{transform:scale(.8)}.el-tabs__new-tab:hover{color:#20a0ff}.el-tabs__nav-wrap{overflow:hidden;margin-bottom:-1px;position:relative}.el-tabs__nav-wrap.is-scrollable{padding:0 15px}.el-tabs__nav-scroll{overflow:hidden}.el-tabs__nav-next,.el-tabs__nav-prev{position:absolute;cursor:pointer;line-height:44px;font-size:12px;color:#8391a5}.el-tabs__nav-next{right:0}.el-tabs__nav-prev{left:0}.el-tabs__nav{white-space:nowrap;position:relative;transition:transform .3s;float:left}.el-tabs__item{padding:0 16px;height:42px;box-sizing:border-box;line-height:42px;display:inline-block;list-style:none;font-size:14px;color:#8391a5;position:relative}.el-tabs__item .el-icon-close{border-radius:50%;text-align:center;transition:all .3s cubic-bezier(.645,.045,.355,1);margin-left:5px}.el-tabs__item .el-icon-close:before{transform:scale(.7);display:inline-block}.el-tabs__item .el-icon-close:hover{background-color:#97a8be;color:#fff}.el-tabs__item:hover{color:#1f2d3d;cursor:pointer}.el-tabs__item.is-disabled{color:#bbb;cursor:default}.el-tabs__item.is-active{color:#20a0ff}.el-tabs__content{overflow:hidden;position:relative}.el-tabs--card>.el-tabs__header .el-tabs__active-bar{display:none}.el-tabs--card>.el-tabs__header .el-tabs__item .el-icon-close{position:relative;font-size:12px;width:0;height:14px;vertical-align:middle;line-height:15px;overflow:hidden;top:-1px;right:-2px;transform-origin:100% 50%}.el-tabs--card>.el-tabs__header .el-tabs__item{border:1px solid transparent;transition:all .3s cubic-bezier(.645,.045,.355,1)}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover{padding-right:9px;padding-left:9px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-closable:hover .el-icon-close{width:14px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active{border:1px solid #d1dbe5;border-bottom-color:#fff;border-radius:4px 4px 0 0}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable{padding-right:16px;padding-left:16px}.el-tabs--card>.el-tabs__header .el-tabs__item.is-active.is-closable .el-icon-close{width:14px}.el-tabs--border-card{background:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-tabs--border-card>.el-tabs__content{padding:15px}.el-tabs--border-card>.el-tabs__header{background-color:#eef1f6;margin:0}.el-tabs--border-card>.el-tabs__header .el-tabs__item{transition:all .3s cubic-bezier(.645,.045,.355,1);border:1px solid transparent;border-top:0;margin-right:-1px;margin-left:-1px}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{background-color:#fff;border-right-color:#d1dbe5;border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:first-child{border-left-color:#d1dbe5}.el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active:last-child{border-right-color:#d1dbe5}.slideInLeft-transition,.slideInRight-transition{display:inline-block}.slideInRight-enter{animation:slideInRight-enter .3s}.slideInRight-leave{position:absolute;left:0;right:0;animation:slideInRight-leave .3s}.slideInLeft-enter{animation:slideInLeft-enter .3s}.slideInLeft-leave{position:absolute;left:0;right:0;animation:slideInLeft-leave .3s}@keyframes slideInRight-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInRight-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(100%);opacity:0}}@keyframes slideInLeft-enter{0%{opacity:0;transform-origin:0 0;transform:translateX(-100%)}to{opacity:1;transform-origin:0 0;transform:translateX(0)}}@keyframes slideInLeft-leave{0%{transform-origin:0 0;transform:translateX(0);opacity:1}to{transform-origin:0 0;transform:translateX(-100%);opacity:0}}.el-tag{background-color:#8391a5;display:inline-block;padding:0 5px;height:24px;line-height:22px;font-size:12px;color:#fff;border-radius:4px;box-sizing:border-box;border:1px solid transparent;white-space:nowrap}.el-tag .el-icon-close{border-radius:50%;text-align:center;position:relative;cursor:pointer;font-size:12px;transform:scale(.75);height:18px;width:18px;line-height:18px;vertical-align:middle;top:-1px;right:-2px}.el-tag .el-icon-close:hover{background-color:#fff;color:#8391a5}.el-tag--gray{background-color:#e4e8f1;border-color:#e4e8f1;color:#48576a}.el-tag--gray .el-tag__close:hover{background-color:#48576a;color:#fff}.el-tag--gray.is-hit{border-color:#48576a}.el-tag--primary{background-color:rgba(32,160,255,.1);border-color:rgba(32,160,255,.2);color:#20a0ff}.el-tag--primary .el-tag__close:hover{background-color:#20a0ff;color:#fff}.el-tag--primary.is-hit{border-color:#20a0ff}.el-tag--success{background-color:rgba(18,206,102,.1);border-color:rgba(18,206,102,.2);color:#13ce66}.el-tag--success .el-tag__close:hover{background-color:#13ce66;color:#fff}.el-tag--success.is-hit{border-color:#13ce66}.el-tag--warning{background-color:rgba(247,186,41,.1);border-color:rgba(247,186,41,.2);color:#f7ba2a}.el-tag--warning .el-tag__close:hover{background-color:#f7ba2a;color:#fff}.el-tag--warning.is-hit{border-color:#f7ba2a}.el-tag--danger{background-color:rgba(255,73,73,.1);border-color:rgba(255,73,73,.2);color:#ff4949}.el-tag--danger .el-tag__close:hover{background-color:#ff4949;color:#fff}.el-tag--danger.is-hit{border-color:#ff4949}.el-tree{cursor:default;background:#fff;border:1px solid #d1dbe5}.el-tree__empty-block{position:relative;min-height:60px;text-align:center;width:100%;height:100%}.el-tree__empty-text{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#5e7382}.el-tree-node{white-space:nowrap}.el-tree-node>.el-tree-node__children{overflow:hidden;background-color:transparent}.el-tree-node.is-expanded>.el-tree-node__children{display:block}.el-tree-node__content{line-height:36px;height:36px;cursor:pointer}.el-tree-node__content>.el-checkbox,.el-tree-node__content>.el-tree-node__expand-icon{margin-right:8px}.el-tree-node__content>.el-checkbox{vertical-align:middle}.el-tree-node__content:hover{background:#e4e8f1}.el-tree-node__expand-icon{display:inline-block;cursor:pointer;width:0;height:0;vertical-align:middle;margin-left:10px;border:6px solid transparent;border-right-width:0;border-left-color:#97a8be;border-left-width:7px;transform:rotate(0deg);transition:transform .3s ease-in-out}.el-tree-node__expand-icon:hover{border-left-color:#999}.el-tree-node__expand-icon.expanded{transform:rotate(90deg)}.el-tree-node__expand-icon.is-leaf{border-color:transparent;cursor:default}.el-tree-node__label,.el-tree-node__loading-icon{font-size:14px;vertical-align:middle;display:inline-block}.el-tree-node__loading-icon{margin-right:4px;color:#97a8be}.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content{background-color:#edf7ff}.el-alert{width:100%;padding:8px 16px;margin:0;box-sizing:border-box;border-radius:4px;position:relative;background-color:#fff;overflow:hidden;color:#fff;opacity:1;display:table;transition:opacity .2s}.el-alert .el-alert__description{color:#fff;font-size:12px;margin:5px 0 0}.el-alert--success{background-color:#13ce66}.el-alert--info{background-color:#50bfff}.el-alert--warning{background-color:#f7ba2a}.el-alert--error{background-color:#ff4949}.el-alert__content{display:table-cell;padding:0 8px}.el-alert__icon{font-size:16px;width:16px;display:table-cell;color:#fff;vertical-align:middle}.el-alert__icon.is-big{font-size:28px;width:28px}.el-alert__title{font-size:13px;line-height:18px}.el-alert__title.is-bold{font-weight:700}.el-alert__closebtn{font-size:12px;color:#fff;opacity:1;top:12px;right:15px;position:absolute;cursor:pointer}.el-alert__closebtn.is-customed{font-style:normal;font-size:13px;top:9px}.el-alert-fade-enter,.el-alert-fade-leave-active{opacity:0}.el-notification{width:330px;padding:20px;box-sizing:border-box;border-radius:2px;position:fixed;right:16px;background-color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);transition:opacity .3s,transform .3s,right .3s,top .4s;overflow:hidden}.el-notification .el-icon-circle-check{color:#13ce66}.el-notification .el-icon-circle-cross{color:#ff4949}.el-notification .el-icon-information{color:#50bfff}.el-notification .el-icon-warning{color:#f7ba2a}.el-notification__group{margin-left:0}.el-notification__group.is-with-icon{margin-left:55px}.el-notification__title{font-weight:400;font-size:16px;color:#1f2d3d;margin:0}.el-notification__content{font-size:14px;line-height:21px;margin:10px 0 0;color:#8391a5;text-align:justify}.el-notification__icon{width:40px;height:40px;font-size:40px;float:left;position:relative;top:3px}.el-notification__closeBtn{top:20px;right:20px;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-notification__closeBtn:hover{color:#97a8be}.el-notification-fade-enter{transform:translateX(100%);right:0}.el-notification-fade-leave-active{opacity:0}.el-input-number{display:inline-block;overflow:hidden;width:180px;position:relative}.el-input-number .el-input{display:block}.el-input-number .el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding-right:82px}.el-input-number.is-without-controls .el-input__inner{padding-right:10px}.el-input-number.is-disabled .el-input-number__decrease,.el-input-number.is-disabled .el-input-number__increase{border-color:#d1dbe5;color:#d1dbe5}.el-input-number.is-disabled .el-input-number__decrease:hover,.el-input-number.is-disabled .el-input-number__increase:hover{color:#d1dbe5;cursor:not-allowed}.el-input-number__decrease,.el-input-number__increase{height:auto;border-left:1px solid #bfcbd9;width:36px;line-height:34px;top:1px;text-align:center;color:#97a8be;cursor:pointer;position:absolute;z-index:1}.el-input-number__decrease:hover,.el-input-number__increase:hover{color:#20a0ff}.el-input-number__decrease:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled),.el-input-number__increase:hover:not(.is-disabled)~.el-input .el-input__inner:not(.is-disabled){border-color:#20a0ff}.el-input-number__decrease.is-disabled,.el-input-number__increase.is-disabled{color:#d1dbe5;cursor:not-allowed}.el-input-number__increase{right:0}.el-input-number__decrease{right:37px}.el-input-number--large{width:200px}.el-input-number--large .el-input-number__decrease,.el-input-number--large .el-input-number__increase{line-height:42px;width:42px;font-size:16px}.el-input-number--large .el-input-number__decrease{right:43px}.el-input-number--large .el-input__inner{padding-right:94px}.el-input-number--small{width:130px}.el-input-number--small .el-input-number__decrease,.el-input-number--small .el-input-number__increase{line-height:30px;width:30px;font-size:13px}.el-input-number--small .el-input-number__decrease{right:31px}.el-input-number--small .el-input__inner{padding-right:70px}.el-tooltip__popper{position:absolute;border-radius:4px;padding:10px;z-index:2000;font-size:12px;line-height:1.2}.el-tooltip__popper .popper__arrow,.el-tooltip__popper .popper__arrow:after{position:absolute;display:block;width:0;height:0;border-color:transparent;border-style:solid}.el-tooltip__popper .popper__arrow{border-width:6px}.el-tooltip__popper .popper__arrow:after{content:" ";border-width:5px}.el-tooltip__popper[x-placement^=top]{margin-bottom:12px}.el-tooltip__popper[x-placement^=top] .popper__arrow{bottom:-6px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=top] .popper__arrow:after{bottom:1px;margin-left:-5px;border-top-color:#1f2d3d;border-bottom-width:0}.el-tooltip__popper[x-placement^=bottom]{margin-top:12px}.el-tooltip__popper[x-placement^=bottom] .popper__arrow{top:-6px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=bottom] .popper__arrow:after{top:1px;margin-left:-5px;border-top-width:0;border-bottom-color:#1f2d3d}.el-tooltip__popper[x-placement^=right]{margin-left:12px}.el-tooltip__popper[x-placement^=right] .popper__arrow{left:-6px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=right] .popper__arrow:after{bottom:-5px;left:1px;border-right-color:#1f2d3d;border-left-width:0}.el-tooltip__popper[x-placement^=left]{margin-right:12px}.el-tooltip__popper[x-placement^=left] .popper__arrow{right:-6px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper[x-placement^=left] .popper__arrow:after{right:1px;bottom:-5px;margin-left:-5px;border-right-width:0;border-left-color:#1f2d3d}.el-tooltip__popper.is-light{background:#fff;border:1px solid #1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow{border-top-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=top] .popper__arrow:after{border-top-color:#fff}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow{border-bottom-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=bottom] .popper__arrow:after{border-bottom-color:#fff}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow{border-left-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=left] .popper__arrow:after{border-left-color:#fff}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow{border-right-color:#1f2d3d}.el-tooltip__popper.is-light[x-placement^=right] .popper__arrow:after{border-right-color:#fff}.el-tooltip__popper.is-dark{background:#1f2d3d;color:#fff}.el-slider__runway{width:100%;height:4px;margin:16px 0;background-color:#e4e8f1;border-radius:3px;position:relative;cursor:pointer;vertical-align:middle}.el-slider__runway.show-input{margin-right:160px;width:auto}.el-slider__runway.disabled{cursor:default}.el-slider__runway.disabled .el-slider__bar,.el-slider__runway.disabled .el-slider__button{background-color:#bfcbd9}.el-slider__runway.disabled .el-slider__button-wrapper.dragging,.el-slider__runway.disabled .el-slider__button-wrapper.hover,.el-slider__runway.disabled .el-slider__button-wrapper:hover{cursor:not-allowed}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{transform:scale(1)}.el-slider__runway.disabled .el-slider__button.dragging,.el-slider__runway.disabled .el-slider__button.hover,.el-slider__runway.disabled .el-slider__button:hover{cursor:not-allowed}.el-slider__input{float:right;margin-top:3px}.el-slider__bar{height:4px;background-color:#20a0ff;border-top-left-radius:3px;border-bottom-left-radius:3px;position:absolute}.el-slider__button-wrapper{width:36px;height:36px;position:absolute;z-index:1001;top:-16px;transform:translateX(-50%);background-color:transparent;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button-wrapper .el-tooltip{vertical-align:middle;display:inline-block}.el-slider__button-wrapper.hover,.el-slider__button-wrapper:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button-wrapper.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__button{width:12px;height:12px;background-color:#20a0ff;border-radius:50%;transition:.2s;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.el-slider__button.dragging,.el-slider__button.hover,.el-slider__button:hover{transform:scale(1.5);background-color:#1c8de0}.el-slider__button.hover,.el-slider__button:hover{cursor:-webkit-grab;cursor:grab}.el-slider__button.dragging{cursor:-webkit-grabbing;cursor:grabbing}.el-slider__stop{position:absolute;width:4px;height:4px;border-radius:100%;background-color:#bfcbd9;transform:translateX(-50%)}.el-loading-mask{position:absolute;z-index:10000;background-color:hsla(0,0%,100%,.9);margin:0;top:0;right:0;bottom:0;left:0;transition:opacity .3s}.el-loading-mask.is-fullscreen{position:fixed}.el-loading-mask.is-fullscreen .el-loading-spinner{margin-top:-25px}.el-loading-mask.is-fullscreen .el-loading-spinner .circular{width:50px;height:50px}.el-loading-spinner{top:50%;margin-top:-21px;width:100%;text-align:center;position:absolute}.el-loading-spinner .el-loading-text{color:#20a0ff;margin:3px 0;font-size:14px}.el-loading-spinner .circular{width:42px;height:42px;animation:loading-rotate 2s linear infinite}.el-loading-spinner .path{animation:loading-dash 1.5s ease-in-out infinite;stroke-dasharray:90,150;stroke-dashoffset:0;stroke-width:2;stroke:#20a0ff;stroke-linecap:round}.el-loading-fade-enter,.el-loading-fade-leave-active{opacity:0}@keyframes loading-rotate{to{transform:rotate(1turn)}}@keyframes loading-dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-40px}to{stroke-dasharray:90,150;stroke-dashoffset:-120px}}.el-row{position:relative;box-sizing:border-box}.el-row--flex{display:-ms-flexbox;display:flex}.el-row--flex:after,.el-row--flex:before{display:none}.el-row--flex.is-align-bottom{-ms-flex-align:end;align-items:flex-end}.el-row--flex.is-align-middle{-ms-flex-align:center;align-items:center}.el-row--flex.is-justify-space-around{-ms-flex-pack:distribute;justify-content:space-around}.el-row--flex.is-justify-space-between{-ms-flex-pack:justify;justify-content:space-between}.el-row--flex.is-justify-end{-ms-flex-pack:end;justify-content:flex-end}.el-row--flex.is-justify-center{-ms-flex-pack:center;justify-content:center}.el-col-1,.el-col-2,.el-col-3,.el-col-4,.el-col-5,.el-col-6,.el-col-7,.el-col-8,.el-col-9,.el-col-10,.el-col-11,.el-col-12,.el-col-13,.el-col-14,.el-col-15,.el-col-16,.el-col-17,.el-col-18,.el-col-19,.el-col-20,.el-col-21,.el-col-22,.el-col-23,.el-col-24{float:left;box-sizing:border-box}.el-col-0{width:0}.el-col-offset-0{margin-left:0}.el-col-pull-0{position:relative;right:0}.el-col-push-0{position:relative;left:0}.el-col-1{width:4.16667%}.el-col-offset-1{margin-left:4.16667%}.el-col-pull-1{position:relative;right:4.16667%}.el-col-push-1{position:relative;left:4.16667%}.el-col-2{width:8.33333%}.el-col-offset-2{margin-left:8.33333%}.el-col-pull-2{position:relative;right:8.33333%}.el-col-push-2{position:relative;left:8.33333%}.el-col-3{width:12.5%}.el-col-offset-3{margin-left:12.5%}.el-col-pull-3{position:relative;right:12.5%}.el-col-push-3{position:relative;left:12.5%}.el-col-4{width:16.66667%}.el-col-offset-4{margin-left:16.66667%}.el-col-pull-4{position:relative;right:16.66667%}.el-col-push-4{position:relative;left:16.66667%}.el-col-5{width:20.83333%}.el-col-offset-5{margin-left:20.83333%}.el-col-pull-5{position:relative;right:20.83333%}.el-col-push-5{position:relative;left:20.83333%}.el-col-6{width:25%}.el-col-offset-6{margin-left:25%}.el-col-pull-6{position:relative;right:25%}.el-col-push-6{position:relative;left:25%}.el-col-7{width:29.16667%}.el-col-offset-7{margin-left:29.16667%}.el-col-pull-7{position:relative;right:29.16667%}.el-col-push-7{position:relative;left:29.16667%}.el-col-8{width:33.33333%}.el-col-offset-8{margin-left:33.33333%}.el-col-pull-8{position:relative;right:33.33333%}.el-col-push-8{position:relative;left:33.33333%}.el-col-9{width:37.5%}.el-col-offset-9{margin-left:37.5%}.el-col-pull-9{position:relative;right:37.5%}.el-col-push-9{position:relative;left:37.5%}.el-col-10{width:41.66667%}.el-col-offset-10{margin-left:41.66667%}.el-col-pull-10{position:relative;right:41.66667%}.el-col-push-10{position:relative;left:41.66667%}.el-col-11{width:45.83333%}.el-col-offset-11{margin-left:45.83333%}.el-col-pull-11{position:relative;right:45.83333%}.el-col-push-11{position:relative;left:45.83333%}.el-col-12{width:50%}.el-col-offset-12{margin-left:50%}.el-col-pull-12{position:relative;right:50%}.el-col-push-12{position:relative;left:50%}.el-col-13{width:54.16667%}.el-col-offset-13{margin-left:54.16667%}.el-col-pull-13{position:relative;right:54.16667%}.el-col-push-13{position:relative;left:54.16667%}.el-col-14{width:58.33333%}.el-col-offset-14{margin-left:58.33333%}.el-col-pull-14{position:relative;right:58.33333%}.el-col-push-14{position:relative;left:58.33333%}.el-col-15{width:62.5%}.el-col-offset-15{margin-left:62.5%}.el-col-pull-15{position:relative;right:62.5%}.el-col-push-15{position:relative;left:62.5%}.el-col-16{width:66.66667%}.el-col-offset-16{margin-left:66.66667%}.el-col-pull-16{position:relative;right:66.66667%}.el-col-push-16{position:relative;left:66.66667%}.el-col-17{width:70.83333%}.el-col-offset-17{margin-left:70.83333%}.el-col-pull-17{position:relative;right:70.83333%}.el-col-push-17{position:relative;left:70.83333%}.el-col-18{width:75%}.el-col-offset-18{margin-left:75%}.el-col-pull-18{position:relative;right:75%}.el-col-push-18{position:relative;left:75%}.el-col-19{width:79.16667%}.el-col-offset-19{margin-left:79.16667%}.el-col-pull-19{position:relative;right:79.16667%}.el-col-push-19{position:relative;left:79.16667%}.el-col-20{width:83.33333%}.el-col-offset-20{margin-left:83.33333%}.el-col-pull-20{position:relative;right:83.33333%}.el-col-push-20{position:relative;left:83.33333%}.el-col-21{width:87.5%}.el-col-offset-21{margin-left:87.5%}.el-col-pull-21{position:relative;right:87.5%}.el-col-push-21{position:relative;left:87.5%}.el-col-22{width:91.66667%}.el-col-offset-22{margin-left:91.66667%}.el-col-pull-22{position:relative;right:91.66667%}.el-col-push-22{position:relative;left:91.66667%}.el-col-23{width:95.83333%}.el-col-offset-23{margin-left:95.83333%}.el-col-pull-23{position:relative;right:95.83333%}.el-col-push-23{position:relative;left:95.83333%}.el-col-24{width:100%}.el-col-offset-24{margin-left:100%}.el-col-pull-24{position:relative;right:100%}.el-col-push-24{position:relative;left:100%}@media (max-width:768px){.el-col-xs-0{width:0}.el-col-xs-offset-0{margin-left:0}.el-col-xs-pull-0{position:relative;right:0}.el-col-xs-push-0{position:relative;left:0}.el-col-xs-1{width:4.16667%}.el-col-xs-offset-1{margin-left:4.16667%}.el-col-xs-pull-1{position:relative;right:4.16667%}.el-col-xs-push-1{position:relative;left:4.16667%}.el-col-xs-2{width:8.33333%}.el-col-xs-offset-2{margin-left:8.33333%}.el-col-xs-pull-2{position:relative;right:8.33333%}.el-col-xs-push-2{position:relative;left:8.33333%}.el-col-xs-3{width:12.5%}.el-col-xs-offset-3{margin-left:12.5%}.el-col-xs-pull-3{position:relative;right:12.5%}.el-col-xs-push-3{position:relative;left:12.5%}.el-col-xs-4{width:16.66667%}.el-col-xs-offset-4{margin-left:16.66667%}.el-col-xs-pull-4{position:relative;right:16.66667%}.el-col-xs-push-4{position:relative;left:16.66667%}.el-col-xs-5{width:20.83333%}.el-col-xs-offset-5{margin-left:20.83333%}.el-col-xs-pull-5{position:relative;right:20.83333%}.el-col-xs-push-5{position:relative;left:20.83333%}.el-col-xs-6{width:25%}.el-col-xs-offset-6{margin-left:25%}.el-col-xs-pull-6{position:relative;right:25%}.el-col-xs-push-6{position:relative;left:25%}.el-col-xs-7{width:29.16667%}.el-col-xs-offset-7{margin-left:29.16667%}.el-col-xs-pull-7{position:relative;right:29.16667%}.el-col-xs-push-7{position:relative;left:29.16667%}.el-col-xs-8{width:33.33333%}.el-col-xs-offset-8{margin-left:33.33333%}.el-col-xs-pull-8{position:relative;right:33.33333%}.el-col-xs-push-8{position:relative;left:33.33333%}.el-col-xs-9{width:37.5%}.el-col-xs-offset-9{margin-left:37.5%}.el-col-xs-pull-9{position:relative;right:37.5%}.el-col-xs-push-9{position:relative;left:37.5%}.el-col-xs-10{width:41.66667%}.el-col-xs-offset-10{margin-left:41.66667%}.el-col-xs-pull-10{position:relative;right:41.66667%}.el-col-xs-push-10{position:relative;left:41.66667%}.el-col-xs-11{width:45.83333%}.el-col-xs-offset-11{margin-left:45.83333%}.el-col-xs-pull-11{position:relative;right:45.83333%}.el-col-xs-push-11{position:relative;left:45.83333%}.el-col-xs-12{width:50%}.el-col-xs-offset-12{margin-left:50%}.el-col-xs-pull-12{position:relative;right:50%}.el-col-xs-push-12{position:relative;left:50%}.el-col-xs-13{width:54.16667%}.el-col-xs-offset-13{margin-left:54.16667%}.el-col-xs-pull-13{position:relative;right:54.16667%}.el-col-xs-push-13{position:relative;left:54.16667%}.el-col-xs-14{width:58.33333%}.el-col-xs-offset-14{margin-left:58.33333%}.el-col-xs-pull-14{position:relative;right:58.33333%}.el-col-xs-push-14{position:relative;left:58.33333%}.el-col-xs-15{width:62.5%}.el-col-xs-offset-15{margin-left:62.5%}.el-col-xs-pull-15{position:relative;right:62.5%}.el-col-xs-push-15{position:relative;left:62.5%}.el-col-xs-16{width:66.66667%}.el-col-xs-offset-16{margin-left:66.66667%}.el-col-xs-pull-16{position:relative;right:66.66667%}.el-col-xs-push-16{position:relative;left:66.66667%}.el-col-xs-17{width:70.83333%}.el-col-xs-offset-17{margin-left:70.83333%}.el-col-xs-pull-17{position:relative;right:70.83333%}.el-col-xs-push-17{position:relative;left:70.83333%}.el-col-xs-18{width:75%}.el-col-xs-offset-18{margin-left:75%}.el-col-xs-pull-18{position:relative;right:75%}.el-col-xs-push-18{position:relative;left:75%}.el-col-xs-19{width:79.16667%}.el-col-xs-offset-19{margin-left:79.16667%}.el-col-xs-pull-19{position:relative;right:79.16667%}.el-col-xs-push-19{position:relative;left:79.16667%}.el-col-xs-20{width:83.33333%}.el-col-xs-offset-20{margin-left:83.33333%}.el-col-xs-pull-20{position:relative;right:83.33333%}.el-col-xs-push-20{position:relative;left:83.33333%}.el-col-xs-21{width:87.5%}.el-col-xs-offset-21{margin-left:87.5%}.el-col-xs-pull-21{position:relative;right:87.5%}.el-col-xs-push-21{position:relative;left:87.5%}.el-col-xs-22{width:91.66667%}.el-col-xs-offset-22{margin-left:91.66667%}.el-col-xs-pull-22{position:relative;right:91.66667%}.el-col-xs-push-22{position:relative;left:91.66667%}.el-col-xs-23{width:95.83333%}.el-col-xs-offset-23{margin-left:95.83333%}.el-col-xs-pull-23{position:relative;right:95.83333%}.el-col-xs-push-23{position:relative;left:95.83333%}.el-col-xs-24{width:100%}.el-col-xs-offset-24{margin-left:100%}.el-col-xs-pull-24{position:relative;right:100%}.el-col-xs-push-24{position:relative;left:100%}}@media (min-width:768px){.el-col-sm-0{width:0}.el-col-sm-offset-0{margin-left:0}.el-col-sm-pull-0{position:relative;right:0}.el-col-sm-push-0{position:relative;left:0}.el-col-sm-1{width:4.16667%}.el-col-sm-offset-1{margin-left:4.16667%}.el-col-sm-pull-1{position:relative;right:4.16667%}.el-col-sm-push-1{position:relative;left:4.16667%}.el-col-sm-2{width:8.33333%}.el-col-sm-offset-2{margin-left:8.33333%}.el-col-sm-pull-2{position:relative;right:8.33333%}.el-col-sm-push-2{position:relative;left:8.33333%}.el-col-sm-3{width:12.5%}.el-col-sm-offset-3{margin-left:12.5%}.el-col-sm-pull-3{position:relative;right:12.5%}.el-col-sm-push-3{position:relative;left:12.5%}.el-col-sm-4{width:16.66667%}.el-col-sm-offset-4{margin-left:16.66667%}.el-col-sm-pull-4{position:relative;right:16.66667%}.el-col-sm-push-4{position:relative;left:16.66667%}.el-col-sm-5{width:20.83333%}.el-col-sm-offset-5{margin-left:20.83333%}.el-col-sm-pull-5{position:relative;right:20.83333%}.el-col-sm-push-5{position:relative;left:20.83333%}.el-col-sm-6{width:25%}.el-col-sm-offset-6{margin-left:25%}.el-col-sm-pull-6{position:relative;right:25%}.el-col-sm-push-6{position:relative;left:25%}.el-col-sm-7{width:29.16667%}.el-col-sm-offset-7{margin-left:29.16667%}.el-col-sm-pull-7{position:relative;right:29.16667%}.el-col-sm-push-7{position:relative;left:29.16667%}.el-col-sm-8{width:33.33333%}.el-col-sm-offset-8{margin-left:33.33333%}.el-col-sm-pull-8{position:relative;right:33.33333%}.el-col-sm-push-8{position:relative;left:33.33333%}.el-col-sm-9{width:37.5%}.el-col-sm-offset-9{margin-left:37.5%}.el-col-sm-pull-9{position:relative;right:37.5%}.el-col-sm-push-9{position:relative;left:37.5%}.el-col-sm-10{width:41.66667%}.el-col-sm-offset-10{margin-left:41.66667%}.el-col-sm-pull-10{position:relative;right:41.66667%}.el-col-sm-push-10{position:relative;left:41.66667%}.el-col-sm-11{width:45.83333%}.el-col-sm-offset-11{margin-left:45.83333%}.el-col-sm-pull-11{position:relative;right:45.83333%}.el-col-sm-push-11{position:relative;left:45.83333%}.el-col-sm-12{width:50%}.el-col-sm-offset-12{margin-left:50%}.el-col-sm-pull-12{position:relative;right:50%}.el-col-sm-push-12{position:relative;left:50%}.el-col-sm-13{width:54.16667%}.el-col-sm-offset-13{margin-left:54.16667%}.el-col-sm-pull-13{position:relative;right:54.16667%}.el-col-sm-push-13{position:relative;left:54.16667%}.el-col-sm-14{width:58.33333%}.el-col-sm-offset-14{margin-left:58.33333%}.el-col-sm-pull-14{position:relative;right:58.33333%}.el-col-sm-push-14{position:relative;left:58.33333%}.el-col-sm-15{width:62.5%}.el-col-sm-offset-15{margin-left:62.5%}.el-col-sm-pull-15{position:relative;right:62.5%}.el-col-sm-push-15{position:relative;left:62.5%}.el-col-sm-16{width:66.66667%}.el-col-sm-offset-16{margin-left:66.66667%}.el-col-sm-pull-16{position:relative;right:66.66667%}.el-col-sm-push-16{position:relative;left:66.66667%}.el-col-sm-17{width:70.83333%}.el-col-sm-offset-17{margin-left:70.83333%}.el-col-sm-pull-17{position:relative;right:70.83333%}.el-col-sm-push-17{position:relative;left:70.83333%}.el-col-sm-18{width:75%}.el-col-sm-offset-18{margin-left:75%}.el-col-sm-pull-18{position:relative;right:75%}.el-col-sm-push-18{position:relative;left:75%}.el-col-sm-19{width:79.16667%}.el-col-sm-offset-19{margin-left:79.16667%}.el-col-sm-pull-19{position:relative;right:79.16667%}.el-col-sm-push-19{position:relative;left:79.16667%}.el-col-sm-20{width:83.33333%}.el-col-sm-offset-20{margin-left:83.33333%}.el-col-sm-pull-20{position:relative;right:83.33333%}.el-col-sm-push-20{position:relative;left:83.33333%}.el-col-sm-21{width:87.5%}.el-col-sm-offset-21{margin-left:87.5%}.el-col-sm-pull-21{position:relative;right:87.5%}.el-col-sm-push-21{position:relative;left:87.5%}.el-col-sm-22{width:91.66667%}.el-col-sm-offset-22{margin-left:91.66667%}.el-col-sm-pull-22{position:relative;right:91.66667%}.el-col-sm-push-22{position:relative;left:91.66667%}.el-col-sm-23{width:95.83333%}.el-col-sm-offset-23{margin-left:95.83333%}.el-col-sm-pull-23{position:relative;right:95.83333%}.el-col-sm-push-23{position:relative;left:95.83333%}.el-col-sm-24{width:100%}.el-col-sm-offset-24{margin-left:100%}.el-col-sm-pull-24{position:relative;right:100%}.el-col-sm-push-24{position:relative;left:100%}}@media (min-width:992px){.el-col-md-0{width:0}.el-col-md-offset-0{margin-left:0}.el-col-md-pull-0{position:relative;right:0}.el-col-md-push-0{position:relative;left:0}.el-col-md-1{width:4.16667%}.el-col-md-offset-1{margin-left:4.16667%}.el-col-md-pull-1{position:relative;right:4.16667%}.el-col-md-push-1{position:relative;left:4.16667%}.el-col-md-2{width:8.33333%}.el-col-md-offset-2{margin-left:8.33333%}.el-col-md-pull-2{position:relative;right:8.33333%}.el-col-md-push-2{position:relative;left:8.33333%}.el-col-md-3{width:12.5%}.el-col-md-offset-3{margin-left:12.5%}.el-col-md-pull-3{position:relative;right:12.5%}.el-col-md-push-3{position:relative;left:12.5%}.el-col-md-4{width:16.66667%}.el-col-md-offset-4{margin-left:16.66667%}.el-col-md-pull-4{position:relative;right:16.66667%}.el-col-md-push-4{position:relative;left:16.66667%}.el-col-md-5{width:20.83333%}.el-col-md-offset-5{margin-left:20.83333%}.el-col-md-pull-5{position:relative;right:20.83333%}.el-col-md-push-5{position:relative;left:20.83333%}.el-col-md-6{width:25%}.el-col-md-offset-6{margin-left:25%}.el-col-md-pull-6{position:relative;right:25%}.el-col-md-push-6{position:relative;left:25%}.el-col-md-7{width:29.16667%}.el-col-md-offset-7{margin-left:29.16667%}.el-col-md-pull-7{position:relative;right:29.16667%}.el-col-md-push-7{position:relative;left:29.16667%}.el-col-md-8{width:33.33333%}.el-col-md-offset-8{margin-left:33.33333%}.el-col-md-pull-8{position:relative;right:33.33333%}.el-col-md-push-8{position:relative;left:33.33333%}.el-col-md-9{width:37.5%}.el-col-md-offset-9{margin-left:37.5%}.el-col-md-pull-9{position:relative;right:37.5%}.el-col-md-push-9{position:relative;left:37.5%}.el-col-md-10{width:41.66667%}.el-col-md-offset-10{margin-left:41.66667%}.el-col-md-pull-10{position:relative;right:41.66667%}.el-col-md-push-10{position:relative;left:41.66667%}.el-col-md-11{width:45.83333%}.el-col-md-offset-11{margin-left:45.83333%}.el-col-md-pull-11{position:relative;right:45.83333%}.el-col-md-push-11{position:relative;left:45.83333%}.el-col-md-12{width:50%}.el-col-md-offset-12{margin-left:50%}.el-col-md-pull-12{position:relative;right:50%}.el-col-md-push-12{position:relative;left:50%}.el-col-md-13{width:54.16667%}.el-col-md-offset-13{margin-left:54.16667%}.el-col-md-pull-13{position:relative;right:54.16667%}.el-col-md-push-13{position:relative;left:54.16667%}.el-col-md-14{width:58.33333%}.el-col-md-offset-14{margin-left:58.33333%}.el-col-md-pull-14{position:relative;right:58.33333%}.el-col-md-push-14{position:relative;left:58.33333%}.el-col-md-15{width:62.5%}.el-col-md-offset-15{margin-left:62.5%}.el-col-md-pull-15{position:relative;right:62.5%}.el-col-md-push-15{position:relative;left:62.5%}.el-col-md-16{width:66.66667%}.el-col-md-offset-16{margin-left:66.66667%}.el-col-md-pull-16{position:relative;right:66.66667%}.el-col-md-push-16{position:relative;left:66.66667%}.el-col-md-17{width:70.83333%}.el-col-md-offset-17{margin-left:70.83333%}.el-col-md-pull-17{position:relative;right:70.83333%}.el-col-md-push-17{position:relative;left:70.83333%}.el-col-md-18{width:75%}.el-col-md-offset-18{margin-left:75%}.el-col-md-pull-18{position:relative;right:75%}.el-col-md-push-18{position:relative;left:75%}.el-col-md-19{width:79.16667%}.el-col-md-offset-19{margin-left:79.16667%}.el-col-md-pull-19{position:relative;right:79.16667%}.el-col-md-push-19{position:relative;left:79.16667%}.el-col-md-20{width:83.33333%}.el-col-md-offset-20{margin-left:83.33333%}.el-col-md-pull-20{position:relative;right:83.33333%}.el-col-md-push-20{position:relative;left:83.33333%}.el-col-md-21{width:87.5%}.el-col-md-offset-21{margin-left:87.5%}.el-col-md-pull-21{position:relative;right:87.5%}.el-col-md-push-21{position:relative;left:87.5%}.el-col-md-22{width:91.66667%}.el-col-md-offset-22{margin-left:91.66667%}.el-col-md-pull-22{position:relative;right:91.66667%}.el-col-md-push-22{position:relative;left:91.66667%}.el-col-md-23{width:95.83333%}.el-col-md-offset-23{margin-left:95.83333%}.el-col-md-pull-23{position:relative;right:95.83333%}.el-col-md-push-23{position:relative;left:95.83333%}.el-col-md-24{width:100%}.el-col-md-offset-24{margin-left:100%}.el-col-md-pull-24{position:relative;right:100%}.el-col-md-push-24{position:relative;left:100%}}@media (min-width:1200px){.el-col-lg-0{width:0}.el-col-lg-offset-0{margin-left:0}.el-col-lg-pull-0{position:relative;right:0}.el-col-lg-push-0{position:relative;left:0}.el-col-lg-1{width:4.16667%}.el-col-lg-offset-1{margin-left:4.16667%}.el-col-lg-pull-1{position:relative;right:4.16667%}.el-col-lg-push-1{position:relative;left:4.16667%}.el-col-lg-2{width:8.33333%}.el-col-lg-offset-2{margin-left:8.33333%}.el-col-lg-pull-2{position:relative;right:8.33333%}.el-col-lg-push-2{position:relative;left:8.33333%}.el-col-lg-3{width:12.5%}.el-col-lg-offset-3{margin-left:12.5%}.el-col-lg-pull-3{position:relative;right:12.5%}.el-col-lg-push-3{position:relative;left:12.5%}.el-col-lg-4{width:16.66667%}.el-col-lg-offset-4{margin-left:16.66667%}.el-col-lg-pull-4{position:relative;right:16.66667%}.el-col-lg-push-4{position:relative;left:16.66667%}.el-col-lg-5{width:20.83333%}.el-col-lg-offset-5{margin-left:20.83333%}.el-col-lg-pull-5{position:relative;right:20.83333%}.el-col-lg-push-5{position:relative;left:20.83333%}.el-col-lg-6{width:25%}.el-col-lg-offset-6{margin-left:25%}.el-col-lg-pull-6{position:relative;right:25%}.el-col-lg-push-6{position:relative;left:25%}.el-col-lg-7{width:29.16667%}.el-col-lg-offset-7{margin-left:29.16667%}.el-col-lg-pull-7{position:relative;right:29.16667%}.el-col-lg-push-7{position:relative;left:29.16667%}.el-col-lg-8{width:33.33333%}.el-col-lg-offset-8{margin-left:33.33333%}.el-col-lg-pull-8{position:relative;right:33.33333%}.el-col-lg-push-8{position:relative;left:33.33333%}.el-col-lg-9{width:37.5%}.el-col-lg-offset-9{margin-left:37.5%}.el-col-lg-pull-9{position:relative;right:37.5%}.el-col-lg-push-9{position:relative;left:37.5%}.el-col-lg-10{width:41.66667%}.el-col-lg-offset-10{margin-left:41.66667%}.el-col-lg-pull-10{position:relative;right:41.66667%}.el-col-lg-push-10{position:relative;left:41.66667%}.el-col-lg-11{width:45.83333%}.el-col-lg-offset-11{margin-left:45.83333%}.el-col-lg-pull-11{position:relative;right:45.83333%}.el-col-lg-push-11{position:relative;left:45.83333%}.el-col-lg-12{width:50%}.el-col-lg-offset-12{margin-left:50%}.el-col-lg-pull-12{position:relative;right:50%}.el-col-lg-push-12{position:relative;left:50%}.el-col-lg-13{width:54.16667%}.el-col-lg-offset-13{margin-left:54.16667%}.el-col-lg-pull-13{position:relative;right:54.16667%}.el-col-lg-push-13{position:relative;left:54.16667%}.el-col-lg-14{width:58.33333%}.el-col-lg-offset-14{margin-left:58.33333%}.el-col-lg-pull-14{position:relative;right:58.33333%}.el-col-lg-push-14{position:relative;left:58.33333%}.el-col-lg-15{width:62.5%}.el-col-lg-offset-15{margin-left:62.5%}.el-col-lg-pull-15{position:relative;right:62.5%}.el-col-lg-push-15{position:relative;left:62.5%}.el-col-lg-16{width:66.66667%}.el-col-lg-offset-16{margin-left:66.66667%}.el-col-lg-pull-16{position:relative;right:66.66667%}.el-col-lg-push-16{position:relative;left:66.66667%}.el-col-lg-17{width:70.83333%}.el-col-lg-offset-17{margin-left:70.83333%}.el-col-lg-pull-17{position:relative;right:70.83333%}.el-col-lg-push-17{position:relative;left:70.83333%}.el-col-lg-18{width:75%}.el-col-lg-offset-18{margin-left:75%}.el-col-lg-pull-18{position:relative;right:75%}.el-col-lg-push-18{position:relative;left:75%}.el-col-lg-19{width:79.16667%}.el-col-lg-offset-19{margin-left:79.16667%}.el-col-lg-pull-19{position:relative;right:79.16667%}.el-col-lg-push-19{position:relative;left:79.16667%}.el-col-lg-20{width:83.33333%}.el-col-lg-offset-20{margin-left:83.33333%}.el-col-lg-pull-20{position:relative;right:83.33333%}.el-col-lg-push-20{position:relative;left:83.33333%}.el-col-lg-21{width:87.5%}.el-col-lg-offset-21{margin-left:87.5%}.el-col-lg-pull-21{position:relative;right:87.5%}.el-col-lg-push-21{position:relative;left:87.5%}.el-col-lg-22{width:91.66667%}.el-col-lg-offset-22{margin-left:91.66667%}.el-col-lg-pull-22{position:relative;right:91.66667%}.el-col-lg-push-22{position:relative;left:91.66667%}.el-col-lg-23{width:95.83333%}.el-col-lg-offset-23{margin-left:95.83333%}.el-col-lg-pull-23{position:relative;right:95.83333%}.el-col-lg-push-23{position:relative;left:95.83333%}.el-col-lg-24{width:100%}.el-col-lg-offset-24{margin-left:100%}.el-col-lg-pull-24{position:relative;right:100%}.el-col-lg-push-24{position:relative;left:100%}}.el-upload{display:inline-block;text-align:center;cursor:pointer}.el-upload iframe{position:absolute;z-index:-1;top:0;left:0;opacity:0;filter:alpha(opacity=0)}.el-upload__input{display:none}.el-upload__tip{font-size:12px;color:#8391a5;margin-top:7px}.el-upload--picture-card{background-color:#fbfdff;border:1px dashed #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;cursor:pointer;line-height:146px;vertical-align:top}.el-upload--picture-card i{font-size:28px;color:#8c939d}.el-upload--picture-card:hover{border-color:#20a0ff;color:#20a0ff}.el-upload-dragger{background-color:#fff;border:1px dashed #d9d9d9;border-radius:6px;box-sizing:border-box;width:360px;height:180px;text-align:center;cursor:pointer;position:relative;overflow:hidden}.el-upload-dragger .el-upload__text{color:#97a8be;font-size:14px;text-align:center}.el-upload-dragger .el-upload__text em{color:#20a0ff;font-style:normal}.el-upload-dragger .el-icon-upload{font-size:67px;color:#97a8be;margin:40px 0 16px;line-height:50px}.el-upload-dragger+.el-upload__tip{text-align:center}.el-upload-dragger~.el-upload__files{border-top:1px solid rgba(191,203,217,.2);margin-top:7px;padding-top:5px}.el-upload-dragger:hover{border-color:#20a0ff}.el-upload-dragger.is-dragover{background-color:rgba(32,159,255,.06);border:2px dashed #20a0ff}.el-upload-list{margin:0;padding:0;list-style:none}.el-upload-list__item{transition:all .5s cubic-bezier(.55,0,.1,1);font-size:14px;color:#48576a;line-height:1.8;margin-top:5px;box-sizing:border-box;border-radius:4px;width:100%;position:relative}.el-upload-list__item .el-progress-bar{margin-right:0;padding-right:0}.el-upload-list__item .el-progress{position:absolute;bottom:-3px;width:100%}.el-upload-list__item .el-progress__text{position:absolute;top:-10px;right:0}.el-upload-list__item:first-child{margin-top:10px}.el-upload-list__item .el-icon-check,.el-upload-list__item .el-icon-circle-check{color:#13ce66}.el-upload-list__item .el-icon-close{display:none;cursor:pointer;opacity:.75;transform:scale(.7);color:#48576a}.el-upload-list__item .el-icon-close:hover{opacity:1}.el-upload-list__item:hover{background-color:#eef1f6}.el-upload-list__item:hover .el-icon-close{display:inline-block}.el-upload-list__item.is-success .el-upload-list__item-name:hover{color:#20a0ff;cursor:pointer}.el-upload-list__item.is-success:hover .el-icon-check,.el-upload-list__item.is-success:hover .el-icon-circle-check{display:none}.el-upload-list__item-name{color:#48576a;display:block;margin-right:40px;overflow:hidden;padding-left:4px;text-overflow:ellipsis;transition:color .3s;white-space:nowrap}.el-upload-list__item-name [class^=el-icon]{color:#97a8be;margin-right:7px;height:100%;line-height:inherit}.el-upload-list__item-status-label{position:absolute;right:10px;top:0;line-height:inherit}.el-upload-list__item-delete{position:absolute;right:10px;top:0;font-size:12px;color:#48576a;display:none}.el-upload-list__item-delete:hover{color:#20a0ff}.el-upload-list--picture-card{margin:0;display:inline;vertical-align:top}.el-upload-list--picture-card .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;width:148px;height:148px;margin:0 8px 8px 0;display:inline-block}.el-upload-list--picture-card .el-upload-list__item .el-icon-check,.el-upload-list--picture-card .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture-card .el-upload-list__item-name,.el-upload-list--picture-card .el-upload-list__item:hover .el-upload-list__item-status-label{display:none}.el-upload-list--picture-card .el-upload-list__item-thumbnail{width:100%;height:100%}.el-upload-list--picture-card .el-upload-list__item-status-label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-list--picture-card .el-upload-list__item-status-label i{font-size:12px;margin-top:11px;transform:rotate(-45deg) scale(.8)}.el-upload-list--picture-card .el-upload-list__item-actions{position:absolute;width:100%;height:100%;left:0;top:0;cursor:default;text-align:center;color:#fff;opacity:0;font-size:20px;background-color:rgba(0,0,0,.5);transition:opacity .3s}.el-upload-list--picture-card .el-upload-list__item-actions span{display:none;cursor:pointer}.el-upload-list--picture-card .el-upload-list__item-actions span+span{margin-left:15px}.el-upload-list--picture-card .el-upload-list__item-actions .el-upload-list__item-delete{position:static;font-size:inherit;color:inherit}.el-upload-list--picture-card .el-upload-list__item-actions:hover{opacity:1}.el-upload-list--picture-card .el-upload-list__item-actions:hover span{display:inline-block}.el-upload-list--picture-card .el-progress{top:50%;left:50%;transform:translate(-50%,-50%);bottom:auto;width:126px}.el-upload-list--picture-card .el-progress .el-progress__text{top:50%}.el-upload-list--picture .el-upload-list__item{overflow:hidden;background-color:#fff;border:1px solid #c0ccda;border-radius:6px;box-sizing:border-box;margin-top:10px;padding:10px 10px 10px 90px;height:92px}.el-upload-list--picture .el-upload-list__item .el-icon-check,.el-upload-list--picture .el-upload-list__item .el-icon-circle-check{color:#fff}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label{background:transparent;box-shadow:none;top:-2px;right:-12px}.el-upload-list--picture .el-upload-list__item:hover .el-upload-list__item-status-label .el-icon-close{transform:rotate(45deg) scale(.7)}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name{line-height:70px;margin-top:0}.el-upload-list--picture .el-upload-list__item.is-success .el-upload-list__item-name i{display:none}.el-upload-list--picture .el-upload-list__item-thumbnail{vertical-align:middle;display:inline-block;width:70px;height:70px;float:left;margin-left:-80px}.el-upload-list--picture .el-upload-list__item-name{display:block;margin-top:20px}.el-upload-list--picture .el-upload-list__item-name i{font-size:70px;line-height:1;position:absolute;left:9px;top:10px}.el-upload-list--picture .el-upload-list__item-status-label{position:absolute;right:-17px;top:-7px;width:46px;height:26px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 1px 1px #ccc}.el-upload-list--picture .el-upload-list__item-status-label i{font-size:12px;margin-top:12px;transform:rotate(-45deg) scale(.8)}.el-upload-list--picture .el-progress{position:static}.el-upload-cover{position:absolute;left:0;top:0;width:100%;height:100%;overflow:hidden;z-index:10;cursor:default}.el-upload-cover img{display:block;width:100%;height:100%}.el-upload-cover+.el-upload__inner{opacity:0;position:relative;z-index:1}.el-upload-cover__label{position:absolute;right:-15px;top:-6px;width:40px;height:24px;background:#13ce66;text-align:center;transform:rotate(45deg);box-shadow:0 0 1pc 1px rgba(0,0,0,.2)}.el-upload-cover__label i{font-size:12px;margin-top:11px;transform:rotate(-45deg) scale(.8);color:#fff}.el-upload-cover__progress{display:inline-block;vertical-align:middle;position:static;width:243px}.el-upload-cover__progress+.el-upload__inner{opacity:0}.el-upload-cover__content{position:absolute;top:0;left:0;width:100%;height:100%}.el-upload-cover__interact{position:absolute;bottom:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.72);text-align:center}.el-upload-cover__interact .btn{display:inline-block;color:#fff;font-size:14px;cursor:pointer;vertical-align:middle;transition:transform .3s cubic-bezier(.23,1,.32,1) .1s,opacity .3s cubic-bezier(.23,1,.32,1) .1s;margin-top:60px}.el-upload-cover__interact .btn i{margin-top:0}.el-upload-cover__interact .btn span{opacity:0;transition:opacity .15s linear}.el-upload-cover__interact .btn:not(:first-child){margin-left:35px}.el-upload-cover__interact .btn:hover{transform:translateY(-13px)}.el-upload-cover__interact .btn:hover span{opacity:1}.el-upload-cover__interact .btn i{color:#fff;display:block;font-size:24px;line-height:inherit;margin:0 auto 5px}.el-upload-cover__title{position:absolute;bottom:0;left:0;background-color:#fff;height:36px;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;text-align:left;padding:0 10px;margin:0;line-height:36px;font-size:14px;color:#48576a}.el-progress{position:relative;line-height:1}.el-progress.is-exception .el-progress-bar__inner{background-color:#ff4949}.el-progress.is-exception .el-progress__text{color:#ff4949}.el-progress.is-success .el-progress-bar__inner{background-color:#13ce66}.el-progress.is-success .el-progress__text{color:#13ce66}.el-progress__text{font-size:14px;color:#48576a;display:inline-block;vertical-align:middle;margin-left:10px;line-height:1}.el-progress__text i{vertical-align:middle;display:block}.el-progress--circle{display:inline-block}.el-progress--circle .el-progress__text{position:absolute;top:50%;left:0;width:100%;text-align:center;margin:0;transform:translateY(-50%)}.el-progress--circle .el-progress__text i{vertical-align:middle;display:inline-block}.el-progress--without-text .el-progress__text{display:none}.el-progress--without-text .el-progress-bar{padding-right:0;margin-right:0;display:block}.el-progress--text-inside .el-progress-bar{padding-right:0;margin-right:0}.el-progress-bar{padding-right:50px;display:inline-block;vertical-align:middle;width:100%;margin-right:-55px;box-sizing:border-box}.el-progress-bar__outer{height:6px;border-radius:100px;background-color:#e4e8f1;overflow:hidden;position:relative;vertical-align:middle}.el-progress-bar__inner{position:absolute;left:0;top:0;height:100%;border-radius:2px 0 0 2px;background-color:#20a0ff;text-align:right;border-radius:100px;line-height:1}.el-progress-bar__innerText{display:inline-block;vertical-align:middle;color:#fff;font-size:12px;margin:0 5px}@keyframes progress{0%{background-position:0 0}to{background-position:32px 0}}.el-time-spinner{width:100%;white-space:nowrap}.el-spinner{display:inline-block;vertical-align:middle}.el-spinner-inner{animation:rotate 2s linear infinite;width:50px;height:50px}.el-spinner-inner .path{stroke:#ececec;stroke-linecap:round;animation:dash 1.5s ease-in-out infinite}@keyframes rotate{to{transform:rotate(1turn)}}@keyframes dash{0%{stroke-dasharray:1,150;stroke-dashoffset:0}50%{stroke-dasharray:90,150;stroke-dashoffset:-35}to{stroke-dasharray:90,150;stroke-dashoffset:-124}}.el-message{box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04);min-width:300px;padding:10px 12px;box-sizing:border-box;border-radius:2px;position:fixed;left:50%;top:20px;transform:translateX(-50%);background-color:#fff;transition:opacity .3s,transform .4s;overflow:hidden}.el-message .el-icon-circle-check{color:#13ce66}.el-message .el-icon-circle-cross{color:#ff4949}.el-message .el-icon-information{color:#50bfff}.el-message .el-icon-warning{color:#f7ba2a}.el-message__group{margin-left:38px;position:relative;height:20px;line-height:20px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center}.el-message__group p{font-size:14px;margin:0 34px 0 0;white-space:nowrap;color:#8391a5;text-align:justify}.el-message__group.is-with-icon{margin-left:0}.el-message__img{width:40px;height:40px;position:absolute;left:0;top:0}.el-message__icon{vertical-align:middle;margin-right:8px}.el-message__closeBtn{top:3px;right:0;position:absolute;cursor:pointer;color:#bfcbd9;font-size:14px}.el-message__closeBtn:hover{color:#97a8be}.el-message-fade-enter,.el-message-fade-leave-active{opacity:0;transform:translate(-50%,-100%)}.el-badge{position:relative;vertical-align:middle;display:inline-block}.el-badge__content{background-color:#ff4949;border-radius:10px;color:#fff;display:inline-block;font-size:12px;height:18px;line-height:18px;padding:0 6px;text-align:center;white-space:nowrap;border:1px solid #fff}.el-badge__content.is-dot{width:8px;height:8px;padding:0;right:0;border-radius:50%}.el-badge__content.is-fixed{top:0;right:10px;position:absolute;transform:translateY(-50%) translateX(100%)}.el-badge__content.is-fixed.is-dot{right:5px}.el-card{border:1px solid #d1dbe5;border-radius:4px;background-color:#fff;overflow:hidden;box-shadow:0 2px 4px 0 rgba(0,0,0,.12),0 0 6px 0 rgba(0,0,0,.04)}.el-card__header{padding:18px 20px;border-bottom:1px solid #d1dbe5;box-sizing:border-box}.el-card__body{padding:20px}.el-rate{height:20px;line-height:1}.el-rate__item{font-size:0;vertical-align:middle}.el-rate__icon,.el-rate__item{display:inline-block;position:relative}.el-rate__icon{font-size:18px;margin-right:6px;color:#bfcbd9;transition:.3s}.el-rate__icon .path2{position:absolute;left:0;top:0}.el-rate__icon.hover{transform:scale(1.15)}.el-rate__decimal{position:absolute;top:0;left:0;display:inline-block;overflow:hidden}.el-rate__text{font-size:14px;vertical-align:middle}.el-steps{font-size:0}.el-steps>:last-child .el-step__line{display:none}.el-steps.is-horizontal{white-space:nowrap}.el-steps.is-horizontal.is-center{text-align:center}.el-step{position:relative;vertical-align:top}.el-step:last-child .el-step__main{padding-right:0}.el-step.is-vertical .el-step__head,.el-step.is-vertical .el-step__main{display:inline-block}.el-step.is-vertical .el-step__main{padding-left:10px}.el-step.is-horizontal,.el-step__line{display:inline-block}.el-step__line{position:absolute;border-color:inherit;background-color:#bfcbd9}.el-step__line.is-vertical{width:2px;box-sizing:border-box;top:32px;bottom:0;left:15px}.el-step__line.is-horizontal{top:15px;height:2px;left:32px;right:0}.el-step__line.is-icon.is-horizontal{right:4px}.el-step__line-inner{display:block;border-width:1px;border-style:solid;border-color:inherit;transition:all .15s;width:0;height:0}.el-step__icon{display:block;line-height:28px}.el-step__icon>*{line-height:inherit;vertical-align:middle}.el-step__head{width:28px;height:28px;border-radius:50%;background-color:transparent;text-align:center;line-height:28px;font-size:28px;vertical-align:top;transition:all .15s}.el-step__head.is-finish{color:#20a0ff;border-color:#20a0ff}.el-step__head.is-error{color:#ff4949;border-color:#ff4949}.el-step__head.is-success{color:#13ce66;border-color:#13ce66}.el-step__head.is-process,.el-step__head.is-wait{color:#bfcbd9;border-color:#bfcbd9}.el-step__head.is-text{font-size:14px;border-width:2px;border-style:solid}.el-step__head.is-text.is-finish{color:#fff;background-color:#20a0ff;border-color:#20a0ff}.el-step__head.is-text.is-error{color:#fff;background-color:#ff4949;border-color:#ff4949}.el-step__head.is-text.is-success{color:#fff;background-color:#13ce66;border-color:#13ce66}.el-step__head.is-text.is-wait{color:#bfcbd9;background-color:#fff;border-color:#bfcbd9}.el-step__head.is-text.is-process{color:#fff;background-color:#bfcbd9;border-color:#bfcbd9}.el-step__main{white-space:normal;padding-right:10px;text-align:left}.el-step__title{font-size:14px;line-height:32px;display:inline-block}.el-step__title.is-finish{font-weight:700;color:#20a0ff}.el-step__title.is-error{font-weight:700;color:#ff4949}.el-step__title.is-success{font-weight:700;color:#13ce66}.el-step__title.is-wait{font-weight:400;color:#97a8be}.el-step__title.is-process{font-weight:700;color:#48576a}.el-step__description{font-size:12px;font-weight:400;line-height:14px}.el-step__description.is-finish{color:#20a0ff}.el-step__description.is-error{color:#ff4949}.el-step__description.is-success{color:#13ce66}.el-step__description.is-wait{color:#bfcbd9}.el-step__description.is-process{color:#8391a5}.el-carousel{overflow-x:hidden;position:relative}.el-carousel__container{position:relative;height:300px}.el-carousel__arrow{border:none;outline:none;padding:0;margin:0;width:36px;height:36px;cursor:pointer;transition:.3s;border-radius:50%;background-color:rgba(31,45,61,.11);color:#fff;position:absolute;top:50%;z-index:10;transform:translateY(-50%);text-align:center;font-size:12px}.el-carousel__arrow:hover{background-color:rgba(31,45,61,.23)}.el-carousel__arrow i{cursor:pointer}.el-carousel__arrow--left{left:16px}.el-carousel__arrow--right{right:16px}.el-carousel__indicators{position:absolute;list-style:none;bottom:0;left:50%;transform:translateX(-50%);margin:0;padding:0;z-index:2}.el-carousel__indicators--outside{bottom:26px;text-align:center;position:static;transform:none}.el-carousel__indicators--outside .el-carousel__indicator:hover button{opacity:.64}.el-carousel__indicators--outside button{background-color:#8391a5;opacity:.24}.el-carousel__indicator{display:inline-block;background-color:transparent;padding:12px 4px;cursor:pointer}.el-carousel__indicator:hover button{opacity:.72}.el-carousel__indicator.is-active button{opacity:1}.el-carousel__button{display:block;opacity:.48;width:30px;height:2px;background-color:#fff;border:none;outline:none;padding:0;margin:0;cursor:pointer;transition:.3s}.carousel-arrow-left-enter,.carousel-arrow-left-leave-active{transform:translateY(-50%) translateX(-10px);opacity:0}.carousel-arrow-right-enter,.carousel-arrow-right-leave-active{transform:translateY(-50%) translateX(10px);opacity:0}.el-scrollbar{overflow:hidden;position:relative}.el-scrollbar:active .el-scrollbar__bar,.el-scrollbar:focus .el-scrollbar__bar,.el-scrollbar:hover .el-scrollbar__bar{opacity:1;transition:opacity .34s ease-out}.el-scrollbar__wrap{overflow:scroll}.el-scrollbar__wrap--hidden-default::-webkit-scrollbar{width:0;height:0}.el-scrollbar__thumb{position:relative;display:block;width:0;height:0;cursor:pointer;border-radius:inherit;background-color:rgba(151,168,190,.3);transition:background-color .3s}.el-scrollbar__thumb:hover{background-color:rgba(151,168,190,.5)}.el-scrollbar__bar{position:absolute;right:2px;bottom:2px;z-index:1;border-radius:4px;opacity:0;transition:opacity .12s ease-out}.el-scrollbar__bar.is-horizontal{height:6px;left:2px}.el-scrollbar__bar.is-horizontal>div{height:100%}.el-scrollbar__bar.is-vertical{width:6px;top:2px}.el-scrollbar__bar.is-vertical>div{width:100%}.el-carousel__item{position:absolute;top:0;left:0;width:100%;height:100%;display:inline-block;transition:.4s ease-in-out;overflow:hidden;z-index:0}.el-carousel__item.is-active{z-index:2}.el-carousel__item--card{width:50%}.el-carousel__item--card.is-in-stage{cursor:pointer;z-index:1}.el-carousel__item--card.is-in-stage.is-hover .el-carousel__mask,.el-carousel__item--card.is-in-stage:hover .el-carousel__mask{opacity:.12}.el-carousel__item--card.is-active{z-index:2}.el-carousel__mask{position:absolute;width:100%;height:100%;top:0;left:0;background-color:#fff;opacity:.24;transition:.2s}.el-collapse{border:1px solid #dfe6ec;border-radius:0}.el-collapse-item:last-child{margin-bottom:-1px}.el-collapse-item.is-active>.el-collapse-item__header .el-collapse-item__header__arrow{transform:rotate(90deg)}.el-collapse-item__header{height:43px;line-height:43px;padding-left:15px;background-color:#fff;color:#48576a;cursor:pointer;border-bottom:1px solid #dfe6ec;font-size:13px}.el-collapse-item__header__arrow{margin-right:8px;transition:transform .3s}.el-collapse-item__wrap{will-change:height;background-color:#fbfdff;overflow:hidden;box-sizing:border-box;border-bottom:1px solid #dfe6ec}.el-collapse-item__content{padding:10px 15px;font-size:13px;color:#1f2d3d;line-height:1.769230769230769}.el-input{position:relative;font-size:14px;display:inline-block;width:100%}.el-input.is-disabled .el-input__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-input.is-disabled .el-input__inner::-webkit-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::-moz-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner:-ms-input-placeholder{color:#bfcbd9}.el-input.is-disabled .el-input__inner::placeholder{color:#bfcbd9}.el-input.is-active .el-input__inner{outline:none;border-color:#20a0ff}.el-input__inner{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;background-image:none;border-radius:4px;border:1px solid #bfcbd9;box-sizing:border-box;color:#1f2d3d;display:block;font-size:inherit;height:36px;line-height:1;outline:none;padding:3px 10px;transition:border-color .2s cubic-bezier(.645,.045,.355,1);width:100%}.el-input__inner::-webkit-input-placeholder{color:#97a8be}.el-input__inner::-moz-placeholder{color:#97a8be}.el-input__inner:-ms-input-placeholder{color:#97a8be}.el-input__inner::placeholder{color:#97a8be}.el-input__inner:hover{border-color:#8391a5}.el-input__inner:focus{outline:none;border-color:#20a0ff}.el-input__icon{position:absolute;width:35px;height:100%;right:0;top:0;text-align:center;color:#bfcbd9;transition:all .3s}.el-input__icon:after{content:"";height:100%;width:0;display:inline-block;vertical-align:middle}.el-input__icon+.el-input__inner{padding-right:35px}.el-input__icon.is-clickable:hover{cursor:pointer;color:#8391a5}.el-input__icon.is-clickable:hover+.el-input__inner{border-color:#8391a5}.el-input--large{font-size:16px}.el-input--large .el-input__inner{height:42px}.el-input--small{font-size:13px}.el-input--small .el-input__inner{height:30px}.el-input--mini{font-size:12px}.el-input--mini .el-input__inner{height:22px}.el-input-group{line-height:normal;display:inline-table;width:100%;border-collapse:separate}.el-input-group>.el-input__inner{vertical-align:middle;display:table-cell}.el-input-group__append,.el-input-group__prepend{background-color:#fbfdff;color:#97a8be;vertical-align:middle;display:table-cell;position:relative;border:1px solid #bfcbd9;border-radius:4px;padding:0 10px;width:1%;white-space:nowrap}.el-input-group__append .el-button,.el-input-group__append .el-select,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select{display:block;margin:-10px}.el-input-group__append .el-button,.el-input-group__append .el-select .el-input__inner,.el-input-group__append .el-select:hover .el-input__inner,.el-input-group__prepend .el-button,.el-input-group__prepend .el-select .el-input__inner,.el-input-group__prepend .el-select:hover .el-input__inner{border-color:transparent;background-color:transparent;color:inherit;border-top:0;border-bottom:0}.el-input-group__append .el-button,.el-input-group__append .el-input,.el-input-group__prepend .el-button,.el-input-group__prepend .el-input{font-size:inherit}.el-input-group__prepend{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}.el-input-group__append{border-left:0}.el-input-group--prepend .el-input__inner,.el-input-group__append{border-top-left-radius:0;border-bottom-left-radius:0}.el-input-group--append .el-input__inner{border-top-right-radius:0;border-bottom-right-radius:0}.el-textarea{display:inline-block;width:100%;vertical-align:bottom}.el-textarea.is-disabled .el-textarea__inner{background-color:#eef1f6;border-color:#d1dbe5;color:#bbb;cursor:not-allowed}.el-textarea.is-disabled .el-textarea__inner::-webkit-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::-moz-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner:-ms-input-placeholder{color:#bfcbd9}.el-textarea.is-disabled .el-textarea__inner::placeholder{color:#bfcbd9}.el-textarea__inner{display:block;resize:vertical;padding:5px 7px;line-height:1.5;box-sizing:border-box;width:100%;font-size:14px;color:#1f2d3d;background-color:#fff;background-image:none;border:1px solid #bfcbd9;border-radius:4px;transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.el-textarea__inner::-webkit-input-placeholder{color:#97a8be}.el-textarea__inner::-moz-placeholder{color:#97a8be}.el-textarea__inner:-ms-input-placeholder{color:#97a8be}.el-textarea__inner::placeholder{color:#97a8be}.el-textarea__inner:hover{border-color:#8391a5}.el-textarea__inner:focus{outline:none;border-color:#20a0ff}.el-cascader{display:inline-block;position:relative}.el-cascader .el-input,.el-cascader .el-input__inner{cursor:pointer}.el-cascader .el-input__icon{transition:none}.el-cascader .el-icon-caret-bottom{transition:transform .3s}.el-cascader .el-icon-caret-bottom.is-reverse{transform:rotate(180deg)}.el-cascader .el-icon-circle-close{z-index:2}.el-cascader.is-disabled .el-cascader__label{z-index:2;color:#bbb}.el-cascader__label{position:absolute;left:0;top:0;height:100%;line-height:34px;padding:0 25px 0 10px;color:#1f2d3d;width:100%;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box;cursor:pointer;font-size:14px;text-align:left}.el-cascader__label span{color:#97a8be}.el-cascader--large{font-size:16px}.el-cascader--large .el-cascader__label{line-height:40px}.el-cascader--small{font-size:13px}.el-cascader--small .el-cascader__label{line-height:28px}.el-cascader-menus{white-space:nowrap;background:#fff;position:absolute;margin:5px 0;z-index:2;border:1px solid #d1dbe5;border-radius:2px;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.04)}.el-cascader-menu{display:inline-block;vertical-align:top;height:204px;overflow:auto;border-right:1px solid #d1dbe5;background-color:#fff;box-sizing:border-box;margin:0;padding:6px 0;min-width:160px}.el-cascader-menu:last-child{border-right:0}.el-cascader-menu__item{font-size:14px;padding:8px 30px 8px 10px;position:relative;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#48576a;height:36px;line-height:1.5;box-sizing:border-box;cursor:pointer}.el-cascader-menu__item:hover{background-color:#e4e8f1}.el-cascader-menu__item.selected{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.selected.hover{background-color:#1c8de0}.el-cascader-menu__item.is-active{color:#fff;background-color:#20a0ff}.el-cascader-menu__item.is-active:hover{background-color:#1c8de0}.el-cascader-menu__item.is-disabled{color:#bfcbd9;background-color:#fff;cursor:not-allowed}.el-cascader-menu__item.is-disabled:hover{background-color:#fff}.el-cascader-menu__item__keyword{font-weight:700}.el-cascader-menu__item--extensible:after{font-family:element-icons;content:"\E606";font-size:12px;transform:scale(.8);color:#bfcbd9;position:absolute;right:10px;margin-top:1px}.el-cascader-menu--flexible{height:auto;max-height:180px;overflow:auto}.el-cascader-menu--flexible .el-cascader-menu__item{overflow:visible}.el-color-hue-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background-color:red;padding:0 2px}.el-color-hue-slider.is-vertical{width:12px;height:180px;padding:2px 0}.el-color-hue-slider.is-vertical .el-color-hue-slider__bar{background:linear-gradient(180deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red)}.el-color-hue-slider.is-vertical .el-color-hue-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-hue-slider__bar{position:relative;background:linear-gradient(90deg,red 0,#ff0 17%,#0f0 33%,#0ff 50%,#00f 67%,#f0f 83%,red);height:100%}.el-color-hue-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-svpanel{position:relative;width:280px;height:180px}.el-color-svpanel__black,.el-color-svpanel__white{position:absolute;top:0;left:0;right:0;bottom:0}.el-color-svpanel__white{background:linear-gradient(90deg,#fff,hsla(0,0%,100%,0))}.el-color-svpanel__black{background:linear-gradient(0deg,#000,transparent)}.el-color-svpanel__cursor{position:absolute}.el-color-svpanel__cursor>div{cursor:head;width:4px;height:4px;box-shadow:0 0 0 1.5px #fff,inset 0 0 1px 1px rgba(0,0,0,.3),0 0 1px 2px rgba(0,0,0,.4);border-radius:50%;transform:translate(-2px,-2px)}.el-color-alpha-slider{position:relative;box-sizing:border-box;width:280px;height:12px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-alpha-slider.is-vertical{width:20px;height:180px}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__bar{background:linear-gradient(180deg,hsla(0,0%,100%,0) 0,#fff)}.el-color-alpha-slider.is-vertical .el-color-alpha-slider__thumb{left:0;top:0;width:100%;height:4px}.el-color-alpha-slider__bar{position:relative;background:linear-gradient(90deg,hsla(0,0%,100%,0) 0,#fff);height:100%}.el-color-alpha-slider__thumb{position:absolute;cursor:pointer;box-sizing:border-box;left:0;top:0;width:4px;height:100%;border-radius:1px;background:#fff;border:1px solid #f0f0f0;box-shadow:0 0 2px rgba(0,0,0,.6);z-index:1}.el-color-dropdown{width:300px}.el-color-dropdown__main-wrapper{margin-bottom:6px}.el-color-dropdown__main-wrapper:after{content:"";display:table;clear:both}.el-color-dropdown__btns{margin-top:6px;text-align:right}.el-color-dropdown__value{float:left;line-height:26px;font-size:12px;color:#1f2d3d}.el-color-dropdown__btn{border:1px solid #dcdcdc;color:#333;line-height:24px;border-radius:2px;padding:0 20px;cursor:pointer;background-color:transparent;outline:none;font-size:12px}.el-color-dropdown__btn[disabled]{color:#ccc;cursor:not-allowed}.el-color-dropdown__btn:hover{color:#20a0ff;border-color:#20a0ff}.el-color-dropdown__link-btn{cursor:pointer;color:#20a0ff;text-decoration:none;padding:15px;font-size:12px}.el-color-dropdown__link-btn:hover{color:#4db3ff}.el-color-picker{display:inline-block;position:relative;line-height:normal}.el-color-picker__trigger{display:inline-block;box-sizing:border-box;height:36px;padding:6px;border:1px solid #bfcbd9;border-radius:4px;font-size:0}.el-color-picker__color{position:relative;display:inline-block;box-sizing:border-box;border:1px solid #666;width:22px;height:22px;text-align:center}.el-color-picker__color.is-alpha{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==)}.el-color-picker__color-inner{position:absolute;left:0;top:0;right:0;bottom:0}.el-color-picker__empty{font-size:12px;vertical-align:middle;color:#666;position:absolute;top:4px;left:4px}.el-color-picker__icon{display:inline-block;position:relative;top:-6px;margin-left:8px;width:12px;color:#888;font-size:12px}.el-color-picker__panel{position:absolute;z-index:10;padding:6px;background-color:#fff;border:1px solid #d1dbe5;box-shadow:0 2px 4px rgba(0,0,0,.12),0 0 6px rgba(0,0,0,.12)}.demo-block{border:1px solid #eaeefb;border-radius:4px;transition:.2s}.demo-block code{font-family:Menlo,Monaco,Consolas,Courier,monospace}.demo-block .demo-button{float:right}.demo-block .source{padding:24px}.demo-block .meta{background-color:#f9fafc;border-top:1px solid #eaeefb;clear:both;overflow:hidden;height:0;transition:height .2s}.demo-block .description{padding:18px 24px;width:40%;box-sizing:border-box;border-left:1px solid #eaeefb;float:right;font-size:14px;line-height:1.8;color:#5e6d82;word-break:break-word}.demo-block .description p{margin:0 0 12px}.demo-block .description code{color:#5e6d82;background-color:#e6effb;margin:0 4px;transform:translateY(-2px);display:inline-block;padding:1px 5px;font-size:12px;border-radius:3px}.demo-block .highlight{width:60%;border-right:1px solid #eaeefb}.demo-block .highlight pre{margin:0}.demo-block .highlight code.hljs{margin:0;border:none;max-height:none;border-radius:0}.demo-block .highlight code.hljs:before{content:none}.demo-block .demo-block-control{border-top:1px solid #eaeefb;height:36px;box-sizing:border-box;background-color:#fff;border-bottom-left-radius:4px;border-bottom-right-radius:4px;text-align:center;margin-top:-1px;color:#d3dce6;cursor:pointer;transition:.2s;position:relative}.demo-block .demo-block-control i{font-size:12px;line-height:36px;transition:.3s}.demo-block .demo-block-control i.hovering{transform:translateX(-40px)}.demo-block .demo-block-control span{position:absolute;transform:translateX(-30px);font-size:14px;line-height:36px;transition:.3s;display:inline-block}.demo-block .demo-block-control:hover{color:#20a0ff;background-color:#f9fafc}.demo-block .demo-block-control .text-slide-enter,.demo-block .demo-block-control .text-slide-leave-active{opacity:0;transform:translateX(10px)}.demo-block.hover{box-shadow:0 0 8px 0 rgba(232,237,250,.6),0 2px 4px 0 rgba(232,237,250,.5)}.footer{height:120px;background-color:#324057;color:#a4aebd;width:100%;z-index:1000;margin-top:-120px}.footer *{word-spacing:0}.footer .container{height:100%;box-sizing:border-box}.footer .footer-main{font-size:0;padding-top:40px;display:inline-block}.footer .footer-main .footer-main-title{line-height:1;font-size:22px;margin:0}.footer .footer-main .footer-main-link{display:inline-block;margin:12px 18px 0 0;line-height:1;font-size:12px;color:#768193}.footer .footer-main .footer-main-link a{color:#768193;text-decoration:none}.footer .footer-social{float:right;line-height:120px}.footer .footer-social .elementdoc{transition:.3s;display:inline-block;line-height:32px;text-align:center;color:#8d99ab;background-color:transparent;width:32px;height:32px;font-size:32px;vertical-align:middle}.footer .footer-social .elementdoc:hover{transform:scale(1.2)}.footer .footer-social .doc-icon-weixin{margin-right:36px}.footer .footer-social .doc-icon-weixin:hover{color:#fff}.footer .footer-social .doc-icon-github{margin-right:0}.footer .footer-social .doc-icon-github:hover{color:#fff}.footer-popover{padding:0;min-width:120px;line-height:normal;box-shadow:0 0 11px 0 rgba(174,187,211,.24)}.footer-popover .footer-popover-title{border-bottom:1px solid #eaeefb;height:30px;line-height:30px;text-align:center;color:#99a9bf;background-color:#f8f9fe}.footer-popover img{width:100px;height:100px;margin:10px}@media (max-width:768px){.footer .footer-social{display:none}}.header .nav[data-v-7ad4e6e1]:after,.header .nav[data-v-7ad4e6e1]:before{display:table;content:""}.header .nav[data-v-7ad4e6e1]:after{clear:both}.headerWrapper[data-v-7ad4e6e1]{height:80px}.header[data-v-7ad4e6e1]{height:80px;background-color:#20a0ff;color:#fff;top:0;left:0;width:100%;line-height:80px;z-index:100;position:relative}.header .container[data-v-7ad4e6e1]{height:100%;box-sizing:border-box}.header h1[data-v-7ad4e6e1]{margin:0;float:left;font-size:32px;font-weight:400}.header h1 a[data-v-7ad4e6e1]{color:#fff;text-decoration:none;display:block}.header h1 span[data-v-7ad4e6e1]{font-size:12px;display:inline-block;width:34px;height:18px;border:1px solid hsla(0,0%,100%,.5);text-align:center;line-height:18px;vertical-align:middle;margin-left:10px;border-radius:3px}.header .nav[data-v-7ad4e6e1]{float:right;height:100%;line-height:80px;background:transparent;padding:0;margin:0}.header .nav-logo-small[data-v-7ad4e6e1],.header .nav-logo[data-v-7ad4e6e1]{vertical-align:sub}.header .nav-logo-small[data-v-7ad4e6e1]{display:none}.header .nav-item[data-v-7ad4e6e1]{margin:0;float:left;list-style:none;position:relative;cursor:pointer;margin-left:20px}.header .nav-item a[data-v-7ad4e6e1]{text-decoration:none;color:#fff;display:block;padding:0 20px;opacity:.8}.header .nav-item a.active[data-v-7ad4e6e1],.header .nav-item a[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item a.active[data-v-7ad4e6e1]{font-weight:700}.header .nav-item a.active[data-v-7ad4e6e1]:before{content:"";display:block;position:absolute;bottom:0;left:0;width:100%;height:4px;background:#99d2fc}.header .nav-item[data-v-7ad4e6e1]:last-child{cursor:default;margin-left:34px}.header .nav-item:last-child span[data-v-7ad4e6e1]{opacity:.8}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]{cursor:pointer;display:inline-block;height:100%}.header .nav-item:last-child .nav-lang[data-v-7ad4e6e1]:hover{opacity:1}.header .nav-item:last-child .nav-lang.active[data-v-7ad4e6e1]{font-weight:700;opacity:1}.header-home[data-v-7ad4e6e1]{position:fixed;top:0;background-color:rgba(32,160,255,0)}@media (max-width:850px){.header .nav-logo[data-v-7ad4e6e1]{display:none}.header .nav-logo-small[data-v-7ad4e6e1]{display:inline-block}.header .nav-item[data-v-7ad4e6e1]{margin-left:6px}.header .nav-item a[data-v-7ad4e6e1]{padding:0 5px}.header .nav-item[data-v-7ad4e6e1]:last-child{margin-left:10px}}@media (max-width:700px){.header .container[data-v-7ad4e6e1]{padding:0 12px}.header .nav-item a[data-v-7ad4e6e1],.header .nav-lang[data-v-7ad4e6e1]{font-size:12px;vertical-align:top}}.side-nav{width:100%;box-sizing:border-box;padding-right:30px}.side-nav li{list-style:none}.side-nav ul{padding:0;margin:0;overflow:hidden}.side-nav .nav-dropdown{margin-bottom:6px;width:100%}.side-nav .nav-dropdown span{display:block;width:100%;font-size:16px;color:#5e6d82;line-height:40px;transition:.2s;padding-bottom:6px;border-bottom:1px solid #eaeefb}.side-nav .nav-dropdown span:hover{cursor:pointer}.side-nav .nav-dropdown i{transition:.2s;font-size:12px;color:#d3dce6}.side-nav .nav-dropdown.is-active i,.side-nav .nav-dropdown.is-active span,.side-nav .nav-dropdown:hover i,.side-nav .nav-dropdown:hover span{color:#20a0ff}.side-nav .nav-dropdown.is-active i{transform:rotate(180deg) translateY(2px)}.side-nav .nav-item a{font-size:16px;color:#5e6d82;line-height:40px;height:40px;margin:0;padding:0;text-decoration:none;display:block;position:relative;transition:all .3s}.side-nav .nav-item a.active{color:#20a0ff}.side-nav .nav-item .nav-item a{display:block;height:40px;line-height:40px;font-size:13px;padding-left:24px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.side-nav .nav-item .nav-item a:hover{color:#20a0ff}.side-nav .nav-group__title{font-size:12px;color:#99a9bf;padding-left:8px;line-height:26px;margin-top:10px}.nav-dropdown-list{width:120px;margin-top:-8px}.nav-dropdown-list li{font-size:14px}.footer-nav{padding:24px 0;color:#99a9bf;font-size:14px}.footer-nav:after{content:"";display:block;clear:both}.footer-nav i{transition:.3s;color:#d9def1;vertical-align:baseline}.footer-nav-link{cursor:pointer;transition:.3s}.footer-nav-link:hover,.footer-nav-link:hover i{color:#20a0ff}.footer-nav-left{float:left;margin-left:-4px}.footer-nav-right{float:right;margin-right:-4px}
\ No newline at end of file
diff --git a/element-ui.44813ae.js b/element-ui.44813ae.js
new file mode 100644
index 000000000..92bf1578b
--- /dev/null
+++ b/element-ui.44813ae.js
@@ -0,0 +1,13 @@
+webpackJsonp([1,2],[function(e,t,i){e.exports=i(598)},,function(e,t){e.exports=Vue},,,,,,,,,,,function(e,t){e.exports=function(e,t,i,n,s){var o,a=e=e||{},r=typeof e.default;"object"!==r&&"function"!==r||(o=e,a=e.default);var l="function"==typeof a?a.options:a;t&&(l.render=t.render,l.staticRenderFns=t.staticRenderFns),n&&(l._scopeId=n);var u;if(s?(u=function(e){e=e||this.$vnode&&this.$vnode.ssrContext,e||"undefined"==typeof __VUE_SSR_CONTEXT__||(e=__VUE_SSR_CONTEXT__),i&&i.call(this,e),e&&e._registeredComponents&&e._registeredComponents.add(s)},l._ssrRegister=u):i&&(u=i),u){var c=l.beforeCreate;l.beforeCreate=c?[].concat(c,u):[u]}return{esModule:o,exports:a,options:l}}},,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.i18n=t.use=t.t=void 0;var s=i(16),o=n(s),a=i(2),r=n(a),l=i(17),u=n(l),c=i(18),d=n(c),h=(0,d.default)(r.default),f=o.default,p=!1,m=function(){var e=Object.getPrototypeOf(this||r.default).$t;if("function"==typeof e&&r.default.locale)return p||(p=!0,r.default.locale(r.default.config.lang,(0,u.default)(f,r.default.locale(r.default.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},v=t.t=function(e,t){var i=m.apply(this,arguments);if(null!==i&&void 0!==i)return i;for(var n=e.split("."),s=f,o=0,a=n.length;o<a;o++){var r=n[o];if(i=s[r],o===a-1)return h(i,t);if(!i)return"";s=i}return""},g=t.use=function(e){f=e||f},y=t.i18n=function(e){m=e||m};t.default={use:g,t:v,i18n:y}},function(e,t){"use strict";t.__esModule=!0,t.default={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部",sumText:"合计"},tree:{emptyText:"暂无数据"},transfer:{noMatch:"无匹配数据",noData:"无数据",titles:["列表 1","列表 2"],filterPlaceholder:"请输入搜索内容",noCheckedFormat:"共 {total} 项",hasCheckedFormat:"已选 {checked}/{total} 项"}}}},function(e,t,i){var n,s;!function(o,a){n=a,s="function"==typeof n?n.call(t,i,t,e):n,!(void 0!==s&&(e.exports=s))}(this,function(){function e(e){var t=e&&"object"==typeof e;return t&&"[object RegExp]"!==Object.prototype.toString.call(e)&&"[object Date]"!==Object.prototype.toString.call(e)}function t(e){return Array.isArray(e)?[]:{}}function i(i,n){var s=n&&n.clone===!0;return s&&e(i)?o(t(i),i,n):i}function n(t,n,s){var a=t.slice();return n.forEach(function(n,r){"undefined"==typeof a[r]?a[r]=i(n,s):e(n)?a[r]=o(t[r],n,s):t.indexOf(n)===-1&&a.push(i(n,s))}),a}function s(t,n,s){var a={};return e(t)&&Object.keys(t).forEach(function(e){a[e]=i(t[e],s)}),Object.keys(n).forEach(function(r){e(n[r])&&t[r]?a[r]=o(t[r],n[r],s):a[r]=i(n[r],s)}),a}function o(e,t,o){var a=Array.isArray(t),r=o||{arrayMerge:n},l=r.arrayMerge||n;return a?Array.isArray(e)?l(e,t,o):i(t,o):s(e,t,o)}return o.all=function(e,t){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,i){return o(e,i,t)})},o})},function(e,t,i){"use strict";t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=function(e){function t(e){for(var t=arguments.length,i=Array(t>1?t-1:0),a=1;a<t;a++)i[a-1]=arguments[a];return 1===i.length&&"object"===n(i[0])&&(i=i[0]),i&&i.hasOwnProperty||(i={}),e.replace(o,function(t,n,o,a){var r=void 0;return"{"===e[a-1]&&"}"===e[a+t.length]?o:(r=(0,s.hasOwn)(i,o)?i[o]:null,null===r||void 0===r?"":r)})}return t};var s=i(19),o=/(%|)\{([0-9a-zA-Z_]+)\}/g},function(e,t){"use strict";function i(e,t){return o.call(e,t)}function n(e,t){for(var i in t)e[i]=t[i];return e}function s(e){for(var t={},i=0;i<e.length;i++)e[i]&&n(t,e[i]);return t}t.__esModule=!0,t.hasOwn=i,t.toObject=s;var o=Object.prototype.hasOwnProperty},,,,,,,,,,,,function(e,t){e.exports=function(e,t,i,n){function s(){function s(){a=Number(new Date),i.apply(l,c)}function r(){o=void 0}var l=this,u=Number(new Date)-a,c=arguments;n&&!o&&s(),o&&clearTimeout(o),void 0===n&&u>e?s():t!==!0&&(o=setTimeout(n?r:s,void 0===n?e-u:e))}var o,a=0;return"boolean"!=typeof t&&(n=i,i=t,t=void 0),s}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!e||!t)return!1;if(t.indexOf(" ")!==-1)throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):(" "+e.className+" ").indexOf(" "+t+" ")>-1}function o(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),o=0,a=n.length;o<a;o++){var r=n[o];r&&(e.classList?e.classList.add(r):s(e,r)||(i+=" "+r))}e.classList||(e.className=i)}}function a(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",o=0,a=i.length;o<a;o++){var r=i[o];r&&(e.classList?e.classList.remove(r):s(e,r)&&(n=n.replace(" "+r+" "," ")))}e.classList||(e.className=m(n))}}function r(e,t,i){if(e&&t)if("object"===("undefined"==typeof t?"undefined":l(t)))for(var n in t)t.hasOwnProperty(n)&&r(e,n,t[n]);else t=v(t),"opacity"===t&&p<9?e.style.filter=isNaN(i)?"":"alpha(opacity="+100*i+")":e.style[t]=i}t.__esModule=!0,t.getStyle=t.once=t.off=t.on=void 0;var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.hasClass=s,t.addClass=o,t.removeClass=a,t.setStyle=r;var u=i(2),c=n(u),d=c.default.prototype.$isServer,h=/([\:\-\_]+(.))/g,f=/^moz([A-Z])/,p=d?0:Number(document.documentMode),m=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},v=function(e){return e.replace(h,function(e,t,i,n){return n?i.toUpperCase():i}).replace(f,"Moz$1")},g=t.on=function(){return!d&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)}}(),y=t.off=function(){return!d&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)}}();t.once=function(e,t,i){var n=function n(){i&&i.apply(this,arguments),y(e,t,n)};g(e,t,n)},t.getStyle=p<9?function(e,t){if(!d){if(!e||!t)return null;t=v(t),"float"===t&&(t="styleFloat");try{switch(t){case"opacity":try{return e.filters.item("alpha").opacity/100}catch(e){return 1}default:return e.style[t]||e.currentStyle?e.currentStyle[t]:null}}catch(i){return e.style[t]}}}:function(e,t){if(!d){if(!e||!t)return null;t=v(t),"float"===t&&(t="cssFloat");try{var i=document.defaultView.getComputedStyle(e,"");return e.style[t]||i?i[t]:null}catch(i){return e.style[t]}}}},,,,,,,function(e,t,i){var n;!function(s){"use strict";function o(e,t){for(var i=[],n=0,s=e.length;n<s;n++)i.push(e[n].substr(0,t));return i}function a(e){return function(t,i,n){var s=n[e].indexOf(i.charAt(0).toUpperCase()+i.substr(1).toLowerCase());~s&&(t.month=s)}}function r(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var l={},u=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,c=/\d\d?/,d=/\d{3}/,h=/\d{4}/,f=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,p=function(){},m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],v=["January","February","March","April","May","June","July","August","September","October","November","December"],g=o(v,3),y=o(m,3);l.i18n={dayNamesShort:y,dayNames:m,monthNamesShort:g,monthNames:v,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][e%10>3?0:(e-e%10!==10)*e%10]}};var b={D:function(e){return e.getDay()},DD:function(e){return r(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return r(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return r(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return r(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return r(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return r(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return r(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return r(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return r(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(t>0?"-":"+")+r(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},_={d:[c,function(e,t){e.day=t}],M:[c,function(e,t){e.month=t-1}],yy:[c,function(e,t){var i=new Date,n=+(""+i.getFullYear()).substr(0,2);e.year=""+(t>68?n-1:n)+t}],h:[c,function(e,t){e.hour=t}],m:[c,function(e,t){e.minute=t}],s:[c,function(e,t){e.second=t}],yyyy:[h,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[d,function(e,t){e.millisecond=t}],D:[c,p],ddd:[f,p],MMM:[f,a("monthNamesShort")],MMMM:[f,a("monthNames")],a:[f,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=+(60*n[1])+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};_.DD=_.D,_.dddd=_.ddd,_.Do=_.dd=_.d,_.mm=_.m,_.hh=_.H=_.HH=_.h,_.MM=_.M,_.ss=_.s,_.A=_.a,l.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},l.format=function(e,t,i){var n=i||l.i18n;if("number"==typeof e&&(e=new Date(e)),"[object Date]"!==Object.prototype.toString.call(e)||isNaN(e.getTime()))throw new Error("Invalid Date in fecha.format");return t=l.masks[t]||t||l.masks.default,t.replace(u,function(t){return t in b?b[t](e,n):t.slice(1,t.length-1)})},l.parse=function(e,t,i){var n=i||l.i18n;if("string"!=typeof t)throw new Error("Invalid format in fecha.parse");if(t=l.masks[t]||t,e.length>1e3)return!1;var s=!0,o={};if(t.replace(u,function(t){if(_[t]){var i=_[t],a=e.search(i[0]);~a?e.replace(i[0],function(t){return i[1](o,t,n),e=e.substr(a+t.length),t}):s=!1}return _[t]?"":t.slice(1,t.length-1)}),!s)return!1;var a=new Date;o.isPm===!0&&null!=o.hour&&12!==+o.hour?o.hour=+o.hour+12:o.isPm===!1&&12===+o.hour&&(o.hour=0);var r;return null!=o.timezoneOffset?(o.minute=+(o.minute||0)-+o.timezoneOffset,r=new Date(Date.UTC(o.year||a.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0))):r=new Date(o.year||a.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0),r},"undefined"!=typeof e&&e.exports?e.exports=l:(n=function(){return l}.call(t,i,t,e),!(void 0!==n&&(e.exports=n)))}(void 0)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(599),o=n(s),a=i(639),r=n(a),l=i(643),u=n(l),c=i(650),d=n(c),h=i(661),f=n(h),p=i(665),m=n(p),v=i(669),g=n(v),y=i(673),b=n(y),_=i(678),C=n(_),x=i(682),w=n(x),M=i(609),k=n(M),S=i(686),D=n(S),I=i(690),N=n(I),T=i(694),E=n(T),$=i(698),O=n($),A=i(702),P=n(A),L=i(706),z=n(L),j=i(710),F=n(j),V=i(714),R=n(V),B=i(604),W=n(B),H=i(638),Y=n(H),U=i(718),q=n(U),G=i(653),Z=n(G),Q=i(657),K=n(Q),J=i(722),X=n(J),ee=i(739),te=n(ee),ie=i(741),ne=n(ie),se=i(768),oe=n(se),ae=i(773),re=n(ae),le=i(778),ue=n(le),ce=i(729),de=n(ce),he=i(783),fe=n(he),pe=i(788),me=n(pe),ve=i(792),ge=n(ve),ye=i(796),be=n(ye),_e=i(800),Ce=n(_e),xe=i(829),we=n(xe),Me=i(837),ke=n(Me),Se=i(626),De=n(Se),Ie=i(841),Ne=n(Ie),Te=i(851),Ee=n(Te),$e=i(855),Oe=n($e),Ae=i(860),Pe=n(Ae),Le=i(867),ze=n(Le),je=i(873),Fe=n(je),Ve=i(877),Re=n(Ve),Be=i(881),We=n(Be),He=i(883),Ye=n(He),Ue=i(888),qe=n(Ue),Ge=i(902),Ze=n(Ge),Qe=i(906),Ke=n(Qe),Je=i(916),Xe=n(Je),et=i(920),tt=n(et),it=i(924),nt=n(it),st=i(928),ot=n(st),at=i(932),rt=n(at),lt=i(936),ut=n(lt),ct=i(630),dt=n(ct),ht=i(940),ft=n(ht),pt=i(944),mt=n(pt),vt=i(948),gt=n(vt),yt=i(952),bt=n(yt),_t=i(959),Ct=n(_t),xt=i(977),wt=n(xt),Mt=i(15),kt=n(Mt),St=i(984),Dt=n(St),It=[o.default,r.default,u.default,d.default,f.default,m.default,g.default,b.default,C.default,w.default,k.default,D.default,N.default,E.default,O.default,P.default,z.default,F.default,R.default,W.default,Y.default,q.default,Z.default,K.default,X.default,te.default,ne.default,oe.default,re.default,ue.default,de.default,me.default,ge.default,be.default,Ce.default,we.default,ke.default,De.default,Ne.default,Ee.default,Pe.default,Fe.default,Re.default,We.default,Ye.default,qe.default,Ze.default,Xe.default,tt.default,nt.default,ot.default,rt.default,ut.default,dt.default,ft.default,mt.default,gt.default,bt.default,Ct.default,wt.default,Dt.default],Nt=function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.installed||(kt.default.use(i.locale),kt.default.i18n(i.i18n),It.map(function(e){t.component(e.name,e)}),t.use(ze.default.directive),t.prototype.$loading=ze.default.service,t.prototype.$msgbox=fe.default,t.prototype.$alert=fe.default.alert,t.prototype.$confirm=fe.default.confirm,t.prototype.$prompt=fe.default.prompt,t.prototype.$notify=Oe.default,t.prototype.$message=Ke.default)};"undefined"!=typeof window&&window.Vue&&Nt(window.Vue),e.exports={version:"1.3.0-beta.1",locale:kt.default.use,i18n:kt.default.i18n,install:Nt,CollapseTransition:Dt.default,Loading:ze.default,Pagination:o.default,Dialog:r.default,Autocomplete:u.default,Dropdown:d.default,DropdownMenu:f.default,DropdownItem:m.default,Menu:g.default,Submenu:b.default,MenuItem:C.default,MenuItemGroup:w.default,Input:k.default,InputNumber:D.default,Radio:N.default,RadioGroup:E.default,RadioButton:O.default,Checkbox:P.default,CheckboxButton:z.default,CheckboxGroup:F.default,Switch:R.default,Select:W.default,Option:Y.default,OptionGroup:q.default,Button:Z.default,ButtonGroup:K.default,Table:X.default,TableColumn:te.default,DatePicker:ne.default,TimeSelect:oe.default,TimePicker:re.default,Popover:ue.default,Tooltip:de.default,MessageBox:fe.default,Breadcrumb:me.default,BreadcrumbItem:ge.default,Form:be.default,FormItem:Ce.default,Tabs:we.default,TabPane:ke.default,Tag:De.default,Tree:Ne.default,Alert:Ee.default,Notification:Oe.default,Slider:Pe.default,Icon:Fe.default,Row:Re.default,Col:We.default,Upload:Ye.default,Progress:qe.default,Spinner:Ze.default,Message:Ke.default,Badge:Xe.default,Card:tt.default,Rate:nt.default,Steps:ot.default,Step:rt.default,Carousel:ut.default,Scrollbar:dt.default,CarouselItem:ft.default,Collapse:mt.default,CollapseItem:gt.default,Cascader:bt.default,ColorPicker:Ct.default,Transfer:wt.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(600),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(601),o=n(s),a=i(604),r=n(a),l=i(638),u=n(l),c=i(608),d=n(c);t.default={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}}},data:function(){return{internalCurrentPage:1,internalPageSize:0}},render:function(e){var t=e("div",{class:"el-pagination"},[]),i=this.layout||"";if(i){var n={prev:e("prev",null,[]),jumper:e("jumper",null,[]),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount},on:{change:this.handleCurrentChange}},[]),next:e("next",null,[]),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}},[]),slot:e("my-slot",null,[]),total:e("total",null,[])},s=i.split(",").map(function(e){return e.trim()}),o=e("div",{class:"el-pagination__rightwrapper"},[]),a=!1;return this.small&&(t.data.class+=" el-pagination--small"),s.forEach(function(e){return"->"===e?void(a=!0):void(a?o.children.push(n[e]):t.children.push(n[e]))}),a&&t.children.push(o),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-prev",{disabled:this.$parent.internalCurrentPage<=1}],on:{click:this.$parent.prev}},[e("i",{class:"el-icon el-icon-arrow-left"},[])])}},Next:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-next",{disabled:this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount}],on:{click:this.$parent.next}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])}},Sizes:{mixins:[d.default],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e){Array.isArray(e)&&(this.$parent.internalPageSize=e.indexOf(this.$parent.pageSize)>-1?this.$parent.pageSize:this.pageSizes[0])}}},render:function(e){var t=this;return e("span",{class:"el-pagination__sizes"},[e("el-select",{attrs:{value:this.$parent.internalPageSize},on:{input:this.handleChange}},[this.pageSizes.map(function(i){return e("el-option",{attrs:{value:i,label:i+" "+t.t("el.pagination.pagesize")}},[])})])])},components:{ElSelect:r.default,ElOption:u.default},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[d.default],data:function(){return{oldValue:null}},methods:{handleFocus:function(e){this.oldValue=e.target.value},handleChange:function(e){var t=e.target;this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(t.value),this.oldValue=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("input",{class:"el-pagination__editor",attrs:{type:"number",min:1,max:this.internalPageCount,value:this.$parent.internalCurrentPage,number:!0},on:{change:this.handleChange,focus:this.handleFocus},style:{width:"30px"}},[]),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[d.default],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:o.default},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)},prev:function(){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e)},next:function(){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e)},getValidCurrentPage:function(e){e=parseInt(e,10);var t="number"==typeof this.internalPageCount,i=void 0;return t?e<1?i=1:e>this.internalPageCount&&(i=this.internalPageCount):(isNaN(e)||e<1)&&(i=1),void 0===i&&isNaN(e)?i=1:0===i&&(i=1),void 0===i?e:i}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.ceil(this.total/this.internalPageSize):"number"==typeof this.pageCount?this.pageCount:null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=e}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=e}},internalCurrentPage:function(e,t){var i=this;e=parseInt(e,10),e=isNaN(e)?t||1:this.getValidCurrentPage(e),void 0!==e?this.$nextTick(function(){i.internalCurrentPage=e,t!==e&&i.$emit("current-change",i.internalCurrentPage)}):this.$emit("current-change",this.internalCurrentPage)},internalPageCount:function(e){var t=this.internalCurrentPage;e>0&&0===t?this.internalCurrentPage=1:t>e&&(this.internalCurrentPage=0===e?1:e)}}}},function(e,t,i){var n=i(13)(i(602),i(603),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElPager",props:{currentPage:Number,pageCount:Number},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage;t.className.indexOf("more")!==-1&&(t.className.indexOf("quickprev")!==-1?i=s-5:t.className.indexOf("quicknext")!==-1&&(i=s+5)),isNaN(i)||(i<1&&(i=1),i>n&&(i=n)),i!==s&&this.$emit("change",i)}}},computed:{pagers:function(){var e=7,t=Number(this.currentPage),i=Number(this.pageCount),n=!1,s=!1;i>e&&(t>e-2&&(n=!0),t<i-2&&(s=!0));var o=[];if(n&&!s)for(var a=i-(e-2),r=a;r<i;r++)o.push(r);else if(!n&&s)for(var l=2;l<e;l++)o.push(l);else if(n&&s)for(var u=Math.floor(e/2)-1,c=t-u;c<=t+u;c++)o.push(c);else for(var d=2;d<i;d++)o.push(d);return this.showPrevMore=n,this.showNextMore=s,o}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-pager",on:{click:e.onPagerClick}},[e.pageCount>0?i("li",{staticClass:"number",class:{active:1===e.currentPage}},[e._v("1")]):e._e(),e.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[e.quickprevIconClass],on:{mouseenter:function(t){e.quickprevIconClass="el-icon-d-arrow-left"},mouseleave:function(t){e.quickprevIconClass="el-icon-more"}}}):e._e(),e._l(e.pagers,function(t){return i("li",{staticClass:"number",class:{active:e.currentPage===t}},[e._v(e._s(t))])}),e.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[e.quicknextIconClass],on:{mouseenter:function(t){e.quicknextIconClass="el-icon-d-arrow-right"},mouseleave:function(t){e.quicknextIconClass="el-icon-more"}}}):e._e(),e.pageCount>1?i("li",{staticClass:"number",class:{active:e.currentPage===e.pageCount}},[e._v(e._s(e.pageCount))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(605),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(606),i(637),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s),a=i(608),r=n(a),l=i(609),u=n(l),c=i(615),d=n(c),h=i(623),f=n(h),p=i(626),m=n(p),v=i(630),g=n(v),y=i(635),b=n(y),_=i(636),C=n(_),x=i(71),w=i(632),M=i(15),k={large:42,small:30,mini:22};t.default={mixins:[o.default,r.default],name:"ElSelect",componentName:"ElSelect",computed:{iconClass:function(){var e=this.clearable&&!this.disabled&&this.inputHovering&&!this.multiple&&void 0!==this.value&&""!==this.value;return e?"circle-close is-show-close":this.remote&&this.filterable?"":"caret-top"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.options.length>0&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var e=this,t=this.options.filter(function(e){return!e.created}).some(function(t){return t.currentLabel===e.query});return this.filterable&&this.allowCreate&&""!==this.query&&!t}},components:{ElInput:u.default,ElSelectMenu:d.default,ElOption:f.default,ElTag:m.default,ElScrollbar:g.default},directives:{Clickoutside:C.default},props:{name:String,value:{required:!0},size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return(0,M.t)("el.select.placeholder")}}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},isSelect:!0,inputLength:20,inputWidth:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,dropdownUl:null,visible:!1,selectedLabel:"",hoverIndex:-1,query:"",bottomOverflow:0,topOverflow:0,optionsAllDisabled:!1,inputHovering:!1,currentPlaceholder:""}},watch:{placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e){this.multiple&&(this.resetInputHeight(),e.length>0||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e)},query:function(e){var t=this;this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable&&(this.inputLength=15*this.$refs.input.value.length+20,this.managePlaceholder(),this.resetInputHeight()),this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e),this.broadcast("ElOption","resetIndex")):"function"==typeof this.filterMethod?(this.filterMethod(e),this.broadcast("ElOptionGroup","queryChange")):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e),this.broadcast("ElOptionGroup","queryChange"))},visible:function(e){var t=this;e?(this.handleIconShow(),this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.selectedLabel,this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.$refs.reference.$el.querySelector("input").blur(),this.handleIconHide(),this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.selectedLabel="",this.inputLength=20,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||(this.getOverflows(),this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdOption?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel)))),this.$emit("visible-change",e)},options:function(e){if(!this.$isServer){this.optionsAllDisabled=e.length===e.filter(function(e){return e.disabled===!0}).length,this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");[].indexOf.call(t,document.activeElement)===-1&&this.setSelected()}}},methods:{handleIconHide:function(){var e=this.$el.querySelector(".el-input__icon");e&&(0,x.removeClass)(e,"is-reverse")},handleIconShow:function(){var e=this.$el.querySelector(".el-input__icon");e&&!(0,x.hasClass)(e,"el-icon-circle-close")&&(0,x.addClass)(e,"is-reverse")},handleMenuEnter:function(){this.dropdownUl||(this.dropdownUl=this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),this.getOverflows()),!this.multiple&&this.dropdownUl&&this.resetMenuScroll()},getOverflows:function(){if(this.dropdownUl&&this.selected&&this.selected.$el){var e=this.selected.$el.getBoundingClientRect(),t=this.$refs.popper.$el.getBoundingClientRect();this.bottomOverflow=e.bottom-t.bottom,this.topOverflow=e.top-t.top}},resetMenuScroll:function(){this.bottomOverflow>0?this.dropdownUl.scrollTop+=this.bottomOverflow:this.topOverflow<0&&(this.dropdownUl.scrollTop+=this.topOverflow)},getOption:function(e){for(var t=void 0,i=this.cachedOptions.length-1;i>=0;i--){var n=this.cachedOptions[i];if(n.value===e){t=n;break}}if(t)return t;var s="string"==typeof e||"number"==typeof e?e:"",o={value:e,currentLabel:s};return this.multiple&&(o.hitState=!1),o},setSelected:function(){var e=this;if(!this.multiple){var t=this.getOption(this.value);return t.created?(this.createdLabel=t.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=t.currentLabel,this.selected=t,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(t){i.push(e.getOption(t))}),this.selected=i,this.$nextTick(function(){e.resetInputHeight()})},handleFocus:function(){this.visible=!0},handleIconClick:function(e){this.iconClass.indexOf("circle-close")>-1?this.deleteSelected(e):this.toggleMenu()},handleMouseDown:function(e){"INPUT"===e.target.tagName&&this.visible&&(this.handleClose(),e.preventDefault())},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return e===!0||e===!1?(t.hitState=e,e):(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){e.target.value.length<=0&&!this.toggleLastOptionHitState()&&this.value.pop()},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var e=this;this.$nextTick(function(){if(e.$refs.reference){var t=e.$refs.reference.$el.childNodes,i=[].filter.call(t,function(e){return"INPUT"===e.tagName})[0];i.style.height=Math.max(e.$refs.tags.clientHeight+6,k[e.size]||36)+"px",e.visible&&e.emptyText!==!1&&e.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var e=this;setTimeout(function(){e.multiple?e.selected.length>0?e.hoverIndex=Math.min.apply(null,e.selected.map(function(t){return e.options.indexOf(t)})):e.hoverIndex=-1:e.hoverIndex=e.options.indexOf(e.selected)},300)},handleOptionSelect:function(e){if(this.multiple){var t=-1;this.value.forEach(function(i,n){i===e.value&&(t=n)}),t>-1?this.value.splice(t,1):(this.multipleLimit<=0||this.value.length<this.multipleLimit)&&this.value.push(e.value),e.created&&(this.query="",this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.visible=!1},toggleMenu:function(){this.filterable&&""===this.query&&this.visible||this.disabled||(this.visible=!this.visible)},navigateOptions:function(e){return this.visible?void(0!==this.options.length&&0!==this.filteredOptionsCount&&(this.optionsAllDisabled=this.options.length===this.options.filter(function(e){return e.disabled===!0}).length,this.optionsAllDisabled||("next"===e&&(this.hoverIndex++,
+this.hoverIndex===this.options.length&&(this.hoverIndex=0),this.resetScrollTop(),this.options[this.hoverIndex].disabled!==!0&&this.options[this.hoverIndex].groupDisabled!==!0&&this.options[this.hoverIndex].visible||this.navigateOptions("next")),"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1),this.resetScrollTop(),this.options[this.hoverIndex].disabled!==!0&&this.options[this.hoverIndex].groupDisabled!==!0&&this.options[this.hoverIndex].visible||this.navigateOptions("prev"))))):void(this.visible=!0)},resetScrollTop:function(){var e=this.options[this.hoverIndex].$el.getBoundingClientRect().bottom-this.$refs.popper.$el.getBoundingClientRect().bottom,t=this.options[this.hoverIndex].$el.getBoundingClientRect().top-this.$refs.popper.$el.getBoundingClientRect().top;e>0&&(this.dropdownUl.scrollTop+=e),t<0&&(this.dropdownUl.scrollTop+=t)},selectOption:function(){this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex])},deleteSelected:function(e){e.stopPropagation(),this.$emit("input",""),this.visible=!1},deleteTag:function(e,t){var i=this.selected.indexOf(t);i>-1&&!this.disabled&&(this.value.splice(i,1),this.$emit("remove-tag",t)),e.stopPropagation()},onInputChange:function(){this.filterable&&(this.query=this.selectedLabel)},onOptionDestroy:function(e){this.optionsCount--,this.filteredOptionsCount--;var t=this.options.indexOf(e);t>-1&&this.options.splice(t,1),this.broadcast("ElOption","resetIndex")},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()}},created:function(){var e=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.setSelected(),this.debouncedOnInputChange=(0,b.default)(this.debounce,function(){e.onInputChange()}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("onOptionDestroy",this.onOptionDestroy),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&this.value.length>0&&(this.currentPlaceholder=""),(0,w.addResizeListener)(this.$el,this.handleResize),this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){e.$refs.reference&&e.$refs.reference.$el&&(e.inputWidth=e.$refs.reference.$el.getBoundingClientRect().width)})},beforeDestroy:function(){this.$el&&this.handleResize&&(0,w.removeResizeListener)(this.$el,this.handleResize)}}},function(e,t){"use strict";function i(e,t,n){this.$children.forEach(function(s){var o=s.$options.componentName;o===e?s.$emit.apply(s,[t].concat(n)):i.apply(s,[e,t].concat([n]))})}t.__esModule=!0,t.default={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)n=n.$parent,n&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,n){i.call(this,e,t,n)}}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(15);t.default={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.t.apply(this,t)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(610),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(611),i(614),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s),a=i(612),r=n(a),l=i(613),u=n(l);t.default={name:"ElInput",componentName:"ElInput",mixins:[o.default],data:function(){return{currentValue:this.value,textareaCalcStyle:{}}},props:{value:[String,Number],placeholder:String,size:String,resize:String,readonly:Boolean,autofocus:Boolean,icon:String,disabled:Boolean,type:{type:String,default:"text"},name:String,autosize:{type:[Boolean,Object],default:!1},rows:{type:Number,default:2},autoComplete:{type:String,default:"off"},form:String,maxlength:Number,minlength:Number,max:{},min:{},step:{},validateEvent:{type:Boolean,default:!0},onIconClick:Function},computed:{validating:function(){return"validating"===this.$parent.validateState},textareaStyle:function(){return(0,u.default)({},this.textareaCalcStyle,{resize:this.resize})}},watch:{value:function(e,t){this.setCurrentValue(e)}},methods:{handleBlur:function(e){this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.currentValue])},inputSelect:function(){this.$refs.input.select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize,t=this.type;if(e&&"textarea"===t){var i=e.minRows,n=e.maxRows;this.textareaCalcStyle=(0,r.default)(this.$refs.textarea,i,n)}}},handleFocus:function(e){this.$emit("focus",e)},handleInput:function(e){var t=e.target.value;this.$emit("input",t),this.setCurrentValue(t),this.$emit("change",t)},handleIconClick:function(e){this.onIconClick&&this.onIconClick(e),this.$emit("click",e)},setCurrentValue:function(e){var t=this;e!==this.currentValue&&(this.$nextTick(function(e){t.resizeTextarea()}),this.currentValue=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e]))}},created:function(){this.$on("inputSelect",this.inputSelect)},mounted:function(){this.resizeTextarea()}}},function(e,t){"use strict";function i(e){var t=window.getComputedStyle(e),i=t.getPropertyValue("box-sizing"),n=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),s=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width")),o=a.map(function(e){return e+":"+t.getPropertyValue(e)}).join(";");return{contextStyle:o,paddingSize:n,borderSize:s,boxSizing:i}}function n(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;s||(s=document.createElement("textarea"),document.body.appendChild(s));var a=i(e),r=a.paddingSize,l=a.borderSize,u=a.boxSizing,c=a.contextStyle;s.setAttribute("style",c+";"+o),s.value=e.value||e.placeholder||"";var d=s.scrollHeight;"border-box"===u?d+=l:"content-box"===u&&(d-=r),s.value="";var h=s.scrollHeight-r;if(null!==t){var f=h*t;"border-box"===u&&(f=f+r+l),d=Math.max(f,d)}if(null!==n){var p=h*n;"border-box"===u&&(p=p+r+l),d=Math.min(p,d)}return{height:d+"px"}}t.__esModule=!0,t.default=n;var s=void 0,o="\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n",a=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"]},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var s in n)if(n.hasOwnProperty(s)){var o=n[s];void 0!==o&&(e[s]=o)}}return e}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{class:["textarea"===e.type?"el-textarea":"el-input",e.size?"el-input--"+e.size:"",{"is-disabled":e.disabled,"el-input-group":e.$slots.prepend||e.$slots.append,"el-input-group--append":e.$slots.append,"el-input-group--prepend":e.$slots.prepend}]},["textarea"!==e.type?[e.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[e._t("prepend")],2):e._e(),e._t("icon",[e.icon?i("i",{staticClass:"el-input__icon",class:["el-icon-"+e.icon,e.onIconClick?"is-clickable":""],on:{click:e.handleIconClick}}):e._e()]),"textarea"!==e.type?i("input",{ref:"input",staticClass:"el-input__inner",attrs:{type:e.type,name:e.name,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,maxlength:e.maxlength,minlength:e.minlength,autocomplete:e.autoComplete,autofocus:e.autofocus,min:e.min,max:e.max,step:e.step,form:e.form},domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur}}):e._e(),e.validating?i("i",{staticClass:"el-input__icon el-icon-loading"}):e._e(),e.$slots.append?i("div",{staticClass:"el-input-group__append"},[e._t("append")],2):e._e()]:i("textarea",{ref:"textarea",staticClass:"el-textarea__inner",style:e.textareaStyle,attrs:{name:e.name,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,rows:e.rows,form:e.form,autofocus:e.autofocus,maxlength:e.maxlength,minlength:e.minlength},domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur}})],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(616),i(622),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s);t.default={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[o.default],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{forceAbsolute:!0,gpuAcceleration:!1}}}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",this.updatePopper),this.$on("destroyPopper",this.destroyPopper)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(618),r=o.default.prototype.$isServer?function(){}:i(621),l=function(e){return e.stopPropagation()};t.default={props:{placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,transition:String,appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){e?this.updatePopper():this.destroyPopper(),this.$emit("input",e)}},methods:{createPopper:function(){var e=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var t=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),t.placement=this.currentPlacement,t.offset=this.offset,this.popperJS=new r(n,i,t),this.popperJS.onCreate(function(t){e.$emit("created",e),e.resetTransformOrigin(),e.$nextTick(e.updatePopper)}),"function"==typeof t.onUpdate&&this.popperJS.onUpdate(t.onUpdate),this.popperJS._popper.style.zIndex=a.PopupManager.nextZIndex(),this.popperElm.addEventListener("click",l))}},updatePopper:function(){this.popperJS?this.popperJS.update():this.createPopper()},doDestroy:function(){!this.showPopper&&this.popperJS&&(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){var e={top:"bottom",bottom:"top",left:"right",right:"left"},t=this.popperJS._popper.getAttribute("x-placement").split("-")[0],i=e[t];this.popperJS._popper.style.transformOrigin=["top","bottom"].indexOf(t)>-1?"center "+i:i+" center"},appendArrow:function(e){var t=void 0;if(!this.appended){this.appended=!0;for(var i in e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",l),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.PopupManager=void 0;var s=i(2),o=n(s),a=i(613),r=n(a),l=i(619),u=n(l),c=i(620),d=n(c),h=1,f=[],p=function(e){if(f.indexOf(e)===-1){var t=function(e){var t=e.__vue__;if(!t){var i=e.previousSibling;i.__vue__&&(t=i.__vue__)}return t};o.default.transition(e,{afterEnter:function(e){var i=t(e);i&&i.doAfterOpen&&i.doAfterOpen()},afterLeave:function(e){var i=t(e);i&&i.doAfterClose&&i.doAfterClose()}})}},m=void 0,v=function e(t){return 3===t.nodeType&&(t=t.nextElementSibling||t.nextSibling,e(t)),t};t.default={props:{value:{type:Boolean,default:!1},transition:{type:String,default:""},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},created:function(){this.transition&&p(this.transition)},beforeMount:function(){this._popupId="popup-"+h++,u.default.register(this._popupId,this)},beforeDestroy:function(){u.default.deregister(this._popupId),u.default.closeModal(this._popupId),this.modal&&null!==this.bodyOverflow&&"hidden"!==this.bodyOverflow&&(document.body.style.overflow=this.bodyOverflow,document.body.style.paddingRight=this.bodyPaddingRight),this.bodyOverflow=null,this.bodyPaddingRight=null},data:function(){return{opened:!1,bodyOverflow:null,bodyPaddingRight:null,rendered:!1}},watch:{value:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,o.default.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0,this.$emit("input",!0));var i=(0,r.default)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);n>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0,this.visible=!0,this.$emit("input",!0);var t=v(this.$el),i=e.modal,n=e.zIndex;if(n&&(u.default.zIndex=n),i&&(this._closing&&(u.default.closeModal(this._popupId),this._closing=!1),u.default.openModal(this._popupId,u.default.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.bodyOverflow||(this.bodyPaddingRight=document.body.style.paddingRight,this.bodyOverflow=document.body.style.overflow),m=(0,d.default)();var s=document.documentElement.clientHeight<document.body.scrollHeight;m>0&&s&&(document.body.style.paddingRight=m+"px"),document.body.style.overflow="hidden"}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=u.default.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.transition||this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);t>0?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){var e=this;this.visible=!1,this.$emit("input",!1),this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose()},doAfterClose:function(){u.default.closeModal(this._popupId),this._closing=!1}}},t.PopupManager=u.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(71),r=!1,l=function(){if(!o.default.prototype.$isServer){var e=c.modalDom;return e?r=!0:(r=!1,e=document.createElement("div"),c.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){c.doOnModalClick&&c.doOnModalClick()})),e}},u={},c={zIndex:2e3,modalFade:!0,getInstance:function(e){return u[e]},register:function(e,t){e&&t&&(u[e]=t)},deregister:function(e){e&&(u[e]=null,delete u[e])},nextZIndex:function(){return c.zIndex++},modalStack:[],doOnModalClick:function(){var e=c.modalStack[c.modalStack.length-1];if(e){var t=c.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,s){if(!o.default.prototype.$isServer&&e&&void 0!==t){this.modalFade=s;for(var u=this.modalStack,c=0,d=u.length;c<d;c++){var h=u[c];if(h.id===e)return}var f=l();if((0,a.addClass)(f,"v-modal"),this.modalFade&&!r&&(0,a.addClass)(f,"v-modal-enter"),n){var p=n.trim().split(/\s+/);p.forEach(function(e){return(0,a.addClass)(f,e)})}setTimeout(function(){(0,a.removeClass)(f,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(f):document.body.appendChild(f),t&&(f.style.zIndex=t),f.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=l();if(t.length>0){var n=t[t.length-1];if(n.id===e){if(n.modalClass){var s=n.modalClass.trim().split(/\s+/);s.forEach(function(e){return(0,a.removeClass)(i,e)})}t.pop(),t.length>0&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var o=t.length-1;o>=0;o--)if(t[o].id===e){t.splice(o,1);break}}0===t.length&&(this.modalFade&&(0,a.addClass)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",c.modalDom=void 0),(0,a.removeClass)(i,"v-modal-leave")},200))}};!o.default.prototype.$isServer&&window.addEventListener("keydown",function(e){if(27===e.keyCode&&c.modalStack.length>0){var t=c.modalStack[c.modalStack.length-1];if(!t)return;var i=c.getInstance(t.id);i.closeOnPressEscape&&i.close()}}),t.default=c},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){if(o.default.prototype.$isServer)return 0;if(void 0!==a)return a;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),t-n};var s=i(2),o=n(s),a=void 0},function(e,t,i){var n,s;"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(o,a){n=a,s="function"==typeof n?n.call(t,i,t,e):n,!(void 0!==s&&(e.exports=s))}(void 0,function(){"use strict";function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n="undefined"==typeof t||null===t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return n||s?this._popper=this.parse(s?t:{}):this._popper=t.jquery?t[0]:t,this._options=Object.assign({},v,i),this._options.modifiers=this._options.modifiers.map(function(e){if(this._options.modifiersIgnored.indexOf(e)===-1)return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),u(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function t(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden";var n=(e.offsetWidth,m.getComputedStyle(e)),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),o=parseFloat(n.marginLeft)+parseFloat(n.marginRight),a={width:e.offsetWidth+o,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,a}function i(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function n(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function o(e,t){var i=m.getComputedStyle(e,null);return i[t]}function a(e){var t=e.offsetParent;return t!==m.document.body&&t?t:m.document.documentElement}function r(e){var t=e.parentNode;return t?t===m.document?m.document.body.scrollTop?m.document.body:m.document.documentElement:["scroll","auto"].indexOf(o(t,"overflow"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-x"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-y"))!==-1?t:r(e.parentNode):e}function l(e){return e!==m.document.body&&("fixed"===o(e,"position")||(e.parentNode?l(e.parentNode):e))}function u(e,t){function i(e){return""!==e&&!isNaN(parseFloat(e))&&isFinite(e)}Object.keys(t).forEach(function(n){var s="";["width","height","top","right","bottom","left"].indexOf(n)!==-1&&i(t[n])&&(s="px"),e.style[n]=t[n]+s})}function c(e){var t={};return e&&"[object Function]"===t.toString.call(e)}function d(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function h(e){var t=e.getBoundingClientRect(),i=navigator.userAgent.indexOf("MSIE")!=-1,n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function f(e,t,i){var n=h(e),s=h(t);if(i){var o=r(t);s.top+=o.scrollTop,s.bottom+=o.scrollTop,s.left+=o.scrollLeft,s.right+=o.scrollLeft}var a={top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height};return a}function p(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if("undefined"!=typeof m.document.body.style[n])return n}return null}var m=window,v={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[p("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){function t(e,t){t.forEach(function(t){e.classList.add(t)})}function i(e,t){t.forEach(function(t){e.setAttribute(t.split(":")[0],t.split(":")[1]||"")})}var n={tagName:"div",classNames:["popper"],attributes:[],parent:m.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},n,e);var s=m.document,o=s.createElement(e.tagName);if(t(o,e.classNames),i(o,e.attributes),"node"===e.contentType?o.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?o.innerHTML=e.content:o.textContent=e.content,e.arrowTagName){var a=s.createElement(e.arrowTagName);t(a,e.arrowClassNames),i(a,e.arrowAttributes),o.appendChild(a)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(r=s.querySelectorAll(e.parent),r.length>1&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return r.length>1&&r instanceof Element==!1&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(o),o},e.prototype._getPosition=function(e,t){var i=a(t);if(this._options.forceAbsolute)return"absolute";var n=l(t,i);return n?"fixed":"absolute"},e.prototype._getOffsets=function(e,i,n){n=n.split("-")[0];var s={};s.position=this.state.position;var o="fixed"===s.position,r=f(i,a(e),o),l=t(e);return["right","left"].indexOf(n)!==-1?(s.top=r.top+r.height/2-l.height/2,"left"===n?s.left=r.left-l.width:s.left=r.right):(s.left=r.left+r.width/2-l.width/2,"top"===n?s.top=r.top-l.height:s.top=r.bottom),s.width=l.width,s.height=l.height,{popper:s,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),m.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=r(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.addEventListener("scroll",this.state.updateBound)}},e.prototype._removeEventListeners=function(){if(m.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=r(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.removeEventListener("scroll",this.state.updateBound)}this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,o={};if("window"===i){var l=m.document.body,u=m.document.documentElement;s=Math.max(l.scrollHeight,l.offsetHeight,u.clientHeight,u.scrollHeight,u.offsetHeight),n=Math.max(l.scrollWidth,l.offsetWidth,u.clientWidth,u.scrollWidth,u.offsetWidth),o={top:0,right:n,bottom:s,left:0}}else if("viewport"===i){var c=a(this._popper),h=r(this._popper),f=d(c),p=function(e){return e==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):e.scrollTop},v=function(e){return e==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):e.scrollLeft},g="fixed"===e.offsets.popper.position?0:p(h),y="fixed"===e.offsets.popper.position?0:v(h);o={top:0-(f.top-g),right:m.document.documentElement.clientWidth-(f.left-y),bottom:m.document.documentElement.clientHeight-(f.top-g),left:0-(f.left-y)}}else o=a(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:d(i);return o.left+=t,o.right-=t,o.top=o.top+t,o.bottom=o.bottom-t,o},e.prototype.runModifiers=function(e,t,i){var n=t.slice();return void 0!==i&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,i))),n.forEach(function(t){c(t)&&(e=t.call(this,e))}.bind(this)),e},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},e.prototype.modifiers={},e.prototype.modifiers.applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=p("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),u(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&u(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],s=t.split("-")[1];if(s){var o=e.offsets.reference,a=n(e.offsets.popper),r={y:{start:{top:o.top},end:{top:o.top+o.height-a.height}},x:{start:{left:o.left},end:{left:o.left+o.width-a.width}}},l=["bottom","top"].indexOf(i)!==-1?"x":"y";e.offsets.popper=Object.assign(a,r[l][s])}return e},e.prototype.modifiers.preventOverflow=function(e){var t=this._options.preventOverflowOrder,i=n(e.offsets.popper),s={left:function t(){var t=i.left;return i.left<e.boundaries.left&&(t=Math.max(i.left,e.boundaries.left)),{left:t}},right:function(){var t=i.left;return i.right>e.boundaries.right&&(t=Math.min(i.left,e.boundaries.right-i.width)),{left:t}},top:function t(){var t=i.top;return i.top<e.boundaries.top&&(t=Math.max(i.top,e.boundaries.top)),{top:t}},bottom:function(){var t=i.top;return i.bottom>e.boundaries.bottom&&(t=Math.min(i.top,e.boundaries.bottom-i.height)),{top:t}}};return t.forEach(function(t){e.offsets.popper=Object.assign(i,s[t]())}),e},e.prototype.modifiers.keepTogether=function(e){var t=n(e.offsets.popper),i=e.offsets.reference,s=Math.floor;return t.right<s(i.left)&&(e.offsets.popper.left=s(i.left)-t.width),t.left>s(i.right)&&(e.offsets.popper.left=s(i.right)),t.bottom<s(i.top)&&(e.offsets.popper.top=s(i.top)-t.height),t.top>s(i.bottom)&&(e.offsets.popper.top=s(i.bottom)),e},e.prototype.modifiers.flip=function(e){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),e;if(e.flipped&&e.placement===e._originalPlacement)return e;var t=e.placement.split("-")[0],s=i(t),o=e.placement.split("-")[1]||"",a=[];return a="flip"===this._options.flipBehavior?[t,s]:this._options.flipBehavior,a.forEach(function(r,l){if(t===r&&a.length!==l+1){t=e.placement.split("-")[0],s=i(t);var u=n(e.offsets.popper),c=["right","bottom"].indexOf(t)!==-1;(c&&Math.floor(e.offsets.reference[t])>Math.floor(u[s])||!c&&Math.floor(e.offsets.reference[t])<Math.floor(u[s]))&&(e.flipped=!0,e.placement=a[l+1],o&&(e.placement+="-"+o),e.offsets.popper=this._getOffsets(this._popper,this._reference,e.placement).popper,e=this.runModifiers(e,this._options.modifiers,this._flip))}}.bind(this)),e},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return e.placement.indexOf("left")!==-1?i.top-=t:e.placement.indexOf("right")!==-1?i.top+=t:e.placement.indexOf("top")!==-1?i.left-=t:e.placement.indexOf("bottom")!==-1&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var i=this._options.arrowElement;if("string"==typeof i&&(i=this._popper.querySelector(i)),!i)return e;if(!this._popper.contains(i))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var s={},o=e.placement.split("-")[0],a=n(e.offsets.popper),r=e.offsets.reference,l=["left","right"].indexOf(o)!==-1,u=l?"height":"width",c=l?"top":"left",d=l?"left":"top",h=l?"bottom":"right",f=t(i)[u];r[h]-f<a[c]&&(e.offsets.popper[c]-=a[c]-(r[h]-f)),r[c]+f>a[h]&&(e.offsets.popper[c]+=r[c]+f-a[h]);var p=r[c]+r[u]/2-f/2,m=p-a[c];return m=Math.max(Math.min(a[u]-f,m),0),s[c]=m,s[d]="",e.offsets.arrow=s,e.arrowElement=i,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(void 0===e||null===e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(void 0!==n&&null!==n){n=Object(n);for(var s=Object.keys(n),o=0,a=s.length;o<a;o++){var r=s[o],l=Object.getOwnPropertyDescriptor(n,r);void 0!==l&&l.enumerable&&(t[r]=n[r])}}}return t}}),e})},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;
+return i("div",{staticClass:"el-select-dropdown",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(624),i(625),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={mixins:[o.default],name:"ElOption",componentName:"ElOption",props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{index:-1,groupDisabled:!1,visible:!0,hitState:!1}},computed:{currentLabel:function(){return this.label||("string"==typeof this.value||"number"==typeof this.value?this.value:"")},currentValue:function(){return this.value||this.label||""},parent:function(){for(var e=this.$parent;!e.isSelect;)e=e.$parent;return e},itemSelected:function(){return this.parent.multiple?this.parent.value.indexOf(this.value)>-1:this.value===this.parent.value},limitReached:function(){return!!this.parent.multiple&&(!this.itemSelected&&this.parent.value.length>=this.parent.multipleLimit&&this.parent.multipleLimit>0)}},watch:{currentLabel:function(){this.created||this.parent.remote||this.dispatch("ElSelect","setSelected")},value:function(){this.created||this.parent.remote||this.dispatch("ElSelect","setSelected")}},methods:{handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.parent.hoverIndex=this.parent.options.indexOf(this))},selectOptionClick:function(){this.disabled!==!0&&this.groupDisabled!==!0&&this.dispatch("ElSelect","handleOptionClick",this)},queryChange:function(e){var t=String(e).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g,"\\$1");this.visible=new RegExp(t,"i").test(this.currentLabel)||this.created,this.visible||this.parent.filteredOptionsCount--},resetIndex:function(){var e=this;this.$nextTick(function(){e.index=e.parent.options.indexOf(e)})}},created:function(){this.parent.options.push(this),this.parent.cachedOptions.push(this),this.parent.optionsCount++,this.parent.filteredOptionsCount++,this.index=this.parent.options.indexOf(this),this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled),this.$on("resetIndex",this.resetIndex)},beforeDestroy:function(){this.dispatch("ElSelect","onOptionDestroy",this)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:e.itemSelected,"is-disabled":e.disabled||e.groupDisabled||e.limitReached},on:{mouseenter:e.hoverItem,click:function(t){t.stopPropagation(),e.selectOptionClick(t)}}},[e._t("default",[i("span",[e._v(e._s(e.currentLabel))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(627),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(628),i(629),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,closeTransition:Boolean,color:String},methods:{handleClose:function(e){this.$emit("close",e)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:e.closeTransition?"":"el-zoom-in-center"}},[i("span",{staticClass:"el-tag",class:[e.type?"el-tag--"+e.type:"",{"is-hit":e.hit}],style:{backgroundColor:e.color}},[e._t("default"),e.closable?i("i",{staticClass:"el-tag__close el-icon-close",on:{click:e.handleClose}}):e._e()],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(631),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(632),o=i(620),a=n(o),r=i(19),l=i(633),u=n(l);t.default={name:"ElScrollbar",components:{Bar:u.default},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=(0,a.default)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=(0,r.toObject)(this.wrapStyle),i.marginRight=i.marginBottom=n):"string"==typeof this.wrapStyle?i+=s:i=s}var o=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),l=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[o]]),c=void 0;return c=this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[o]])]:[l,e(u.default,{attrs:{move:this.moveX,size:this.sizeWidth}},[]),e(u.default,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}},[])],e("div",{class:"el-scrollbar"},c)},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e=void 0,t=void 0,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&(0,s.addResizeListener)(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&(0,s.removeResizeListener)(this.$refs.resize,this.update)}}},function(e,t){"use strict";t.__esModule=!0;var i="undefined"==typeof window,n=function(){if(!i){var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)};return function(t){return e(t)}}}(),s=function(){if(!i){var e=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout;return function(t){return e(t)}}}(),o=function(e){var t=e.__resizeTrigger__,i=t.firstElementChild,n=t.lastElementChild,s=i.firstElementChild;n.scrollLeft=n.scrollWidth,n.scrollTop=n.scrollHeight,s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight},a=function(e){return e.offsetWidth!==e.__resizeLast__.width||e.offsetHeight!==e.__resizeLast__.height},r=function(e){var t=this;o(this),this.__resizeRAF__&&s(this.__resizeRAF__),this.__resizeRAF__=n(function(){a(t)&&(t.__resizeLast__.width=t.offsetWidth,t.__resizeLast__.height=t.offsetHeight,t.__resizeListeners__.forEach(function(i){i.call(t,e)}))})},l=i?{}:document.attachEvent,u="Webkit Moz O ms".split(" "),c="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),d="resizeanim",h=!1,f="",p="animationstart";if(!l&&!i){var m=document.createElement("fakeelement");if(void 0!==m.style.animationName&&(h=!0),h===!1)for(var v="",g=0;g<u.length;g++)if(void 0!==m.style[u[g]+"AnimationName"]){v=u[g],f="-"+v.toLowerCase()+"-",p=c[g],h=!0;break}}var y=!1,b=function(){if(!y&&!i){var e="@"+f+"keyframes "+d+" { from { opacity: 0; } to { opacity: 0; } } ",t=f+"animation: 1ms "+d+";",n=e+"\n      .resize-triggers { "+t+' visibility: hidden; opacity: 0; }\n      .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; }\n      .resize-triggers > div { background: #eee; overflow: auto; }\n      .contract-trigger:before { width: 200%; height: 200%; }',s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n)),s.appendChild(o),y=!0}};t.addResizeListener=function(e,t){if(!i)if(l)e.attachEvent("onresize",t);else{if(!e.__resizeTrigger__){"static"===getComputedStyle(e).position&&(e.style.position="relative"),b(),e.__resizeLast__={},e.__resizeListeners__=[];var n=e.__resizeTrigger__=document.createElement("div");n.className="resize-triggers",n.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',e.appendChild(n),o(e),e.addEventListener("scroll",r,!0),p&&n.addEventListener(p,function(t){t.animationName===d&&o(e)})}e.__resizeListeners__.push(t)}},t.removeResizeListener=function(e,t){l?e.detachEvent("onresize",t):(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||(e.removeEventListener("scroll",r),e.__resizeTrigger__=!e.removeChild(e.__resizeTrigger__)))}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71),s=i(634);t.default={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return s.BAR_MAP[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t=this.size,i=this.move,n=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+n.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(0,s.renderThumbStyle)({size:t,move:i,bar:n})},[])])},methods:{clickThumbHandler:function(e){this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction])},clickTrackHandler:function(e){var t=Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client]),i=this.$refs.thumb[this.bar.offset]/2,n=100*(t-i)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=n*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,(0,n.on)(document,"mousemove",this.mouseMoveDocumentHandler),(0,n.on)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(this.cursorDown!==!1){var t=this[this.bar.axis];if(t){var i=(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])*-1,n=this.$refs.thumb[this.bar.offset]-t,s=100*(i-n)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=s*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,(0,n.off)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){(0,n.off)(document,"mouseup",this.mouseUpDocumentHandler)}}},function(e,t){"use strict";function i(e){var t=e.move,i=e.size,n=e.bar,s={},o="translate"+n.axis+"("+t+"%)";return s[n.size]=i,s.transform=o,s.msTransform=o,s.webkitTransform=o,s}t.__esModule=!0,t.renderThumbStyle=i;t.BAR_MAP={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}}},function(e,t,i){var n=i(31);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,t!==!1)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(71),r=[],l="@@clickoutsideContext",u=void 0;!o.default.prototype.$isServer&&(0,a.on)(document,"mousedown",function(e){return u=e}),!o.default.prototype.$isServer&&(0,a.on)(document,"mouseup",function(e){r.forEach(function(t){return t[l].documentHandler(e,u)})}),t.default={bind:function(e,t,i){var n=r.push(e)-1,s=function(n,s){!i.context||e.contains(n.target)||i.context.popperElm&&(i.context.popperElm.contains(n.target)||i.context.popperElm.contains(s.target))||(t.expression&&e[l].methodName&&i.context[e[l].methodName]?i.context[e[l].methodName]():e[l].bindingFn&&e[l].bindingFn())};e[l]={id:n,documentHandler:s,methodName:t.expression,bindingFn:t.value}},update:function(e,t){e[l].methodName=t.expression,e[l].bindingFn=t.value},unbind:function(e){for(var t=r.length,i=0;i<t;i++)if(r[i][l].id===e[l].id){r.splice(i,1);break}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],staticClass:"el-select"},[e.multiple?i("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":e.inputWidth-32+"px"},on:{click:function(t){t.stopPropagation(),e.toggleMenu(t)}}},[i("transition-group",{on:{"after-leave":e.resetInputHeight}},e._l(e.selected,function(t){return i("el-tag",{key:t.value,attrs:{closable:"",hit:t.hitState,type:"primary","close-transition":""},on:{close:function(i){e.deleteTag(i,t)}}},[i("span",{staticClass:"el-select__tags-text"},[e._v(e._s(t.currentLabel))])])})),e.filterable?i("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:"is-"+e.size,style:{width:e.inputLength+"px","max-width":e.inputWidth-42+"px"},attrs:{type:"text",disabled:e.disabled,debounce:e.remote?300:0},domProps:{value:e.query},on:{focus:function(t){e.visible=!0},keyup:e.managePlaceholder,keydown:[e.resetInputState,function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.navigateOptions("next")):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.navigateOptions("prev")):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.preventDefault(),void e.selectOption(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27)?(t.preventDefault(),void(e.visible=!1)):null},function(t){return"button"in t||!e._k(t.keyCode,"delete",[8,46])?void e.deletePrevTag(t):null}],input:function(t){t.target.composing||(e.query=t.target.value)}}}):e._e()],1):e._e(),i("el-input",{ref:"reference",attrs:{type:"text",placeholder:e.currentPlaceholder,name:e.name,size:e.size,disabled:e.disabled,readonly:!e.filterable||e.multiple,"validate-event":!1,icon:e.iconClass},on:{focus:e.handleFocus,click:e.handleIconClick},nativeOn:{mousedown:function(t){e.handleMouseDown(t)},keyup:function(t){e.debouncedOnInputChange(t)},keydown:[function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.navigateOptions("next")):null},function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.navigateOptions("prev")):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.preventDefault(),void e.selectOption(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"esc",27)?(t.preventDefault(),void(e.visible=!1)):null},function(t){return"button"in t||!e._k(t.keyCode,"tab",9)?void(e.visible=!1):null}],paste:function(t){e.debouncedOnInputChange(t)},mouseenter:function(t){e.inputHovering=!0},mouseleave:function(t){e.inputHovering=!1}},model:{value:e.selectedLabel,callback:function(t){e.selectedLabel=t},expression:"selectedLabel"}}),i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy,"after-enter":e.handleMenuEnter}},[i("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:e.visible&&e.emptyText!==!1,expression:"visible && emptyText !== false"}],ref:"popper"},[i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.options.length>0&&!e.loading,expression:"options.length > 0 && !loading"}],class:{"is-empty":!e.allowCreate&&0===e.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[e.showNewOption?i("el-option",{attrs:{value:e.query,created:""}}):e._e(),e._t("default")],2),e.emptyText&&!e.allowCreate?i("p",{staticClass:"el-select-dropdown__empty"},[e._v(e._s(e.emptyText))]):e._e()],1)],1)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(623),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(640),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(641),i(642),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(618),o=n(s),a=i(607),r=n(a);t.default={name:"ElDialog",mixins:[o.default,r.default],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},size:{type:String,default:"small"},customClass:{type:String,default:""},top:{type:String,default:"15%"},beforeClose:Function},data:function(){return{visible:!1}},watch:{value:function(e){this.visible=e},visible:function(e){var t=this;this.$emit("input",e),e?(this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0})):(this.$el.removeEventListener("scroll",this.updatePopper),this.$emit("close"))}},computed:{sizeClass:function(){return"el-dialog--"+this.size},style:function(){return"full"===this.size?{}:{top:this.top}}},methods:{handleWrapperClick:function(){this.closeOnClickModal&&this.handleClose()},handleClose:function(){"function"==typeof this.beforeClose?this.beforeClose(this.close):this.close()},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")}},mounted:function(){this.value&&(this.rendered=!0,this.open())}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"dialog-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(t){return t.target!==t.currentTarget?null:void e.handleWrapperClick(t)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[e.sizeClass,e.customClass],style:e.style},[i("div",{staticClass:"el-dialog__header"},[e._t("title",[i("span",{staticClass:"el-dialog__title"},[e._v(e._s(e.title))])]),i("div",{staticClass:"el-dialog__headerbtn"},[e.showClose?i("i",{staticClass:"el-dialog__close el-icon el-icon-close",on:{click:e.handleClose}}):e._e()])],2),e.rendered?i("div",{staticClass:"el-dialog__body"},[e._t("default")],2):e._e(),e.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[e._t("footer")],2):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(644),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(645),i(649),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(609),o=n(s),a=i(636),r=n(a),l=i(646),u=n(l),c=i(607),d=n(c);t.default={name:"ElAutocomplete",mixins:[d.default],componentName:"ElAutocomplete",components:{ElInput:o.default,ElAutocompleteSuggestions:u.default},directives:{Clickoutside:r.default},props:{popperClass:String,placeholder:String,disabled:Boolean,name:String,size:String,value:String,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,icon:String,onIconClick:Function},data:function(){return{isFocus:!1,isOnComposition:!1,suggestions:[],loading:!1,highlightedIndex:-1}},computed:{suggestionVisible:function(){var e=this.suggestions,t=Array.isArray(e)&&e.length>0;return(t||this.loading)&&this.isFocus}},watch:{suggestionVisible:function(e){this.broadcast("ElAutocompleteSuggestions","visible",[e,this.$refs.input.$refs.input.offsetWidth])}},methods:{getData:function(e){var t=this;this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,Array.isArray(e)?t.suggestions=e:console.error("autocomplete suggestions must be an array")})},handleComposition:function(e){"compositionend"===e.type?(this.isOnComposition=!1,this.handleChange(e.data)):this.isOnComposition=!0},handleChange:function(e){return this.$emit("input",e),this.isOnComposition||!this.triggerOnFocus&&!e?void(this.suggestions=[]):void this.getData(e)},handleFocus:function(){this.isFocus=!0,this.triggerOnFocus&&this.getData(this.value)},handleBlur:function(){var e=this;setTimeout(function(t){e.isFocus=!1},100)},handleKeyEnter:function(){this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex<this.suggestions.length&&this.select(this.suggestions[this.highlightedIndex])},handleClickoutside:function(){this.isFocus=!1},select:function(e){var t=this;this.$emit("input",e.value),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[]})},highlight:function(e){if(this.suggestionVisible&&!this.loading){e<0&&(e=0),e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li"),n=i[e],s=t.scrollTop,o=n.offsetTop;o+n.scrollHeight>s+t.clientHeight&&(t.scrollTop+=n.scrollHeight),o<s&&(t.scrollTop-=n.scrollHeight),this.highlightedIndex=e}}},mounted:function(){var e=this;this.$on("item-click",function(t){e.select(t)})},beforeDestroy:function(){this.$refs.suggestions.$destroy()}}},function(e,t,i){var n=i(13)(i(647),i(648),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(607),r=n(a),l=i(630),u=n(l);t.default={components:{ElScrollbar:u.default},mixins:[o.default,r.default],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{suggestions:Array,options:{default:function(){return{forceAbsolute:!0,gpuAcceleration:!1}}}},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var e=this;this.$nextTick(function(t){e.updatePopper()})},mounted:function(){this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input},created:function(){var e=this;this.$on("visible",function(t,i){e.dropdownWidth=i+"px",e.showPopper=t})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion",class:{"is-loading":e.parent.loading},style:{width:e.dropdownWidth}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._l(e.suggestions,function(t,n){return[e.parent.customItem?i(e.parent.customItem,{tag:"component",class:{highlighted:e.parent.highlightedIndex===n},attrs:{item:t,index:n},on:{click:function(i){e.select(t)}}}):i("li",{class:{highlighted:e.parent.highlightedIndex===n},on:{click:function(i){e.select(t)}}},[e._v("\n          "+e._s(t.value)+"\n        ")])]})],2)],1)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],staticClass:"el-autocomplete"},[i("el-input",{ref:"input",attrs:{value:e.value,disabled:e.disabled,placeholder:e.placeholder,name:e.name,size:e.size,icon:e.icon,"on-icon-click":e.onIconClick},on:{change:e.handleChange,focus:e.handleFocus,blur:e.handleBlur},nativeOn:{compositionstart:function(t){e.handleComposition(t)},compositionupdate:function(t){e.handleComposition(t)},compositionend:function(t){e.handleComposition(t)},keydown:[function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.highlight(e.highlightedIndex-1)):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.highlight(e.highlightedIndex+1)):null},function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?(t.stopPropagation(),void e.handleKeyEnter(t)):null}]}},[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e()],2),i("el-autocomplete-suggestions",{ref:"suggestions",class:[e.popperClass?e.popperClass:""],attrs:{suggestions:e.suggestions}})],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(651),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(652),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(636),o=n(s),a=i(607),r=n(a),l=i(653),u=n(l),c=i(657),d=n(c);t.default={name:"ElDropdown",componentName:"ElDropdown",mixins:[r.default],directives:{Clickoutside:o.default},components:{ElButton:u.default,ElButtonGroup:d.default},props:{trigger:{type:String,default:"hover"},menuAlign:{type:String,default:"end"},type:String,size:String,splitButton:Boolean,hideOnClick:{type:Boolean,default:!0}},data:function(){return{timeout:null,visible:!1}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick),this.initEvent()},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e)}},methods:{show:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},250)},hide:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},150)},handleClick:function(){this.visible=!this.visible},initEvent:function(){var e=this.trigger,t=this.show,i=this.hide,n=this.handleClick,s=this.splitButton,o=s?this.$refs.trigger.$el:this.$slots.default[0].elm;if("hover"===e){o.addEventListener("mouseenter",t),o.addEventListener("mouseleave",i);var a=this.$slots.dropdown[0].elm;a.addEventListener("mouseenter",t),a.addEventListener("mouseleave",i)}else"click"===e&&o.addEventListener("click",n)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)}},render:function(e){var t=this,i=this.hide,n=this.splitButton,s=this.type,o=this.size,a=function(e){t.$emit("click")},r=n?e("el-button-group",null,[e("el-button",{attrs:{type:s,size:o},nativeOn:{click:a}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:s,size:o},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-caret-bottom"},[])])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[r,this.$slots.dropdown])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(654),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(655),i(656),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElButton",props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean},methods:{handleClick:function(e){this.$emit("click",e)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.size?"el-button--"+e.size:"",{"is-disabled":e.disabled,"is-loading":e.loading,"is-plain":e.plain}],attrs:{disabled:e.disabled,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:"el-icon-"+e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(658),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(659),i(660),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElButtonGroup"}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-button-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(662),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(663),i(664),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s);t.default={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[o.default],created:function(){var e=this;this.$on("updatePopper",this.updatePopper),this.$on("visible",function(t){e.showPopper=t})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{"$parent.menuAlign":{immediate:!0,handler:function(e){this.currentPlacement="bottom-"+e}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu"},[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(666),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(667),i(668),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElDropdownItem",mixins:[o.default],props:{command:String,disabled:Boolean,divided:Boolean},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},on:{click:e.handleClick}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(670),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(671),i(672),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElMenu",componentName:"ElMenu",mixins:[o.default],props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,theme:{type:String,default:"light"},uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"}},data:function(){return{activedIndex:this.defaultActive,openedMenus:this.defaultOpeneds?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},watch:{defaultActive:function(e){var t=this.items[e];t?(this.activedIndex=t.index,this.initOpenedMenu()):this.activedIndex=""},defaultOpeneds:function(e){this.openedMenus=e}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index];
+},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;i.indexOf(e)===-1&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return t.indexOf(e)!==-1})),this.openedMenus.push(e))},closeMenu:function(e,t){this.openedMenus.splice(this.openedMenus.indexOf(e),1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath,n=this.openedMenus.indexOf(t)!==-1;n?(this.closeMenu(t,i),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=e.index,i=e.indexPath;this.activedIndex=e.index,this.$emit("select",t,i,e),"horizontal"===this.mode&&(this.openedMenus=[]),this.router&&this.routeToItem(e)},initOpenedMenu:function(){var e=this,t=this.activedIndex,i=this.items[t];if(i&&"horizontal"!==this.mode){var n=i.indexPath;n.forEach(function(t){var i=e.submenus[t];i&&e.openMenu(t,i.indexPath)})}},routeToItem:function(e){var t=e.route||e.index;try{this.$router.push(t)}catch(e){console.error(e)}}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-menu",class:{"el-menu--horizontal":"horizontal"===e.mode,"el-menu--dark":"dark"===e.theme}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(674),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(675),i(677),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(676),o=n(s),a=i(607),r=n(a);t.default={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[o.default,r.default],props:{index:{type:String,required:!0}},data:function(){return{timeout:null,items:{},submenus:{}}},computed:{opened:function(){return this.rootMenu.openedMenus.indexOf(this.index)>-1},active:{cache:!1,get:function(){var e=!1,t=this.submenus,i=this.items;return Object.keys(i).forEach(function(t){i[t].active&&(e=!0)}),Object.keys(t).forEach(function(i){t[i].active&&(e=!0)}),e}}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.openMenu(e.index,e.indexPath)},300)},handleMouseleave:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.closeMenu(e.index,e.indexPath)},300)},initEvents:function(){var e=this.rootMenu,t=this.handleMouseenter,i=this.handleMouseleave,n=this.handleClick,s=void 0;"horizontal"===e.mode&&"hover"===e.menuTrigger?(s=this.$el,s.addEventListener("mouseenter",t),s.addEventListener("mouseleave",i)):(s=this.$refs["submenu-title"],s.addEventListener("click",n))}},created:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this)},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},mounted:function(){this.initEvents()}}},function(e,t){"use strict";t.__esModule=!0,t.default={computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},rootMenu:function(){for(var e=this.$parent;e&&"ElMenu"!==e.$options.componentName;)e=e.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&["ElMenu","ElSubmenu"].indexOf(e.$options.componentName)===-1;)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};for(var e=20,t=this.$parent;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{class:{"el-submenu":!0,"is-active":e.active,"is-opened":e.opened}},[i("div",{ref:"submenu-title",staticClass:"el-submenu__title",style:e.paddingStyle},[e._t("title"),i("i",{class:{"el-submenu__icon-arrow":!0,"el-icon-arrow-down":"vertical"===e.rootMenu.mode,"el-icon-caret-bottom":"horizontal"===e.rootMenu.mode}})],2),"horizontal"===e.rootMenu.mode?[i("transition",{attrs:{name:"el-zoom-in-top"}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu"},[e._t("default")],2)])]:i("el-collapse-transition",[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu"},[e._t("default")],2)])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(679),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(680),i(681),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(676),o=n(s),a=i(607),r=n(a);t.default={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[o.default,r.default],props:{index:{type:String,required:!0},route:{type:Object,required:!1},disabled:{type:Boolean,required:!1}},computed:{active:function(){return this.index===this.rootMenu.activedIndex}},methods:{handleClick:function(){this.dispatch("ElMenu","item-click",this),this.$emit("click",this)}},created:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:e.paddingStyle,on:{click:e.handleClick}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(683),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(684),i(685),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){for(var e=10,t=this.$parent;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return 10===e&&(e=20),e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(687),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(688),i(689),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(609),o=n(s),a=i(71);t.default={name:"ElInputNumber",directives:{repeatClick:{bind:function(e,t,i){var n=null,s=void 0,o=function(){return i.context[t.expression].apply()},r=function(){new Date-s<100&&o(),clearInterval(n),n=null};(0,a.on)(e,"mousedown",function(){s=new Date,(0,a.once)(document,"mouseup",r),clearInterval(n),n=setInterval(o,100)})}}},components:{ElInput:o.default},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-(1/0)},value:{default:0},disabled:Boolean,size:String,controls:{type:Boolean,default:!0}},data:function(){return{currentValue:0}},watch:{value:{immediate:!0,handler:function(e){var t=Number(e);isNaN(t)||(t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.$emit("input",t))}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},precision:function(){var e=this.value,t=this.step,i=this.getPrecision;return Math.max(i(e),i(t))}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.precision),parseFloat(parseFloat(Number(e).toFixed(t)))},getPrecision:function(e){var t=e.toString(),i=t.indexOf("."),n=0;return i!==-1&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.disabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);t>this.max||this.setCurrentValue(t)}},decrease:function(){if(!this.disabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);t<this.min||this.setCurrentValue(t)}},handleBlur:function(){this.$refs.input.setCurrentValue(this.currentValue)},setCurrentValue:function(e){var t=this.currentValue;e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.$emit("change",e,t),this.$emit("input",e),this.currentValue=e)},handleInput:function(e){var t=Number(e);isNaN(t)||this.setCurrentValue(t)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-input-number",class:[e.size?"el-input-number--"+e.size:"",{"is-disabled":e.disabled},{"is-without-controls":!e.controls}]},[e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":e.minDisabled}},[i("i",{staticClass:"el-icon-minus"})]):e._e(),e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":e.maxDisabled}},[i("i",{staticClass:"el-icon-plus"})]):e._e(),i("el-input",{ref:"input",attrs:{value:e.currentValue,disabled:e.disabled,size:e.size,max:e.max,min:e.min},on:{blur:e.handleBlur,input:e.handleInput},nativeOn:{keydown:[function(t){return"button"in t||!e._k(t.keyCode,"up",38)?(t.preventDefault(),void e.increase(t)):null},function(t){return"button"in t||!e._k(t.keyCode,"down",40)?(t.preventDefault(),void e.decrease(t)):null}]}},[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e()],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(691),o=n(s);o.default.install=function(e){e.component("el-radio",o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(692),i(693),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElRadio",mixins:[o.default],componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled:this.disabled}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio"},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":e.isDisabled,"is-checked":e.model===e.label,"is-focus":e.focus}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:e._q(e.model,e.label)},on:{focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){e.model=e.label}}})]),i("span",{staticClass:"el-radio__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(695),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(696),i(697),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElRadioGroup",componentName:"ElRadioGroup",mixins:[o.default],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},watch:{value:function(e){this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",[this.value])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-radio-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(699),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(700),i(701),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElRadioButton",props:{label:{},disabled:Boolean,name:String},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},size:function(){return this._radioGroup.size},isDisabled:function(){return this.disabled||this._radioGroup.disabled}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio-button",class:[e.size?"el-radio-button--"+e.size:"",{"is-active":e.value===e.label},{"is-disabled":e.isDisabled}]},[i("input",{directives:[{name:"model",rawName:"v-model",value:e.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:e._q(e.value,e.label)},on:{__c:function(t){e.value=e.label}}}),i("span",{staticClass:"el-radio-button__inner",style:e.value===e.label?e.activeStyle:null},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(703),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(704),i(705),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCheckbox",mixins:[o.default],componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){if(this.isGroup){var t=!1;void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(t=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(t=!0),t===!1&&this.dispatch("ElCheckboxGroup","input",[e])}else void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},methods:{addToStore:function(){Array.isArray(this.model)&&this.model.indexOf(this.label)===-1?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$emit("change",e),this.isGroup&&this.$nextTick(function(e){t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}},created:function(){this.checked&&this.addToStore()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox"},[i("span",{staticClass:"el-checkbox__input",class:{"is-disabled":e.disabled,"is-checked":e.isChecked,"is-indeterminate":e.indeterminate,"is-focus":e.focus}},[i("span",{staticClass:"el-checkbox__inner"}),e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",name:e.name,disabled:e.disabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",disabled:e.disabled,name:e.name},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=e.label,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}})]),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(707),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(708),i(709),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCheckboxButton",mixins:[o.default],data:function(){return{selfModel:!1,focus:!1}},props:{value:{},label:{},disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},computed:{model:{get:function(){return this._checkboxGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){if(this._checkboxGroup){var t=!1;void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(t=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(t=!0),t===!1&&this.dispatch("ElCheckboxGroup","input",[e])}else void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},_checkboxGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return e;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value},activeStyle:function(){return{backgroundColor:this._checkboxGroup.fill||"",borderColor:this._checkboxGroup.fill||"",color:this._checkboxGroup.textColor||"","box-shadow":"-1px 0 0 0 "+this._checkboxGroup.fill}},size:function(){return this._checkboxGroup.size}},methods:{addToStore:function(){Array.isArray(this.model)&&this.model.indexOf(this.label)===-1?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$emit("change",e),this._checkboxGroup&&this.$nextTick(function(e){t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}},created:function(){this.checked&&this.addToStore()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox-button",class:[e.size?"el-checkbox-button--"+e.size:"",{"is-disabled":e.disabled},{"is-checked":e.isChecked},{"is-focus":e.focus}]},[e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.disabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox-button__original",attrs:{type:"checkbox",name:e.name,disabled:e.disabled},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:e.handleChange,focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},__c:function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=e.label,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s}}}),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox-button__inner",style:e.isChecked?e.activeStyle:null},[e._t("default",[e._v(e._s(e.label))])],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(711),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(712),i(713),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[o.default],props:{value:{},min:Number,max:Number,size:String,fill:String,textColor:String},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-checkbox-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(715),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(716),i(717),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSwitch",props:{value:{type:[Boolean,String,Number],default:!0},disabled:{type:Boolean,default:!1},width:{type:Number,default:0},onIconClass:{type:String,default:""},offIconClass:{type:String,default:""},onText:{type:String,default:"ON"},offText:{type:String,default:"OFF"},onColor:{type:String,default:""},offColor:{type:String,default:""},onValue:{type:[Boolean,String,Number],default:!0},offValue:{type:[Boolean,String,Number],default:!1},name:{type:String,default:""}},data:function(){return{coreWidth:this.width}},created:function(){~[this.onValue,this.offValue].indexOf(this.value)||this.$emit("input",this.onValue)},computed:{checked:function(){return this.value===this.onValue},hasText:function(){return this.onText||this.offText},_value:{get:function(){return this.value},set:function(e){this.$emit("input",e)}},transform:function(){return this.checked?"translate("+(this.coreWidth-20)+"px, 2px)":"translate(2px, 2px)"}},watch:{value:function(){(this.onColor||this.offColor)&&this.setBackgroundColor()}},methods:{handleChange:function(e){this.$emit("change",e.currentTarget.checked)},setBackgroundColor:function(){var e=this.checked?this.onColor:this.offColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e}},mounted:function(){0===this.width&&(this.coreWidth=this.hasText?58:46),(this.onColor||this.offColor)&&this.setBackgroundColor()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-switch",class:{"is-disabled":e.disabled,"el-switch--wide":e.hasText}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.disabled,expression:"disabled"}],staticClass:"el-switch__mask"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e._value,expression:"_value"}],staticClass:"el-switch__input",attrs:{type:"checkbox",name:e.name,"true-value":e.onValue,"false-value":e.offValue,disabled:e.disabled},domProps:{checked:Array.isArray(e._value)?e._i(e._value,null)>-1:e._q(e._value,e.onValue)},on:{change:e.handleChange,__c:function(t){var i=e._value,n=t.target,s=n.checked?e.onValue:e.offValue;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e._value=i.concat(o)):a>-1&&(e._value=i.slice(0,a).concat(i.slice(a+1)))}else e._value=s}}}),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:e.coreWidth+"px"}},[i("span",{staticClass:"el-switch__button",style:{transform:e.transform}})]),i("transition",{attrs:{name:"label-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.checked,expression:"checked"}],staticClass:"el-switch__label el-switch__label--left",style:{width:e.coreWidth+"px"}},[e.onIconClass?i("i",{class:[e.onIconClass]}):e._e(),!e.onIconClass&&e.onText?i("span",[e._v(e._s(e.onText))]):e._e()])]),i("transition",{attrs:{name:"label-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.checked,expression:"!checked"}],staticClass:"el-switch__label el-switch__label--right",style:{width:e.coreWidth+"px"}},[e.offIconClass?i("i",{class:[e.offIconClass]}):e._e(),!e.offIconClass&&e.offText?i("span",[e._v(e._s(e.offText))]):e._e()])])],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(719),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(720),i(721),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={mixins:[o.default],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return e.visible===!0})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-select-group__wrap"},[i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(723),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(724),i(738),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(702),o=n(s),a=i(31),r=n(a),l=i(635),u=n(l),c=i(632),d=i(608),h=n(d),f=i(725),p=n(f),m=i(727),v=n(m),g=i(728),y=n(g),b=i(732),_=n(b),C=i(737),x=n(C),w=i(726),M=1;t.default={name:"ElTable",mixins:[h.default],props:{data:{type:Array,default:function(){return[]}},width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},showSummary:Boolean,sumText:String,summaryMethod:Function,rowClassName:[String,Function],rowStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String},components:{TableHeader:_.default,TableFooter:x.default,TableBody:y.default,ElCheckbox:o.default},methods:{setCurrentRow:function(e){this.store.commit("setCurrentRow",e)},toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},clearSelection:function(){this.store.clearSelection()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY()},bindEvents:function(){var e=this,t=this.$refs,i=t.headerWrapper,n=t.footerWrapper,s=this.$refs;this.bodyWrapper.addEventListener("scroll",function(){i&&(i.scrollLeft=this.scrollLeft),n&&(n.scrollLeft=this.scrollLeft),s.fixedBodyWrapper&&(s.fixedBodyWrapper.scrollTop=this.scrollTop),s.rightFixedBodyWrapper&&(s.rightFixedBodyWrapper.scrollTop=this.scrollTop)}),i&&(0,w.mousewheel)(i,(0,r.default)(16,function(t){var i=t.deltaX;i>0?e.bodyWrapper.scrollLeft+=10:e.bodyWrapper.scrollLeft-=10})),this.fit&&(this.windowResizeListener=(0,r.default)(50,function(){e.$ready&&e.doLayout()}),(0,c.addResizeListener)(this.$el,this.windowResizeListener))},doLayout:function(){var e=this;this.store.updateColumns(),this.layout.update(),this.updateScrollY(),this.$nextTick(function(){e.height?e.layout.setHeight(e.height):e.maxHeight?e.layout.setMaxHeight(e.maxHeight):e.shouldUpdateHeight&&e.layout.updateHeight()})}},created:function(){var e=this;this.tableId="el-table_"+M+"_",this.debouncedLayout=(0,u.default)(50,function(){return e.doLayout()})},computed:{bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return"number"==typeof this.height||this.fixedColumns.length>0||this.rightFixedColumns.length>0},selection:function(){return this.store.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyHeight:function(){var e={};return this.height?e={height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight&&(e={"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight:this.maxHeight)+"px"}),e},bodyWidth:function e(){var t=this.layout,e=t.bodyWidth,i=t.scrollY,n=t.gutterWidth;return e?e-(i?n:0)+"px":""},fixedBodyHeight:function(){var e={};if(this.height)e={height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""
+};else if(this.maxHeight){var t=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;this.showHeader&&(t-=this.layout.headerHeight),e={"max-height":t+"px"}}return e},fixedHeight:function(){var e={};return e=this.maxHeight?{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:function(e){this.layout.setHeight(e)},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){this.store.commit("setData",e)}},expandRowKeys:function(e){this.store.setExpandRowKeys(e)}},destroyed:function(){this.windowResizeListener&&(0,c.removeResizeListener)(this.$el,this.windowResizeListener)},mounted:function(){var e=this;this.bindEvents(),this.doLayout(),this.store.states.columns.forEach(function(t){t.filteredValue&&t.filteredValue.length&&e.store.commit("filterChange",{column:t,values:t.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new p.default(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll}),t=new v.default({store:e,table:this,fit:this.fit,showHeader:this.showHeader});return{store:e,layout:t,renderExpanded:null,resizeProxyVisible:!1}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(635),r=n(a),l=i(726),u=function(e,t){var i=t.sortingColumn;return i&&"string"!=typeof i.sortable?(0,l.orderBy)(e,t.sortProp,t.sortOrder,i.sortMethod):e},c=function(e,t){var i={};return(e||[]).forEach(function(e,n){i[(0,l.getRowIdentity)(e,t)]={row:e,index:n}}),i},d=function(e,t,i){var n=!1,s=e.selection,o=s.indexOf(t);return"undefined"==typeof i?o===-1?(s.push(t),n=!0):(s.splice(o,1),n=!0):i&&o===-1?(s.push(t),n=!0):!i&&o>-1&&(s.splice(o,1),n=!0),n},h=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],isComplex:!1,_data:null,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1};for(var i in t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};h.prototype.mutations={setData:function(e,t){var i=this,n=e._data!==t;e._data=t,e.data=u(t||[],e),this.updateCurrentRow(),e.reserveSelection?!function(){var t=e.rowKey;t?!function(){var n=e.selection,s=c(n,t);e.data.forEach(function(e){var i=(0,l.getRowIdentity)(e,t),o=s[i];o&&(n[o.index]=e)}),i.updateAllSelected()}():console.warn("WARN: rowKey is required when reserve-selection is enabled.")}():(n?this.clearSelection():this.cleanSelection(),this.updateAllSelected());var s=e.defaultExpandAll;s&&(this.states.expandRows=(e.data||[]).slice(0)),o.default.nextTick(function(){return i.table.updateScrollY()})},changeSortCondition:function(e){var t=this;e.data=u(e.filteredData||e._data||[],e),this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),o.default.nextTick(function(){return t.table.updateScrollY()})},filterChange:function(e,t){var i=this,n=t.column,s=t.values,a=t.silent;s&&!Array.isArray(s)&&(s=[s]);var r=n.property,c={};r&&(e.filters[n.id]=s,c[n.columnKey||n.id]=s);var d=e._data;Object.keys(e.filters).forEach(function(t){var n=e.filters[t];if(n&&0!==n.length){var s=(0,l.getColumnById)(i.states,t);s&&s.filterMethod&&(d=d.filter(function(e){return n.some(function(t){return s.filterMethod.call(null,t,e)})}))}}),e.filteredData=d,e.data=u(d,e),a||this.table.$emit("filter-change",c),o.default.nextTick(function(){return i.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&(s=n.children,s||(s=n.children=[])),"undefined"!=typeof i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.updateColumns(),this.scheduleLayout()},removeColumn:function(e,t){var i=e._columns;i&&i.splice(i.indexOf(t),1),this.updateColumns(),this.scheduleLayout()},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;e.currentRow=t,i!==t&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=d(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n),s.$emit("select",n,t)}this.updateAllSelected()},toggleRowExpanded:function(e,t,i){var n=e.expandRows;if("undefined"!=typeof i){var s=n.indexOf(t);i?s===-1&&n.push(t):s!==-1&&n.splice(s,1)}else{var o=n.indexOf(t);o===-1?n.push(t):n.splice(o,1)}this.table.$emit("expand",t,n.indexOf(t)!==-1)},toggleAllSelection:(0,r.default)(10,function(e){var t=e.data||[],i=!e.isAllSelected,n=this.states.selection,s=!1;t.forEach(function(t,n){e.selectable?e.selectable.call(null,t,n)&&d(e,t,i)&&(s=!0):d(e,t,i)&&(s=!0)});var o=this.table;s&&o.$emit("selection-change",n),o.$emit("select-all",n),e.isAllSelected=i})};var f=function e(t){var i=[];return t.forEach(function(t){t.children?i.push.apply(i,e(t.children)):i.push(t)}),i};h.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return e.fixed===!0||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),e.fixedColumns.length>0&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0])),e.originColumns=[].concat(e.fixedColumns).concat(t.filter(function(e){return!e.fixed})).concat(e.rightFixedColumns),e.columns=f(e.originColumns),e.isComplex=e.fixedColumns.length>0||e.rightFixedColumns.length>0},h.prototype.isSelected=function(e){return(this.states.selection||[]).indexOf(e)>-1},h.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection=[],t.length>0&&this.table.$emit("selection-change",e.selection)},h.prototype.setExpandRowKeys=function(e){var t=[],i=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=c(i,n);e.forEach(function(e){var i=s[e];i&&t.push(i.row)}),this.states.expandRows=t},h.prototype.toggleRowSelection=function(e,t){var i=d(this.states,e,t);i&&this.table.$emit("selection-change",this.states.selection)},h.prototype.cleanSelection=function(){var e=this.states.selection||[],t=this.states.data,i=this.states.rowKey,n=void 0;if(i){n=[];var s=c(e,i),o=c(t,i);for(var a in s)s.hasOwnProperty(a)&&!o[a]&&n.push(s[a].row)}else n=e.filter(function(e){return t.indexOf(e)===-1});n.forEach(function(t){e.splice(e.indexOf(t),1)}),n.length&&this.table.$emit("selection-change",e)},h.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(!s||0===s.length)return void(e.isAllSelected=!1);var o=void 0;i&&(o=c(e.selection,i));for(var a=function(e){return o?!!o[(0,l.getRowIdentity)(e,i)]:t.indexOf(e)!==-1},r=!0,u=0,d=0,h=s.length;d<h;d++){var f=s[d];if(n){var p=n.call(null,f,d);if(p){if(!a(f)){r=!1;break}u++}}else{if(!a(f)){r=!1;break}u++}}0===u&&(r=!1),e.isAllSelected=r},h.prototype.scheduleLayout=function(){this.table.debouncedLayout()},h.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],s=c(n,i),o=s[e];o&&(t.currentRow=o.row)},h.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;i.indexOf(n)===-1&&(e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n))},h.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(i>1?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];t[e].apply(this,[this.states].concat(n))},t.default=h},function(e,t){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=(t.getCell=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},t.getValueByPath=function(e,t){t=t||"";for(var i=t.split("."),n=e,s=null,o=0,a=i.length;o<a;o++){var r=i[o];if(!n)break;if(o===a-1){s=n[r];break}n=n[r]}return s}),s=function(e){return null!==e&&"object"===("undefined"==typeof e?"undefined":i(e))},o=(t.orderBy=function(e,t,i,o){if("string"==typeof i&&(i="descending"===i?-1:1),!t)return e;var a=i&&i<0?-1:1;return e.slice().sort(o?function(e,t){return o(e,t)?a:-a}:function(e,i){return"$key"!==t&&(s(e)&&"$value"in e&&(e=e.$value),s(i)&&"$value"in i&&(i=i.$value)),e=s(e)?n(e,t):e,i=s(i)?n(i,t):i,e===i?0:e>i?a:-a})},t.getColumnById=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i}),a=(t.getColumnByCell=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?o(e,i[0]):null},"undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1);t.mousewheel=function(e,t){e&&e.addEventListener&&e.addEventListener(a?"DOMMouseScroll":"mousewheel",t)},t.getRowIdentity=function(e,t){if(!e)throw new Error("row is required when get row identity");return"string"==typeof t?e[t]:"function"==typeof t?t.call(null,e):void 0}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=i(620),a=n(o),r=function(){function e(t){s(this,e),this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=(0,a.default)();for(var i in t)t.hasOwnProperty(i)&&(this[i]=t[i]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return e.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>t.offsetHeight}}},e.prototype.setHeight=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"height",i=this.table.$el;"string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,i&&("number"==typeof e?(i.style[t]=e+"px",this.updateHeight()):"string"==typeof e&&(""===e&&(i.style[t]=""),this.updateHeight()))},e.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},e.prototype.updateHeight=function(){var e=this.tableHeight=this.table.$el.clientHeight,t=!this.table.data||0===this.table.data.length,i=this.table.$refs.headerWrapper;if(!this.showHeader||i){if(this.showHeader){var n=this.headerHeight=i.offsetHeight,s=this.table.showSummary&&this.table.data&&this.table.data.length>0?2:1,o=e-s*n+(this.table.showSummary?1:0);null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=o),this.fixedBodyHeight=this.scrollX?o-this.gutterWidth:o}else this.headerHeight=0,null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=e),this.fixedBodyHeight=this.scrollX?e-this.gutterWidth:e;this.viewportHeight=this.scrollX?e-(t?0:this.gutterWidth):e}},e.prototype.update=function(){var e=this.fit,t=this.table.columns,i=this.table.$el.clientWidth,n=0,s=[];t.forEach(function(e){e.isColumnGroup?s.push.apply(s,e.columns):s.push(e)});var o=s.filter(function(e){return"number"!=typeof e.width});if(o.length>0&&e){if(s.forEach(function(e){n+=e.width||e.minWidth||80}),n<i-this.gutterWidth){this.scrollX=!1;var a=i-this.gutterWidth-n;1===o.length?o[0].realWidth=(o[0].minWidth||80)+a:!function(){var e=o.reduce(function(e,t){return e+(t.minWidth||80)},0),t=a/e,i=0;o.forEach(function(e,n){if(0!==n){var s=Math.floor((e.minWidth||80)*t);i+=s,e.realWidth=(e.minWidth||80)+s}}),o[0].realWidth=(o[0].minWidth||80)+a-i}()}else this.scrollX=!0,o.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(n,i)}else s.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,n+=e.realWidth}),this.scrollX=n>i,this.bodyWidth=n;var r=this.store.states.fixedColumns;if(r.length>0){var l=0;r.forEach(function(e){l+=e.realWidth}),this.fixedWidth=l}var u=this.store.states.rightFixedColumns;if(u.length>0){var c=0;u.forEach(function(e){c+=e.realWidth}),this.rightFixedWidth=c}},e}();t.default=r},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(726),o=i(71),a=i(702),r=n(a),l=i(729),u=n(l),c=i(635),d=n(c);t.default={components:{ElCheckbox:r.default,ElTooltip:u.default},props:{store:{required:!0},context:{},layout:{required:!0},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(e){var t=this,i=this.columns.map(function(e,i){return t.isColumnHidden(i)});return e("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])})]),e("tbody",null,[this._l(this.data,function(n,s){return[e("tr",{style:t.rowStyle?t.getRowStyle(n,s):null,key:t.table.rowKey?t.getKeyOfRow(n,s):s,on:{dblclick:function(e){return t.handleDoubleClick(e,n)},click:function(e){return t.handleClick(e,n)},contextmenu:function(e){return t.handleContextMenu(e,n)},mouseenter:function(e){return t.handleMouseEnter(s)},mouseleave:function(e){return t.handleMouseLeave()}},class:[t.getRowClass(n,s)]},[t._l(t.columns,function(o,a){return e("td",{class:[o.id,o.align,o.className||"",i[a]?"is-hidden":""],on:{mouseenter:function(e){return t.handleCellMouseEnter(e,n)},mouseleave:t.handleCellMouseLeave}},[o.renderCell.call(t._renderProxy,e,{row:n,column:o,$index:s,store:t.store,_self:t.context||t.table.$vnode.context},i[a])])}),!t.fixed&&t.layout.scrollY&&t.layout.gutterWidth?e("td",{class:"gutter"},[]):""]),t.store.states.expandRows.indexOf(n)>-1?e("tr",null,[e("td",{attrs:{colspan:t.columns.length},class:"el-table__expanded-cell"},[t.table.renderExpanded?t.table.renderExpanded(e,{row:n,$index:s,store:t.store}):""])]):""]}).concat(this._self.$parent.$slots.append).concat(e("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"},[]))])])},watch:{"store.states.hoverRow":function(e,t){if(this.store.states.isComplex){var i=this.$el;if(i){var n=i.querySelectorAll("tbody > tr"),s=n[t],o=n[e];s&&s.classList.remove("hover-row"),o&&o.classList.add("hover-row")}}},"store.states.currentRow":function(e,t){if(this.highlight){var i=this.$el;if(i){var n=this.store.states.data,s=i.querySelectorAll("tbody > tr"),o=s[n.indexOf(t)],a=s[n.indexOf(e)];o?o.classList.remove("current-row"):s&&[].forEach.call(s,function(e){return e.classList.remove("current-row")}),a&&a.classList.add("current-row")}}}},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=(0,d.default)(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?(0,s.getRowIdentity)(e,i):t},isColumnHidden:function(e){return this.fixed===!0||"left"===this.fixed?e>=this.leftFixedCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedCount:e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount},getRowStyle:function(e,t){var i=this.rowStyle;return"function"==typeof i?i.call(null,e,t):i},getRowClass:function(e,t){var i=[],n=this.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,e,t)||""),i.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=(0,s.getCell)(e);if(n){var a=(0,s.getColumnByCell)(i,n),r=i.hoverState={cell:n,column:a,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var l=e.target.querySelector(".cell");if((0,o.hasClass)(l,"el-tooltip")&&l.scrollWidth>l.offsetWidth){var u=this.$refs.tooltip;this.tooltipContent=n.innerText,u.referenceElm=n,u.$refs.popper.style.display="none",u.doDestroy(),u.setExpectedState(!0),this.activateTooltip(u)}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;t&&(t.setExpectedState(!1),t.handleClosePopper());var i=(0,s.getCell)(e);if(i){var n=this.table.hoverState;this.table.$emit("cell-mouse-leave",n.row,n.column,n.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,o=(0,s.getCell)(e),a=void 0;o&&(a=(0,s.getColumnByCell)(n,o),a&&n.$emit("cell-"+i,t,a,o,e)),n.$emit("row-"+i,t,e,a)},handleExpandClick:function(e){this.store.commit("toggleRowExpanded",e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(730),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(635),r=n(a),l=i(731),u=i(2),c=n(u);t.default={name:"ElTooltip",mixins:[o.default],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"el-fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new c.default({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=(0,r.default)(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;if(this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])])),!this.$slots.default||!this.$slots.default.length)return this.$slots.default;var i=(0,l.getFirstComponentChild)(this.$slots.default);if(!i)return i;var n=i.data=i.data||{},s=i.data.on=i.data.on||{};return s.mouseenter=this.addEventHandle(s.mouseenter,function(){t.setExpectedState(!0),t.handleShowPopper()}),s.mouseleave=this.addEventHandle(s.mouseleave,function(){t.setExpectedState(!1),t.debounceClose()}),n.staticClass=this.concatClass(n.staticClass,"el-tooltip"),i},mounted:function(){this.referenceElm=this.$el},methods:{addEventHandle:function(e,t){return e?Array.isArray(e)?e.concat(t):[e,t]:t},concatClass:function(e,t){return e&&e.indexOf(t)>-1?e:e?t?e+" "+t:e:t||""},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.showPopper=!1)},setExpectedState:function(e){this.expectedState=e}}}},function(e,t,i){"use strict";function n(e){return"object"===("undefined"==typeof e?"undefined":o(e))&&(0,a.hasOwn)(e,"componentOptions")}function s(e){return e&&e.filter(function(e){return e&&e.tag})[0]}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.isVNode=n,t.getFirstComponentChild=s;var a=i(19)},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(702),o=n(s),a=i(626),r=n(a),l=i(2),u=n(l),c=i(733),d=n(c),h=function e(t){var i=[];return t.forEach(function(t){t.children?(i.push(t),i.push.apply(i,e(t.children))):i.push(t)}),i},f=function(e){var t=1,i=function e(i,n){if(n&&(i.level=n.level+1,t<i.level&&(t=i.level)),i.children){var s=0;i.children.forEach(function(t){e(t,i),s+=t.colSpan}),i.colSpan=s}else i.colSpan=1};e.forEach(function(e){e.level=1,i(e)});for(var n=[],s=0;s<t;s++)n.push([]);var o=h(e);return o.forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=t-e.level+1,n[e.level-1].push(e)}),n};t.default={name:"ElTableHeader",render:function(e){var t=this,i=this.store.states.originColumns,n=f(i,this.columns);return e("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])}),!this.fixed&&this.layout.gutterWidth?e("col",{attrs:{name:"gutter",width:this.layout.scrollY?this.layout.gutterWidth:""}},[]):""]),e("thead",null,[this._l(n,function(i,n){return e("tr",null,[t._l(i,function(s,o){return e("th",{attrs:{colspan:s.colSpan,rowspan:s.rowSpan},on:{mousemove:function(e){return t.handleMouseMove(e,s)},mouseout:t.handleMouseOut,mousedown:function(e){return t.handleMouseDown(e,s)},click:function(e){return t.handleHeaderClick(e,s)}},class:[s.id,s.order,s.headerAlign,s.className||"",0===n&&t.isCellHidden(o,i)?"is-hidden":"",s.children?"":"is-leaf",s.labelClassName]},[e("div",{class:["cell",s.filteredValue&&s.filteredValue.length>0?"highlight":"",s.labelClassName]},[s.renderHeader?s.renderHeader.call(t._renderProxy,e,{column:s,$index:o,store:t.store,_self:t.$parent.$vnode.context}):s.label,s.sortable?e("span",{class:"caret-wrapper",on:{click:function(e){return t.handleSortClick(e,s)}}},[e("i",{class:"sort-caret ascending",on:{click:function(e){return t.handleSortClick(e,s,"ascending")}}},[]),e("i",{class:"sort-caret descending",on:{click:function(e){return t.handleSortClick(e,s,"descending")}}},[])]):"",s.filterable?e("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return t.handleFilterClick(e,s)}}},[e("i",{class:["el-icon-arrow-down",s.filterOpened?"el-icon-arrow-up":""]},[])]):""])])}),!t.fixed&&t.layout.gutterWidth?e("th",{class:"gutter",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0"}},[]):""])})])])},props:{fixed:String,store:{required:!0},layout:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:o.default,ElTag:r.default},computed:{isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},created:function(){this.filterPanels={}},mounted:function(){var e=this;this.defaultSort.prop&&!function(){var t=e.store.states;t.sortProp=e.defaultSort.prop,t.sortOrder=e.defaultSort.order||"ascending",e.$nextTick(function(i){for(var n=0,s=e.columns.length;n<s;n++){var o=e.columns[n];if(o.property===t.sortProp){o.order=t.sortOrder,t.sortingColumn=o;break}}t.sortingColumn&&e.store.commit("changeSortCondition")})}()},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){if(this.fixed===!0||"left"===this.fixed)return e>=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;return i<this.columnsCount-this.rightFixedCount}return e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n=i.parentNode,s=this.$parent,o=this.filterPanels[t.id];return o&&t.filterOpened?void(o.showPopper=!1):(o||(o=new u.default(d.default),this.filterPanels[t.id]=o,o.table=s,o.cell=n,o.column=t,!this.$isServer&&o.$mount(document.createElement("div"))),void setTimeout(function(){o.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filters&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleMouseDown:function(e,t){var i=this;this.$isServer||t.children&&t.children.length>0||this.draggingColumn&&this.border&&!function(){i.dragging=!0,i.$parent.resizeProxyVisible=!0;var n=i.$parent,s=n.$el,o=s.getBoundingClientRect().left,a=i.$el.querySelector("th."+t.id),r=a.getBoundingClientRect(),l=r.left-o+30;a.classList.add("noclick"),i.dragState={startMouseLeft:e.clientX,startLeft:r.right-o,startColumnLeft:r.left-o,tableLeft:o};var u=n.$refs.resizeProxy;u.style.left=i.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var c=function(e){var t=e.clientX-i.dragState.startMouseLeft,n=i.dragState.startLeft+t;u.style.left=Math.max(l,n)+"px"},d=function s(){if(i.dragging){var o=i.dragState,r=o.startColumnLeft,l=o.startLeft,d=parseInt(u.style.left,10),h=d-r;t.width=t.realWidth=h,n.$emit("header-dragend",t.width,l-r,t,e),i.store.scheduleLayout(),document.body.style.cursor="",i.dragging=!1,i.draggingColumn=null,i.dragState={},n.resizeProxyVisible=!1}document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",s),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){a.classList.remove("noclick")},0)};document.addEventListener("mousemove",c),document.addEventListener("mouseup",d)}()},handleMouseMove:function(e,t){if(!(t.children&&t.children.length>0)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),s=document.body.style;n.width>12&&n.right-e.pageX<8?(s.cursor="col-resize",this.draggingColumn=t):this.dragging||(s.cursor="",this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){return e?"ascending"===e?"descending":null:"ascending"},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=i||this.toggleOrder(t.order),s=e.target;s&&"TH"!==s.tagName;)s=s.parentNode;if(s&&"TH"===s.tagName&&s.classList.contains("noclick"))return void s.classList.remove("noclick");if(t.sortable){var o=this.store.states,a=o.sortProp,r=void 0,l=o.sortingColumn;l!==t&&(l&&(l.order=null),o.sortingColumn=t,a=t.property),n?r=t.order=n:(r=t.order=null,o.sortingColumn=null,a=null),o.sortProp=a,o.sortOrder=r,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}}},function(e,t,i){var n=i(13)(i(734),i(736),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(618),r=i(608),l=n(r),u=i(636),c=n(u),d=i(735),h=n(d),f=i(702),p=n(f),m=i(710),v=n(m);t.default={name:"ElTableFilterPanel",mixins:[o.default,l.default],directives:{Clickoutside:c.default},components:{ElCheckbox:p.default,ElCheckboxGroup:v.default},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"},[]),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){this.showPopper=!1},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){this.filterValue=e,"undefined"!=typeof e&&null!==e?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e})}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&("undefined"!=typeof e&&null!==e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column?this.column.filteredValue||[]:[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var e=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){e.updatePopper()}),this.$watch("showPopper",function(t){e.column&&(e.column.filterOpened=t),t?h.default.open(e):h.default.close(e)})},watch:{showPopper:function(e){e===!0&&parseInt(this.popperJS._popper.style.zIndex,10)<a.PopupManager.zIndex&&(this.popperJS._popper.style.zIndex=a.PopupManager.nextZIndex())}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=[];!o.default.prototype.$isServer&&document.addEventListener("click",function(e){a.forEach(function(t){var i=e.target;t&&t.$el&&(i===t.$el||t.$el.contains(i)||t.handleOutsideClick&&t.handleOutsideClick(e))})}),t.default={open:function(e){e&&a.push(e)},close:function(e){var t=a.indexOf(e);t!==-1&&a.splice(e,1)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"}},[e.multiple?i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[i("div",{staticClass:"el-table-filter__content"},[i("el-checkbox-group",{staticClass:"el-table-filter__checkbox-group",model:{value:e.filteredValue,callback:function(t){e.filteredValue=t},expression:"filteredValue"}},e._l(e.filters,function(t){return i("el-checkbox",{key:t.value,attrs:{label:t.value}},[e._v(e._s(t.text))])}))],1),i("div",{staticClass:"el-table-filter__bottom"},[i("button",{class:{"is-disabled":0===e.filteredValue.length},attrs:{disabled:0===e.filteredValue.length},on:{click:e.handleConfirm}},[e._v(e._s(e.t("el.table.confirmFilter")))]),i("button",{on:{click:e.handleReset}},[e._v(e._s(e.t("el.table.resetFilter")))])])]):i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[i("ul",{staticClass:"el-table-filter__list"},[i("li",{staticClass:"el-table-filter__list-item",class:{"is-active":!e.filterValue},on:{click:function(t){e.handleSelect(null)}}},[e._v(e._s(e.t("el.table.clearFilter")))]),e._l(e.filters,function(t){return i("li",{key:t.value,staticClass:"el-table-filter__list-item",class:{"is-active":e.isActive(t)},attrs:{label:t.value},on:{click:function(i){e.handleSelect(t.value)}}},[e._v(e._s(t.text))])})],2)])])},staticRenderFns:[]}},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTableFooter",render:function(e){var t=this,i=[];return this.columns.forEach(function(e,n){if(0===n)return void(i[n]=t.sumText);var s=t.store.states.data.map(function(t){return Number(t[e.property])}),o=[],a=!0;s.forEach(function(e){if(!isNaN(e)){a=!1;
+var t=(""+e).split(".")[1];o.push(t?t.length:0)}});var r=Math.max.apply(null,o);a?i[n]="":i[n]=s.reduce(function(e,t){var i=Number(t);return isNaN(i)?e:parseFloat((e+t).toFixed(r))},0)}),e("table",{class:"el-table__footer",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])}),!this.fixed&&this.layout.gutterWidth?e("col",{attrs:{name:"gutter",width:this.layout.scrollY?this.layout.gutterWidth:""}},[]):""]),e("tbody",null,[e("tr",null,[this._l(this.columns,function(n,s){return e("td",{attrs:{colspan:n.colSpan,rowspan:n.rowSpan},class:[n.id,n.headerAlign,n.className||"",t.isCellHidden(s,t.columns)?"is-hidden":"",n.children?"":"is-leaf",n.labelClassName]},[e("div",{class:["cell",n.labelClassName]},[t.summaryMethod?t.summaryMethod({columns:t.columns,data:t.store.states.data})[s]:i[s]])])}),!this.fixed&&this.layout.gutterWidth?e("td",{class:"gutter",style:{width:this.layout.scrollY?this.layout.gutterWidth+"px":"0"}},[]):""])])])},props:{fixed:String,store:{required:!0},layout:{required:!0},summaryMethod:Function,sumText:String,border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},computed:{isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},methods:{isCellHidden:function(e,t){if(this.fixed===!0||"left"===this.fixed)return e>=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;return i<this.columnsCount-this.rightFixedCount}return e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-table",class:{"el-table--fit":e.fit,"el-table--striped":e.stripe,"el-table--border":e.border,"el-table--fluid-height":e.maxHeight,"el-table--enable-row-hover":!e.store.states.isComplex,"el-table--enable-row-transition":!0},on:{mouseleave:function(t){e.handleMouseLeave(t)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[e._t("default")],2),e.showHeader?i("div",{ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"default-sort":e.defaultSort}})],1):e._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",style:[e.bodyHeight]},[i("table-body",{style:{width:e.bodyWidth},attrs:{context:e.context,store:e.store,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}}),e.data&&0!==e.data.length?e._e():i("div",{staticClass:"el-table__empty-block",style:{width:e.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[e._t("empty",[e._v(e._s(e.emptyText||e.t("el.table.emptyText")))])],2)])],1),e.showSummary&&e.data&&e.data.length>0?i("div",{ref:"footerWrapper",staticClass:"el-table__footer-wrapper"},[i("table-footer",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,"default-sort":e.defaultSort}})],1):e._e(),e.fixedColumns.length>0?i("div",{ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",store:e.store,layout:e.layout,highlight:e.highlightCurrentRow,"row-class-name":e.rowClassName,"row-style":e.rowStyle}})],1),e.showSummary&&e.data&&e.data.length>0?i("div",{ref:"fixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},{right:e.layout.scrollY?(e.border?e.layout.gutterWidth:e.layout.gutterWidth||1)+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",store:e.store,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}})],1),e.showSummary&&e.data&&e.data.length>0?i("div",{ref:"rightFixedFooterWrapper",staticClass:"el-table__fixed-footer-wrapper"},[i("table-footer",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,"sum-text":e.sumText||e.t("el.table.sumText"),"summary-method":e.summaryMethod,store:e.store,layout:e.layout}})],1):e._e()]):e._e(),e.rightFixedColumns.length>0?i("div",{staticClass:"el-table__fixed-right-patch",style:{width:e.layout.scrollY?e.layout.gutterWidth+"px":"0",height:e.layout.headerHeight+"px"}}):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:e.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(740),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(null==e)throw new TypeError("Cannot destructure undefined")}t.__esModule=!0;var o=i(702),a=n(o),r=i(626),l=n(r),u=i(613),c=n(u),d=i(726),h=1,f={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},p={selection:{renderHeader:function(e){return e("el-checkbox",{nativeOn:{click:this.toggleAllSelection},attrs:{value:this.isAllSelected}},[])},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,o=t.$index;return e("el-checkbox",{attrs:{value:s.isSelected(i),disabled:!!n.selectable&&!n.selectable.call(null,i,o)},on:{input:function(){s.commit("rowSelectedChanged",i)}}},[])},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){var i=t.column;return i.label||"#"},renderCell:function(e,t){var i=t.$index;return e("div",null,[i+1])},sortable:!1},expand:{renderHeader:function(e,t){return s(t),""},renderCell:function(e,t,i){var n=t.row,s=t.store,o=s.states.expandRows.indexOf(n)>-1;return e("div",{class:"el-table__expand-icon "+(o?"el-table__expand-icon--expanded":""),on:{click:function(){return i.handleExpandClick(n)}}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},m=function(e,t){var i={};(0,c.default)(i,f[e||"default"]);for(var n in t)if(t.hasOwnProperty(n)){var s=t[n];"undefined"!=typeof s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=i.width||i.minWidth,i},v=function(e,t){var i=t.row,n=t.column,s=n.property;return n&&n.formatter?n.formatter(i,n):s&&s.indexOf(".")===-1?i[s]:(0,d.getValueByPath)(i,s)};t.default={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterMultiple:{type:Boolean,default:!0}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:a.default,ElTag:l.default},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},created:function(){var e=this;this.customRender=this.$options.render,this.$options.render=function(t){return t("div",e.$slots.default)},this.columnId=(this.$parent.tableId||this.$parent.columnId+"_")+"column_"+h++;var t=this.$parent,i=this.owner;this.isSubColumn=i!==t;var n=this.type,s=this.width;void 0!==s&&(s=parseInt(s,10),isNaN(s)&&(s=null));var o=this.minWidth;void 0!==o&&(o=parseInt(o,10),isNaN(o)&&(o=80));var a=!1,r=m(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:o,width:s,isColumnGroup:a,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[]});(0,c.default)(r,p[n]||{}),this.columnConfig=r;var l=r.renderCell,u=this;return"expand"===n?(i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(r.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])})):void(r.renderCell=function(e,t){return u.$vnode.data.inlineTemplate?l=function(){if(t._self=u.context||t._self,"[object Object]"===Object.prototype.toString.call(t._self))for(var e in t._self)t.hasOwnProperty(e)||(t[e]=t._self[e]);return t._staticTrees=u._staticTrees,t.$options.staticRenderFns=u.$options.staticRenderFns,u.customRender.call(t)}:u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=v),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip"},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])})},destroyed:function(){this.$parent&&this.owner.store.commit("removeColumn",this.columnConfig)},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e?e:this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=e,this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=e,this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout())},sortable:function(e){this.columnConfig&&(this.columnConfig.sortable=e)}},mounted:function(){var e=this.owner,t=this.$parent,i=void 0;i=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),e.store.commit("insertColumn",this.columnConfig,i,this.isSubColumn?t.columnConfig:null)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(742),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(743),o=n(s),a=i(747),r=n(a),l=i(765),u=n(l),c=function(e){return"daterange"===e||"datetimerange"===e?u.default:r.default};t.default={mixins:[o.default],name:"ElDatePicker",props:{type:{type:String,default:"date"}},watch:{type:function(e){this.picker?(this.unmountPicker(),this.panel=c(e),this.mountPicker()):this.panel=c(e)}},created:function(){this.panel=c(this.type)}}},function(e,t,i){var n=i(13)(i(744),i(746),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(636),r=n(a),l=i(745),u=i(617),c=n(u),d=i(607),h=n(d),f=i(609),p=n(f),m={props:{appendToBody:c.default.props.appendToBody,offset:c.default.props.offset,boundariesPadding:c.default.props.boundariesPadding},methods:c.default.methods,data:c.default.data,beforeDestroy:c.default.beforeDestroy},v={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},g=["date","datetime","time","time-select","week","month","year","daterange","timerange","datetimerange"],y=function(e,t){return(0,l.formatDate)(e,t)},b=function(e,t){return(0,l.parseDate)(e,t)},_=function(e,t,i){if(Array.isArray(e)&&2===e.length){var n=e[0],s=e[1];if(n&&s)return(0,l.formatDate)(n,t)+i+(0,l.formatDate)(s,t)}return""},C=function(e,t,i){var n=e.split(i);if(2===n.length){var s=n[0],o=n[1];return[(0,l.parseDate)(s,t),(0,l.parseDate)(o,t)]}return[]},x={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=(0,l.formatDate)(e,t),n=(0,l.getWeekNumber)(e);return i=/WW/.test(i)?i.replace(/WW/,n<10?"0"+n:n):i.replace(/W/,n)},parser:function(e){var t=(e||"").split("w");if(2===t.length){var i=Number(t[0]),n=Number(t[1]);if(!isNaN(i)&&!isNaN(n)&&n<54)return e}return null}},date:{formatter:y,parser:b},datetime:{formatter:y,parser:b},daterange:{formatter:_,parser:C},datetimerange:{formatter:_,parser:C},timerange:{formatter:_,parser:C},time:{formatter:y,parser:b},month:{formatter:y,parser:b},year:{formatter:y,parser:b},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}}},w={left:"bottom-start",center:"bottom-center",right:"bottom-end"};t.default={mixins:[h.default,m],props:{size:String,format:String,readonly:Boolean,placeholder:String,disabled:Boolean,clearable:{type:Boolean,default:!0},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},defaultValue:{},rangeSeparator:{default:" - "},pickerOptions:{}},components:{ElInput:p.default},directives:{Clickoutside:r.default},data:function(){return{pickerVisible:!1,showClose:!1,currentValue:"",unwatchPickerOptions:null}},watch:{pickerVisible:function(e){e||this.dispatch("ElFormItem","el.form.blur"),this.readonly||this.disabled||(e?this.showPicker():this.hidePicker())},currentValue:function(e){e||(this.picker&&"function"==typeof this.picker.handleClear?this.picker.handleClear():this.$emit("input"))},value:{immediate:!0,handler:function(e){this.currentValue=(0,l.isDate)(e)?new Date(e):e}},displayValue:function(e){this.$emit("change",e),this.dispatch("ElFormItem","el.form.change")}},computed:{reference:function(){return this.$refs.reference.$el},refInput:function(){return this.reference?this.reference.querySelector("input"):{}},valueIsEmpty:function(){var e=this.currentValue;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.type.indexOf("time")!==-1?"el-icon-time":"el-icon-date"},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"day"},haveTrigger:function(){return"undefined"!=typeof this.showTrigger?this.showTrigger:g.indexOf(this.type)!==-1},displayValue:{get:function(){var e=this.currentValue;if(e){var t=(x[this.type]||x.default).formatter,i=v[this.type];return t(e,this.format||i,this.rangeSeparator)}},set:function(e){if(e){var t=this.type,i=(x[t]||x.default).parser,n=i(e,this.format||v[t],this.rangeSeparator);n&&this.picker&&(this.picker.value=n)}else this.$emit("input",e),this.picker.value=e;this.$forceUpdate()}}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=w[this.align]||w.left},methods:{handleMouseEnterIcon:function(){this.readonly||this.disabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleClickIcon:function(){this.readonly||this.disabled||(this.showClose?(this.currentValue="",this.showClose=!1):this.pickerVisible=!this.pickerVisible)},dateChanged:function(e,t){if(Array.isArray(e)){var i=e.length;if(!t)return!0;for(;i--;)if(!(0,l.equalDate)(e[i],t[i]))return!0}else if(!(0,l.equalDate)(e,t))return!0;return!1},handleClose:function(){this.pickerVisible=!1},handleFocus:function(){var e=this.type;g.indexOf(e)===-1||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleBlur:function(){this.$emit("blur",this)},handleKeydown:function(e){var t=e.keyCode;9===t&&(this.pickerVisible=!1)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker||this.mountPicker(),this.pickerVisible=this.picker.visible=!0,this.updatePopper(),this.currentValue instanceof Date?this.picker.date=new Date(this.currentValue.getTime()):this.picker.value=this.currentValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.ajustScrollTop&&e.picker.ajustScrollTop()}))},mountPicker:function(){var e=this;this.panel.defaultValue=this.currentValue,this.picker=new o.default(this.panel).$mount(),this.picker.popperClass=this.popperClass,this.popperElm=this.picker.$el,this.picker.width=this.reference.getBoundingClientRect().width,this.picker.showTime="datetime"===this.type||"datetimerange"===this.type,this.picker.selectionMode=this.selectionMode,this.format&&(this.picker.format=this.format);var t=function(){var t=e.pickerOptions;t&&t.selectableRange&&!function(){var i=t.selectableRange,n=x.datetimerange.parser,s=v.timerange;i=Array.isArray(i)?i:[i],e.picker.selectableRange=i.map(function(t){return n(t,s,e.rangeSeparator)})}();for(var i in t)t.hasOwnProperty(i)&&"selectableRange"!==i&&(e.picker[i]=t[i])};t(),this.unwatchPickerOptions=this.$watch("pickerOptions",function(){return t()},{deep:!0}),this.$el.appendChild(this.picker.$el),this.picker.resetView&&this.picker.resetView(),this.picker.$on("dodestroy",this.doDestroy),this.picker.$on("pick",function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];e.$emit("input",t),e.pickerVisible=e.picker.visible=i,e.picker.resetView&&e.picker.resetView()}),this.picker.$on("select-range",function(t,i){e.refInput.setSelectionRange(t,i),e.refInput.focus()})},unmountPicker:function(){this.picker&&(this.picker.$destroy(),this.picker.$off(),"function"==typeof this.unwatchPickerOptions&&this.unwatchPickerOptions(),this.picker.$el.parentNode.removeChild(this.picker.$el))}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.limitRange=t.getRangeHours=t.nextMonth=t.prevMonth=t.getWeekNumber=t.getStartDateOfMonth=t.DAY_DURATION=t.getFirstDayOfMonth=t.getDayCountOfMonth=t.parseDate=t.formatDate=t.isDate=t.toDate=t.equalDate=void 0;var s=i(78),o=n(s),a=function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i},r=(t.equalDate=function(e,t){return e===t||new Date(e).getTime()===new Date(t).getTime()},t.toDate=function(e){return l(e)?new Date(e):null}),l=t.isDate=function(e){return null!==e&&void 0!==e&&!isNaN(new Date(e).getTime())},u=(t.formatDate=function(e,t){return e=r(e),e?o.default.format(e,t||"yyyy-MM-dd"):""},t.parseDate=function(e,t){return o.default.parse(e,t||"yyyy-MM-dd")},t.getDayCountOfMonth=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4===0&&e%100!==0||e%400===0?29:28:31}),c=(t.getFirstDayOfMonth=function(e){var t=new Date(e.getTime());return t.setDate(1),t.getDay()},t.DAY_DURATION=864e5);t.getStartDateOfMonth=function(e,t){var i=new Date(e,t,1),n=i.getDay();return 0===n?i.setTime(i.getTime()-7*c):i.setTime(i.getTime()-c*n),i},t.getWeekNumber=function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)},t.prevMonth=function(e){var t=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=0===i?t-1:t,o=0===i?11:i-1,a=u(s,o);return a<n&&e.setDate(a),e.setMonth(o),e.setFullYear(s),new Date(e.getTime())},t.nextMonth=function(e){var t=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=11===i?t+1:t,o=11===i?0:i+1,a=u(s,o);return a<n&&e.setDate(a),e.setMonth(o),e.setFullYear(s),new Date(e.getTime())},t.getRangeHours=function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(a(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=i.indexOf(n)===-1;else for(var s=0;s<24;s++)t[s]=!1;return t},t.limitRange=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"yyyy-MM-dd HH:mm:ss";if(!t||!t.length)return e;var n=t.length;e=o.default.parse(o.default.format(e,i),i);for(var s=0;s<n;s++){var a=t[s];if(e>=a[0]&&e<=a[1])return e}var r=t[0][0],l=t[0][0];return t.forEach(function(e){l=new Date(Math.min(e[0],l)),r=new Date(Math.max(e[1],r))}),e<l?l:r}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("el-input",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+e.type,attrs:{readonly:!e.editable||e.readonly,disabled:e.disabled,size:e.size,placeholder:e.placeholder,value:e.displayValue,validateEvent:!1},on:{focus:e.handleFocus,blur:e.handleBlur},nativeOn:{keydown:function(t){e.handleKeydown(t)},change:function(t){e.displayValue=t.target.value}}},[e.haveTrigger?i("i",{staticClass:"el-input__icon",class:[e.showClose?"el-icon-close":e.triggerClass],on:{click:e.handleClickIcon,mouseenter:e.handleMouseEnterIcon,mouseleave:function(t){e.showClose=!1}},slot:"icon"}):e._e()])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(748),i(764),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o),r=i(609),l=n(r),u=i(749),c=n(u),d=i(755),h=n(d),f=i(758),p=n(f),m=i(761),v=n(m);t.default={mixins:[a.default],watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var i=t.$refs.input.$el;i&&(t.pickerWidth=i.getBoundingClientRect().width+10)})},value:function(e){if(e&&(e=new Date(e),!isNaN(e))){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(e)))return;this.date=e,this.year=e.getFullYear(),this.month=e.getMonth(),this.$emit("pick",e,!0)}},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.ajustScrollTop()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"week"===e&&(this.week=(0,s.getWeekNumber)(this.date))},date:function(e){this.year=e.getFullYear(),this.month=e.getMonth()}},methods:{handleClear:function(){this.date=this.$options.defaultValue?new Date(this.$options.defaultValue):new Date,this.$emit("pick")},resetDate:function(){this.date=new Date(this.date)},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.month--,this.month<0&&(this.month=11,this.year--)},nextMonth:function(){this.month++,this.month>11&&(this.month=0,this.year++)},nextYear:function(){"year"===this.currentView?this.$refs.yearTable.nextTenYear():(this.year++,this.date.setFullYear(this.year),this.resetDate())},prevYear:function(){"year"===this.currentView?this.$refs.yearTable.prevTenYear():(this.year--,this.date.setFullYear(this.year),this.resetDate())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(e){var n=new Date(this.date.getTime()),s=e.getHours(),o=e.getMinutes(),a=e.getSeconds();n.setHours(s),n.setMinutes(o),n.setSeconds(a),this.date=new Date(n.getTime())}i||(this.timePickerVisible=t)},handleMonthPick:function(e){this.month=e;var t=this.selectionMode;if("month"!==t)this.date.setMonth(e),this.currentView="date",this.resetDate();else{this.date.setMonth(e),this.year&&this.date.setFullYear(this.year),this.resetDate();var i=new Date(this.date.getFullYear(),e,1);this.$emit("pick",i)}},handleDatePick:function(e){"day"===this.selectionMode?(this.showTime||this.$emit("pick",new Date(e.getTime())),this.date.setFullYear(e.getFullYear()),this.date.setMonth(e.getMonth(),e.getDate())):"week"===this.selectionMode&&(this.week=e.week,this.$emit("pick",e.date)),this.resetDate()},handleYearPick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.year=e,t&&(this.date.setFullYear(e),"year"===this.selectionMode?this.$emit("pick",new Date(e)):this.currentView="month",this.resetDate())},changeToNow:function(){this.date.setTime(+new Date),this.$emit("pick",new Date(this.date.getTime())),this.resetDate()},confirm:function(){this.$emit("pick",this.date)},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date","week"!==this.selectionMode&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())}},components:{TimePicker:c.default,YearTable:h.default,MonthTable:p.default,DateTable:v.default,ElInput:l.default},mounted:function(){this.date&&!this.year&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())},data:function(){return{popperClass:"",pickerWidth:0,date:this.$options.defaultValue?new Date(this.$options.defaultValue):new Date,value:"",showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",firstDayOfWeek:7,year:null,month:null,week:null,showWeekNumber:!1,timePickerVisible:!1,width:0,format:""}},computed:{footerVisible:function(){return this.showTime},visibleTime:{get:function(){return(0,s.formatDate)(this.date,this.timeFormat)},set:function(e){if(e){var t=(0,s.parseDate)(e,this.timeFormat);t&&(t.setFullYear(this.date.getFullYear()),t.setMonth(this.date.getMonth()),t.setDate(this.date.getDate()),this.date=t,this.$refs.timepicker.value=t,this.timePickerVisible=!1)}}},visibleDate:{get:function(){return(0,s.formatDate)(this.date)},set:function(e){var t=(0,s.parseDate)(e,"yyyy-MM-dd");t&&("function"==typeof this.disabledDate&&this.disabledDate(t)||(t.setHours(this.date.getHours()),t.setMinutes(this.date.getMinutes()),t.setSeconds(this.date.getSeconds()),this.date=t,this.resetView()))}},yearLabel:function(){var e=this.year;if(!e)return"";var t=this.t("el.datepicker.year");if("year"===this.currentView){var i=10*Math.floor(e/10);return t?i+" "+t+" - "+(i+9)+" "+t:i+" - "+(i+9)}return this.year+" "+t},timeFormat:function(){return this.format&&this.format.indexOf("ss")===-1?"HH:mm":"HH:mm:ss"}}}},function(e,t,i){var n=i(13)(i(750),i(754),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o);t.default={mixins:[a.default],components:{TimeSpinner:i(751)},props:{pickerWidth:{},date:{default:function(){return new Date}},visible:Boolean},watch:{visible:function(e){this.currentVisible=e},pickerWidth:function(e){this.width=e},value:function(e){var t=this,i=void 0;e instanceof Date?i=(0,s.limitRange)(e,this.selectableRange):e||(i=new Date),this.handleChange({hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds()}),this.$nextTick(function(e){return t.ajustScrollTop()})},selectableRange:function(e){this.$refs.spinner.selectableRange=e}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",hours:0,minutes:0,seconds:0,selectableRange:[],currentDate:this.$options.defaultValue||this.date||new Date,currentVisible:this.visible||!1,width:this.pickerWidth||0}},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1}},methods:{handleClear:function(){this.$emit("pick")},handleCancel:function(){this.$emit("pick")},handleChange:function(e){void 0!==e.hours&&(this.currentDate.setHours(e.hours),this.hours=this.currentDate.getHours()),void 0!==e.minutes&&(this.currentDate.setMinutes(e.minutes),this.minutes=this.currentDate.getMinutes()),void 0!==e.seconds&&(this.currentDate.setSeconds(e.seconds),this.seconds=this.currentDate.getSeconds()),this.handleConfirm(!0)},setSelectionRange:function(e,t){this.$emit("select-range",e,t)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=new Date((0,s.limitRange)(this.currentDate,this.selectableRange,"HH:mm:ss"));this.$emit("pick",i,e,t)}},ajustScrollTop:function(){return this.$refs.spinner.ajustScrollTop()}},created:function(){this.hours=this.currentDate.getHours(),this.minutes=this.currentDate.getMinutes(),this.seconds=this.currentDate.getSeconds()},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)}),this.$emit("mounted")}}},function(e,t,i){var n=i(13)(i(752),i(753),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(630),a=n(o),r=i(635),l=n(r);t.default={components:{ElScrollbar:a.default},props:{hours:{type:Number,default:0},minutes:{type:Number,default:0},seconds:{type:Number,default:0},showSeconds:{type:Boolean,default:!0}},watch:{hoursPrivate:function(e,t){e>=0&&e<=23||(this.hoursPrivate=t),this.ajustElTop("hour",e),this.$emit("change",{hours:e})},minutesPrivate:function(e,t){e>=0&&e<=59||(this.minutesPrivate=t),this.ajustElTop("minute",e),this.$emit("change",{minutes:e})},secondsPrivate:function(e,t){e>=0&&e<=59||(this.secondsPrivate=t),this.ajustElTop("second",e),this.$emit("change",{seconds:e})}},computed:{hoursList:function(){return(0,s.getRangeHours)(this.selectableRange)},hourEl:function(){return this.$refs.hour.wrap},minuteEl:function(){return this.$refs.minute.wrap},secondEl:function(){return this.$refs.second.wrap}},data:function(){return{hoursPrivate:0,minutesPrivate:0,secondsPrivate:0,selectableRange:[]}},created:function(){var e=this;this.debounceAjustElTop=(0,l.default)(100,function(t){return e.ajustElTop(t,e[t+"s"])})},mounted:function(){var e=this;this.$nextTick(function(){e.bindScrollEvent()})},methods:{handleClick:function(e,t,i){t.disabled||(this[e+"Private"]=t.value>=0?t.value:t,this.emitSelectRange(e))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8)},bindScrollEvent:function(){
+var e=this,t=function(t){e[t+"El"].onscroll=function(i){return e.handleScroll(t,i)}};t("hour"),t("minute"),t("second")},handleScroll:function(e){var t={};t[e+"s"]=Math.min(Math.floor((this[e+"El"].scrollTop-80)/32+3),59),this.debounceAjustElTop(e),this.$emit("change",t)},ajustScrollTop:function(){this.ajustElTop("hour",this.hours),this.ajustElTop("minute",this.minutes),this.ajustElTop("second",this.seconds)},ajustElTop:function(e,t){this[e+"El"].scrollTop=Math.max(0,32*(t-2.5)+80)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-time-spinner",class:{"has-seconds":e.showSeconds}},[i("el-scrollbar",{ref:"hour",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("hours")}}},e._l(e.hoursList,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.hours,disabled:t},attrs:{"track-by":"hour"},domProps:{textContent:e._s(n)},on:{click:function(i){e.handleClick("hours",{value:n,disabled:t},!0)}}})})),i("el-scrollbar",{ref:"minute",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("minutes")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.minutes},domProps:{textContent:e._s(n)},on:{click:function(t){e.handleClick("minutes",n,!0)}}})})),i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],ref:"second",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("seconds")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.seconds},domProps:{textContent:e._s(n)},on:{click:function(t){e.handleClick("seconds",n,!0)}}})}))],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.currentVisible,expression:"currentVisible"}],staticClass:"el-time-panel",class:e.popperClass,style:{width:e.width+"px"}},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"show-seconds":e.showSeconds,hours:e.hours,minutes:e.minutes,seconds:e.seconds},on:{change:e.handleChange,"select-range":e.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:e.handleCancel}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button"},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(756),i(757),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71);t.default={props:{disabledDate:{},date:{},year:{}},computed:{startYear:function(){return 10*Math.floor(this.year/10)}},methods:{getCellStyle:function(e){var t={},i=new Date(this.date);return i.setFullYear(e),t.disabled="function"==typeof this.disabledDate&&this.disabledDate(i),t.current=Number(this.year)===e,t},nextTenYear:function(){this.$emit("pick",Number(this.year)+10,!1)},prevTenYear:function(){this.$emit("pick",Number(this.year)-10,!1)},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if((0,n.hasClass)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",i)}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(759),i(760),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(608),o=n(s),a=i(71);t.default={props:{disabledDate:{},date:{},month:{type:Number}},mixins:[o.default],methods:{getCellStyle:function(e){var t={},i=new Date(this.date);return i.setMonth(e),t.disabled="function"==typeof this.disabledDate&&this.disabledDate(i),t.current=this.month===e,t},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&!(0,a.hasClass)(t.parentNode,"disabled")){var i=t.parentNode.cellIndex,n=t.parentNode.parentNode.rowIndex,s=4*n+i;this.$emit("pick",s)}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-month-table",on:{click:e.handleMonthTableClick}},[i("tbody",[i("tr",[i("td",{class:e.getCellStyle(0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jan")))])]),i("td",{class:e.getCellStyle(1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.feb")))])]),i("td",{class:e.getCellStyle(2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.mar")))])]),i("td",{class:e.getCellStyle(3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.apr")))])])]),i("tr",[i("td",{class:e.getCellStyle(4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.may")))])]),i("td",{class:e.getCellStyle(5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jun")))])]),i("td",{class:e.getCellStyle(6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jul")))])]),i("td",{class:e.getCellStyle(7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.aug")))])])]),i("tr",[i("td",{class:e.getCellStyle(8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.sep")))])]),i("td",{class:e.getCellStyle(9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.oct")))])]),i("td",{class:e.getCellStyle(10)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.nov")))])]),i("td",{class:e.getCellStyle(11)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.dec")))])])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(762),i(763),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(71),a=i(608),r=n(a),l=["sun","mon","tue","wed","thu","fri","sat"],u=function(e){var t=new Date(e);return t.setHours(0,0,0,0),t.getTime()};t.default={mixins:[r.default],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return e>=1&&e<=7}},date:{},year:{},month:{},week:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1,row:null,column:null}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return e>3?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return l.concat(l).slice(e,e+7)},monthDate:function(){return this.date.getDate()},startDate:function(){return(0,s.getStartDateOfMonth)(this.year,this.month)},rows:function e(){var t=new Date(this.year,this.month,1),i=(0,s.getFirstDayOfMonth)(t),n=(0,s.getDayCountOfMonth)(t.getFullYear(),t.getMonth()),o=(0,s.getDayCountOfMonth)(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);i=0===i?7:i;for(var a=this.offsetDay,e=this.tableRows,r=1,l=void 0,c=this.startDate,d=this.disabledDate,h=u(new Date),f=0;f<6;f++){var p=e[f];this.showWeekNumber&&(p[0]||(p[0]={type:"week",text:(0,s.getWeekNumber)(new Date(c.getTime()+s.DAY_DURATION*(7*f+1)))}));for(var m=0;m<7;m++){var v=p[this.showWeekNumber?m+1:m];v||(v={row:f,column:m,type:"normal",inRange:!1,start:!1,end:!1}),v.type="normal";var g=7*f+m,y=c.getTime()+s.DAY_DURATION*(g-a);v.inRange=y>=u(this.minDate)&&y<=u(this.maxDate),v.start=this.minDate&&y===u(this.minDate),v.end=this.maxDate&&y===u(this.maxDate);var b=y===h;b&&(v.type="today"),f>=0&&f<=1?m+7*f>=i+a?(v.text=r++,2===r&&(l=7*f+m)):(v.text=o-(i+a-m%7)+1+7*f,v.type="prev-month"):r<=n?(v.text=r++,2===r&&(l=7*f+m)):(v.text=r++-n,v.type="next-month"),v.disabled="function"==typeof d&&d(new Date(y)),this.$set(p,this.showWeekNumber?m+1:m,v)}if("week"===this.selectionMode){var _=this.showWeekNumber?1:0,C=this.showWeekNumber?7:6,x=this.isWeekActive(p[_+1]);p[_].inRange=x,p[_].start=x,p[C].inRange=x,p[C].end=x}}return e.firstDayPosition=l,e}},watch:{"rangeState.endDate":function(e){this.markRange(e)},minDate:function(e,t){e&&!t?(this.rangeState.selecting=!0,this.markRange(e)):e?this.markRange():(this.rangeState.selecting=!1,this.markRange(e))},maxDate:function(e,t){e&&!t&&(this.rangeState.selecting=!1,this.markRange(e),this.$emit("pick",{minDate:this.minDate,maxDate:this.maxDate}))}},data:function(){return{tableRows:[[],[],[],[],[],[]]}},methods:{getCellClasses:function(e){var t=this.selectionMode,i=this.monthDate,n=[];return"normal"!==e.type&&"today"!==e.type||e.disabled?n.push(e.type):(n.push("available"),"today"===e.type&&n.push("today")),"day"!==t||"normal"!==e.type&&"today"!==e.type||Number(this.year)!==this.date.getFullYear()||this.month!==this.date.getMonth()||i!==Number(e.text)||n.push("current"),!e.inRange||"normal"!==e.type&&"today"!==e.type&&"week"!==this.selectionMode||(n.push("in-range"),e.start&&n.push("start-date"),e.end&&n.push("end-date")),e.disabled&&n.push("disabled"),n.join(" ")},getDateOfCell:function(e,t){var i=this.startDate;return new Date(i.getTime()+(7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay)*s.DAY_DURATION)},getCellByDate:function(e){var t=this.startDate,i=this.rows,n=(e-t)/s.DAY_DURATION,o=i[Math.floor(n/7)];return this.showWeekNumber?o[n%7+1]:o[n%7]},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();return"prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),(0,s.getWeekNumber)(t)===this.week},markRange:function(e){var t=this.startDate;e||(e=this.maxDate);for(var i=this.rows,n=this.minDate,o=0,a=i.length;o<a;o++)for(var r=i[o],l=0,c=r.length;l<c;l++)if(!this.showWeekNumber||0!==l){var d=r[l],h=7*o+l+(this.showWeekNumber?-1:0),f=t.getTime()+s.DAY_DURATION*(h-this.offsetDay);d.inRange=n&&f>=u(n)&&f<=u(e),d.start=n&&f===u(n.getTime()),d.end=e&&f===u(e.getTime())}},handleMouseMove:function(e){if(this.rangeState.selecting){this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:this.rangeState});var t=e.target;if("TD"===t.tagName){var i=t.cellIndex,n=t.parentNode.rowIndex-1,s=this.rangeState,o=s.row,a=s.column;o===n&&a===i||(this.rangeState.row=n,this.rangeState.column=i,this.rangeState.endDate=this.getDateOfCell(n,i))}}},handleClick:function(e){var t=e.target;if("TD"===t.tagName&&!(0,o.hasClass)(t,"disabled")&&!(0,o.hasClass)(t,"week")){var i=this.selectionMode;"week"===i&&(t=t.parentNode.cells[1]);var n=Number(this.year),a=Number(this.month),r=t.cellIndex,l=t.parentNode.rowIndex,u=this.rows[l-1][r],c=u.text,d=t.className,h=new Date(n,a,1);if(d.indexOf("prev")!==-1?(0===a?(n-=1,a=11):a-=1,h.setFullYear(n),h.setMonth(a)):d.indexOf("next")!==-1&&(11===a?(n+=1,a=0):a+=1,h.setFullYear(n),h.setMonth(a)),h.setDate(parseInt(c,10)),"range"===this.selectionMode){if(this.minDate&&this.maxDate){var f=new Date(h.getTime()),p=null;this.$emit("pick",{minDate:f,maxDate:p},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}else if(this.minDate&&!this.maxDate)if(h>=this.minDate){var m=new Date(h.getTime());this.rangeState.selecting=!1,this.$emit("pick",{minDate:this.minDate,maxDate:m})}else{var v=new Date(h.getTime());this.$emit("pick",{minDate:v,maxDate:this.maxDate},!1)}else if(!this.minDate){var g=new Date(h.getTime());this.$emit("pick",{minDate:g,maxDate:this.maxDate},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}}else if("day"===i)this.$emit("pick",h);else if("week"===i){var y=(0,s.getWeekNumber)(h),b=h.getFullYear()+"w"+y;this.$emit("pick",{year:h.getFullYear(),week:y,value:b,date:h})}}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===e.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:e.handleClick,mousemove:e.handleMouseMove}},[i("tbody",[i("tr",[e.showWeekNumber?i("th",[e._v(e._s(e.t("el.datepicker.week")))]):e._e(),e._l(e.WEEKS,function(t){return i("th",[e._v(e._s(e.t("el.datepicker.weeks."+t)))])})],2),e._l(e.rows,function(t){return i("tr",{staticClass:"el-date-table__row",class:{current:e.isWeekActive(t[1])}},e._l(t,function(t){return i("td",{class:e.getCellClasses(t),domProps:{textContent:e._s("today"===t.type?e.t("el.datepicker.today"):t.text)}})}))})],2)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass],style:{width:e.width+"px"}},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-picker__time-header"},[i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{attrs:{placeholder:e.t("el.datepicker.selectDate"),value:e.visibleDate,size:"small"},nativeOn:{change:function(t){e.visibleDate=t.target.value}}})],1),i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{ref:"input",attrs:{placeholder:e.t("el.datepicker.selectTime"),value:e.visibleTime,size:"small"},on:{focus:function(t){e.timePickerVisible=!e.timePickerVisible}},nativeOn:{change:function(t){e.visibleTime=t.target.value}}}),i("time-picker",{ref:"timepicker",attrs:{date:e.date,"picker-width":e.pickerWidth,visible:e.timePickerVisible},on:{pick:e.handleTimePick,mounted:function(t){e.$refs.timepicker.format=e.timeFormat}}})],1)]):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==e.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("span",{staticClass:"el-date-picker__header-label",on:{click:e.showYearPicker}},[e._v(e._s(e.yearLabel))]),i("span",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===e.currentView},on:{click:e.showMonthPicker}},[e._v(e._s(e.t("el.datepicker.month"+(e.month+1))))]),i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}})]),i("div",{staticClass:"el-picker-panel__content"},[i("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],attrs:{year:e.year,month:e.month,date:e.date,week:e.week,"selection-mode":e.selectionMode,"first-day-of-week":e.firstDayOfWeek,"disabled-date":e.disabledDate},on:{pick:e.handleDatePick}}),i("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===e.currentView,expression:"currentView === 'year'"}],ref:"yearTable",attrs:{year:e.year,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleYearPick}}),i("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===e.currentView,expression:"currentView === 'month'"}],attrs:{month:e.month,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleMonthPick}})],1)])],2),i("div",{directives:[{name:"show",rawName:"v-show",value:e.footerVisible&&"date"===e.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",attrs:{href:"JavaScript:"},on:{click:e.changeToNow}},[e._v(e._s(e.t("el.datepicker.now")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button"},on:{click:e.confirm}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(766),i(767),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o),r=i(749),l=n(r),u=i(761),c=n(u),d=i(609),h=n(d);t.default={mixins:[a.default],computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting)},leftLabel:function(){return this.date.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.date.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.date.getFullYear()},leftMonth:function(){return this.date.getMonth()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},minVisibleDate:function(){return this.minDate?(0,s.formatDate)(this.minDate):""},maxVisibleDate:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate):""},minVisibleTime:function(){return this.minDate?(0,s.formatDate)(this.minDate,"HH:mm:ss"):""},maxVisibleTime:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate,"HH:mm:ss"):""},rightDate:function(){var e=new Date(this.date),t=e.getMonth();return e.setDate(1),11===t?(e.setFullYear(e.getFullYear()+1),e.setMonth(0)):e.setMonth(t+1),e}},data:function(){return{popperClass:"",minPickerWidth:0,maxPickerWidth:0,date:new Date,minDate:"",maxDate:"",rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",value:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,width:0}},watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var i=t.$refs.minInput.$el,n=t.$refs.maxInput.$el;i&&(t.minPickerWidth=i.getBoundingClientRect().width+10),n&&(t.maxPickerWidth=n.getBoundingClientRect().width+10)})},minDate:function(){var e=this;this.$nextTick(function(){if(e.maxDate&&e.maxDate<e.minDate){var t="HH:mm:ss";e.$refs.maxTimePicker.selectableRange=[[(0,s.parseDate)((0,s.formatDate)(e.minDate,t),t),(0,s.parseDate)("23:59:59",t)]]}})},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.minTimePicker.ajustScrollTop()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.maxTimePicker.ajustScrollTop()})},value:function(e){e?Array.isArray(e)&&(this.minDate=e[0]?(0,s.toDate)(e[0]):null,this.maxDate=e[1]?(0,s.toDate)(e[1]):null,this.minDate&&(this.date=new Date(this.minDate)),this.handleConfirm(!0)):(this.minDate=null,this.maxDate=null)}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.handleConfirm(!1)},handleDateInput:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"yyyy-MM-dd");if(n){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(n)))return;var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setFullYear(n.getFullYear()),o.setMonth(n.getMonth(),n.getDate()))}},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateChange:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"yyyy-MM-dd");if(n){var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setFullYear(n.getFullYear()),o.setMonth(n.getMonth(),n.getDate())),"min"===t?o<this.maxDate&&(this.minDate=new Date(o.getTime())):o>this.minDate&&(this.maxDate=new Date(o.getTime()),this.minDate&&this.minDate>this.maxDate&&(this.minDate=null))}},handleTimeChange:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"HH:mm:ss");if(n){var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setHours(n.getHours()),o.setMinutes(n.getMinutes()),o.setSeconds(n.getSeconds())),"min"===t?o<this.maxDate&&(this.minDate=new Date(o.getTime())):o>this.minDate&&(this.maxDate=new Date(o.getTime())),this.$refs[t+"TimePicker"].value=o,this[t+"TimePickerVisible"]=!1}},handleRangePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.maxDate===e.maxDate&&this.minDate===e.minDate||(this.onPick&&this.onPick(e),this.maxDate=e.maxDate,this.minDate=e.minDate,t&&!this.showTime&&this.handleConfirm())},changeToToday:function(){this.date=new Date},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},resetView:function(){this.minTimePickerVisible=!1,this.maxTimePickerVisible=!1},setTime:function(e,t){var i=new Date(e.getTime()),n=t.getHours(),s=t.getMinutes(),o=t.getSeconds();return i.setHours(n),i.setMinutes(s),i.setSeconds(o),new Date(i.getTime())},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=this.setTime(this.minDate,e)),i||(this.minTimePickerVisible=t)},handleMaxTimePick:function(e,t,i){if(!this.maxDate){var n=new Date;n>=this.minDate&&(this.maxDate=new Date)}this.maxDate&&e&&(this.maxDate=this.setTime(this.maxDate,e)),i||(this.maxTimePickerVisible=t)},prevMonth:function(){this.date=(0,s.prevMonth)(this.date)},nextMonth:function(){this.date=(0,s.nextMonth)(this.date)},nextYear:function(){var e=this.date;e.setFullYear(e.getFullYear()+1),this.resetDate()},prevYear:function(){var e=this.date;e.setFullYear(e.getFullYear()-1),this.resetDate()},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.$emit("pick",[this.minDate,this.maxDate],e)},resetDate:function(){this.date=new Date(this.date)}},components:{TimePicker:l.default,DateTable:c.default,ElInput:h.default}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass],style:{width:e.width+"px"}},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-range-picker__time-header"},[i("span",{staticClass:"el-date-range-picker__editors-wrap"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startDate"),value:e.minVisibleDate},nativeOn:{input:function(t){e.handleDateInput(t,"min")},change:function(t){e.handleDateChange(t,"min")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startTime"),value:e.minVisibleTime},on:{focus:function(t){e.minTimePickerVisible=!e.minTimePickerVisible}},nativeOn:{change:function(t){e.handleTimeChange(t,"min")}}}),i("time-picker",{ref:"minTimePicker",attrs:{"picker-width":e.minPickerWidth,date:e.minDate,visible:e.minTimePickerVisible},on:{pick:e.handleMinTimePick}})],1)]),i("span",{staticClass:"el-icon-arrow-right"}),i("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endDate"),value:e.maxVisibleDate,readonly:!e.minDate},nativeOn:{input:function(t){e.handleDateInput(t,"max")},change:function(t){e.handleDateChange(t,"max")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"maxInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endTime"),value:e.maxVisibleTime,readonly:!e.minDate},on:{focus:function(t){e.minDate&&(e.maxTimePickerVisible=!e.maxTimePickerVisible)}},nativeOn:{change:function(t){e.handleTimeChange(t,"max")}}}),i("time-picker",{ref:"maxTimePicker",attrs:{"picker-width":e.maxPickerWidth,date:e.maxDate,visible:e.maxTimePickerVisible},on:{pick:e.handleMaxTimePick}})],1)])]):e._e(),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("div",[e._v(e._s(e.leftLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.date,year:e.leftYear,month:e.leftMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}}),i("div",[e._v(e._s(e.rightLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.rightDate,year:e.rightYear,month:e.rightMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1)])],2),e.showTime?i("div",{staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",on:{click:e.handleClear}},[e._v(e._s(e.t("el.datepicker.clear")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])]):e._e()])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(769),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(743),o=n(s),a=i(770),r=n(a);t.default={mixins:[o.default],name:"ElTimeSelect",beforeCreate:function(){this.type="time-select",this.panel=r.default}}},function(e,t,i){var n=i(13)(i(771),i(772),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(630),o=n(s),a=function(e){var t=e.split(":");if(t.length>=2){var i=parseInt(t[0],10),n=parseInt(t[1],10);return{hours:i,minutes:n}}return null},r=function(e,t){var i=a(e),n=a(t),s=i.minutes+60*i.hours,o=n.minutes+60*n.hours;return s===o?0:s>o?1:-1},l=function(e){return(e.hours<10?"0"+e.hours:e.hours)+":"+(e.minutes<10?"0"+e.minutes:e.minutes)},u=function(e,t){var i=a(e),n=a(t),s={hours:i.hours,minutes:i.minutes};return s.minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,l(s)};t.default={components:{ElScrollbar:o.default},watch:{value:function(e){e&&(this.minTime&&r(e,this.minTime)<0?this.$emit("pick"):this.maxTime&&r(e,this.maxTime)>0&&this.$emit("pick"))}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick")}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e=this.start,t=this.end,i=this.step,n=[];if(e&&t&&i)for(var s=e;r(s,t)<=0;)n.push({value:s,disabled:r(s,this.minTime||"-1:-1")<=0||r(s,this.maxTime||"100:100")>=0}),s=u(s,i);return n}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel time-select",class:e.popperClass,style:{width:e.width+"px"}},[i("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},e._l(e.items,function(t){return i("div",{staticClass:"time-select-item",class:{selected:e.value===t.value,disabled:t.disabled},attrs:{disabled:t.disabled},on:{click:function(i){e.handleClick(t)}}},[e._v(e._s(t.value))])}))],1)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(774),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(743),o=n(s),a=i(749),r=n(a),l=i(775),u=n(l);t.default={mixins:[o.default],name:"ElTimePicker",props:{isRange:Boolean},data:function(){return{type:""}},watch:{isRange:function(e){this.picker?(this.unmountPicker(),this.type=e?"timerange":"time",this.panel=e?u.default:r.default,this.mountPicker()):(this.type=e?"timerange":"time",
+this.panel=e?u.default:r.default)}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?u.default:r.default}}},function(e,t,i){var n=i(13)(i(776),i(777),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=i(608),a=n(o),r=i(751),l=n(r),u=(0,s.parseDate)("00:00:00","HH:mm:ss"),c=(0,s.parseDate)("23:59:59","HH:mm:ss"),d=function(e,t){var i=3600*e.getHours()+60*e.getMinutes()+e.getSeconds(),n=3600*t.getHours()+60*t.getMinutes()+t.getSeconds();return i>n},h=function e(t){t=Array.isArray(t)?t:[t];var i=t[0]||new Date,n=new Date;n.setHours(n.getHours()+1);var s=t[1]||n;return i>s?e():{minTime:i,maxTime:s}};t.default={mixins:[a.default],components:{TimeSpinner:l.default},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1}},props:["value"],data:function(){var e=h(this.$options.defaultValue);return{popperClass:"",minTime:e.minTime,maxTime:e.maxTime,btnDisabled:d(e.minTime,e.maxTime),maxHours:e.maxTime.getHours(),maxMinutes:e.maxTime.getMinutes(),maxSeconds:e.maxTime.getSeconds(),minHours:e.minTime.getHours(),minMinutes:e.minTime.getMinutes(),minSeconds:e.minTime.getSeconds(),format:"HH:mm:ss",visible:!1,width:0}},watch:{value:function(e){var t=this;this.panelCreated(),this.$nextTick(function(e){return t.ajustScrollTop()})}},methods:{panelCreated:function(){var e=h(this.value);e.minTime===this.minTime&&e.maxTime===this.maxTime||(this.handleMinChange({hours:e.minTime.getHours(),minutes:e.minTime.getMinutes(),seconds:e.minTime.getSeconds()}),this.handleMaxChange({hours:e.maxTime.getHours(),minutes:e.maxTime.getMinutes(),seconds:e.maxTime.getSeconds()}))},handleClear:function(){this.handleCancel()},handleCancel:function(){this.$emit("pick")},handleChange:function(){this.minTime>this.maxTime||(u.setFullYear(this.minTime.getFullYear()),u.setMonth(this.minTime.getMonth(),this.minTime.getDate()),c.setFullYear(this.maxTime.getFullYear()),c.setMonth(this.maxTime.getMonth(),this.maxTime.getDate()),this.$refs.minSpinner.selectableRange=[[u,this.maxTime]],this.$refs.maxSpinner.selectableRange=[[this.minTime,c]],this.handleConfirm(!0))},handleMaxChange:function(e){void 0!==e.hours&&(this.maxTime.setHours(e.hours),this.maxHours=this.maxTime.getHours()),void 0!==e.minutes&&(this.maxTime.setMinutes(e.minutes),this.maxMinutes=this.maxTime.getMinutes()),void 0!==e.seconds&&(this.maxTime.setSeconds(e.seconds),this.maxSeconds=this.maxTime.getSeconds()),this.handleChange()},handleMinChange:function(e){void 0!==e.hours&&(this.minTime.setHours(e.hours),this.minHours=this.minTime.getHours()),void 0!==e.minutes&&(this.minTime.setMinutes(e.minutes),this.minMinutes=this.minTime.getMinutes()),void 0!==e.seconds&&(this.minTime.setSeconds(e.seconds),this.minSeconds=this.minTime.getSeconds()),this.handleChange()},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t)},setMaxSelectionRange:function(e,t){this.$emit("select-range",e+11,t+11)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.$refs.minSpinner.selectableRange,n=this.$refs.maxSpinner.selectableRange;this.minTime=(0,s.limitRange)(this.minTime,i),this.maxTime=(0,s.limitRange)(this.maxTime,n),t||this.$emit("pick",[this.minTime,this.maxTime],e,t)},ajustScrollTop:function(){this.$refs.minSpinner.ajustScrollTop(),this.$refs.maxSpinner.ajustScrollTop()}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.panelCreated,"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel",class:e.popperClass,style:{width:e.width+"px"}},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[e._v(e._s(e.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":e.showSeconds,hours:e.minHours,minutes:e.minMinutes,seconds:e.minSeconds},on:{change:e.handleMinChange,"select-range":e.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[e._v(e._s(e.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":e.showSeconds,hours:e.maxHours,minutes:e.maxMinutes,seconds:e.maxSeconds},on:{change:e.handleMaxChange,"select-range":e.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(t){e.handleCancel()}}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(779),o=n(s),a=i(782),r=n(a),l=i(2),u=n(l);u.default.directive("popover",r.default),o.default.install=function(e){e.directive("popover",r.default),e.component(o.default.name,o.default)},o.default.directive=r.default,t.default=o.default},function(e,t,i){var n=i(13)(i(780),i(781),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(617),o=n(s),a=i(71);t.default={name:"ElPopover",mixins:[o.default],props:{trigger:{type:String,default:"click",validator:function(e){return["click","focus","hover","manual"].indexOf(e)>-1}},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},transition:{type:String,default:"fade-in-linear"}},watch:{showPopper:function(e,t){e?this.$emit("show"):this.$emit("hide")}},mounted:function(){var e=this.reference||this.$refs.reference,t=this.popper||this.$refs.popper;if(!e&&this.$slots.reference&&this.$slots.reference[0]&&(e=this.referenceElm=this.$slots.reference[0].elm),"click"===this.trigger)(0,a.on)(e,"click",this.doToggle),(0,a.on)(document,"click",this.handleDocumentClick);else if("hover"===this.trigger)(0,a.on)(e,"mouseenter",this.handleMouseEnter),(0,a.on)(t,"mouseenter",this.handleMouseEnter),(0,a.on)(e,"mouseleave",this.handleMouseLeave),(0,a.on)(t,"mouseleave",this.handleMouseLeave);else if("focus"===this.trigger){var i=!1;if([].slice.call(e.children).length)for(var n=e.childNodes,s=n.length,o=0;o<s;o++)if("INPUT"===n[o].nodeName||"TEXTAREA"===n[o].nodeName){(0,a.on)(n[o],"focus",this.doShow),(0,a.on)(n[o],"blur",this.doClose),i=!0;break}if(i)return;"INPUT"===e.nodeName||"TEXTAREA"===e.nodeName?((0,a.on)(e,"focus",this.doShow),(0,a.on)(e,"blur",this.doClose)):((0,a.on)(e,"mousedown",this.doShow),(0,a.on)(e,"mouseup",this.doClose))}},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleMouseEnter:function(){this.showPopper=!0,clearTimeout(this._timer)},handleMouseLeave:function(){var e=this;this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)}},destroyed:function(){var e=this.reference;(0,a.off)(e,"click",this.doToggle),(0,a.off)(e,"mouseup",this.doClose),(0,a.off)(e,"mousedown",this.doShow),(0,a.off)(e,"focus",this.doShow),(0,a.off)(e,"blur",this.doClose),(0,a.off)(e,"mouseleave",this.handleMouseLeave),(0,a.off)(e,"mouseenter",this.handleMouseEnter),(0,a.off)(document,"click",this.handleDocumentClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover",class:[e.popperClass],style:{width:e.width+"px"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},staticRenderFns:[]}},function(e,t){"use strict";t.__esModule=!0,t.default={bind:function(e,t,i){i.context.$refs[t.arg].$refs.reference=e}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(784),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.MessageBox=void 0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=i(2),a=n(o),r=i(785),l=n(r),u=i(613),c=n(u),d={title:void 0,message:"",type:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null},h=a.default.extend(l.default),f=void 0,p=void 0,m=[],v=function(e){if(f){var t=f.callback;if("function"==typeof t&&(p.showInput?t(p.inputValue,e):t(e)),f.resolve){var i=f.options.$type;"confirm"===i||"prompt"===i?"confirm"===e?p.showInput?f.resolve({value:p.inputValue,action:e}):f.resolve(e):"cancel"===e&&f.reject&&f.reject(e):f.resolve(e)}}},g=function(){p=new h({el:document.createElement("div")}),p.callback=v},y=function e(){p||g(),p.action="",p.value&&!p.closeTimer||m.length>0&&!function(){f=m.shift();var t=f.options;for(var i in t)t.hasOwnProperty(i)&&(p[i]=t[i]);void 0===t.callback&&(p.callback=v);var n=p.callback;p.callback=function(t,i){n(t,i),e()},["modal","showClose","closeOnClickModal","closeOnPressEscape"].forEach(function(e){void 0===p[e]&&(p[e]=!0)}),document.body.appendChild(p.$el),a.default.nextTick(function(){p.value=!0})}()},b=function e(t,i){if(!a.default.prototype.$isServer)return"string"==typeof t?(t={message:t},arguments[1]&&(t.title=arguments[1]),arguments[2]&&(t.type=arguments[2])):t.callback&&!i&&(i=t.callback),"undefined"!=typeof Promise?new Promise(function(n,s){m.push({options:(0,c.default)({},d,e.defaults,t),callback:i,resolve:n,reject:s}),y()}):(m.push({options:(0,c.default)({},d,e.defaults,t),callback:i}),void y())};b.setDefaults=function(e){b.defaults=e},b.alert=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},b.confirm=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},b.prompt=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},b.close=function(){p.value=!1,m=[],f=null},t.default=b,t.MessageBox=b},function(e,t,i){var n=i(13)(i(786),i(787),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(618),o=n(s),a=i(608),r=n(a),l=i(609),u=n(l),c=i(653),d=n(c),h=i(71),f=i(15),p={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={mixins:[o.default,r.default],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0}},components:{ElInput:u.default,ElButton:d.default},computed:{typeClass:function(){return this.type&&p[this.type]?"el-icon-"+p[this.type]:""},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.value&&(this.value=!1,this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose(),this.action&&this.callback(this.action,this))},handleWrapperClick:function(){this.closeOnClickModal&&(this.action="",this.doClose())},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(i===!1)return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,!1}}return this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!0}},watch:{inputValue:{immediate:!0,handler:function(e){var t=this;this.$nextTick(function(i){"prompt"===t.$type&&null!==e&&t.validate()})}},value:function(e){var t=this;e&&this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.$refs.input.$el.querySelector("input").focus()},500):(this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid")))}},data:function(){return{uid:1,title:void 0,message:"",type:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.value,expression:"value"}],staticClass:"el-message-box__wrapper",on:{click:function(t){return t.target!==t.currentTarget?null:void e.handleWrapperClick(t)}}},[i("div",{staticClass:"el-message-box",class:e.customClass},[void 0!==e.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[e._v(e._s(e.title||e.t("el.messagebox.title")))]),e.showClose?i("i",{staticClass:"el-message-box__close el-icon-close",on:{click:function(t){e.handleAction("cancel")}}}):e._e()]):e._e(),""!==e.message?i("div",{staticClass:"el-message-box__content"},[i("div",{staticClass:"el-message-box__status",class:[e.typeClass]}),i("div",{staticClass:"el-message-box__message",style:{"margin-left":e.typeClass?"50px":"0"}},[i("p",[e._v(e._s(e.message))])]),i("div",{directives:[{name:"show",rawName:"v-show",value:e.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{ref:"input",attrs:{placeholder:e.inputPlaceholder},nativeOn:{keyup:function(t){return"button"in t||!e._k(t.keyCode,"enter",13)?void e.handleAction("confirm"):null}},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:e.editorErrorMessage?"visible":"hidden"}},[e._v(e._s(e.editorErrorMessage))])],1)]):e._e(),i("div",{staticClass:"el-message-box__btns"},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showCancelButton,expression:"showCancelButton"}],class:[e.cancelButtonClasses],attrs:{loading:e.cancelButtonLoading},nativeOn:{click:function(t){e.handleAction("cancel")}}},[e._v("\n          "+e._s(e.cancelButtonText||e.t("el.messagebox.cancel"))+"\n        ")]),i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[e.confirmButtonClasses],attrs:{loading:e.confirmButtonLoading},nativeOn:{click:function(t){e.handleAction("confirm")}}},[e._v("\n          "+e._s(e.confirmButtonText||e.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(789),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(790),i(791),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-breadcrumb"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(793),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(794),i(795),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:""}},mounted:function(){var e=this;this.separator=this.$parent.separator;var t=this;if(this.to){var i=this.$refs.link;i.addEventListener("click",function(i){var n=e.to;t.replace?t.$router.replace(n):t.$router.push(n)})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-breadcrumb__item"},[i("span",{ref:"link",staticClass:"el-breadcrumb__item__inner"},[e._t("default")],2),i("span",{staticClass:"el-breadcrumb__separator"},[e._v(e._s(e.separator))])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(797),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(798),i(799),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElForm",componentName:"ElForm",props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,showMessage:{type:Boolean,default:!0}},watch:{rules:function(){this.validate()}},data:function(){return{fields:[]}},created:function(){var e=this;this.$on("el.form.addField",function(t){t&&e.fields.push(t)}),this.$on("el.form.removeField",function(t){t.prop&&e.fields.splice(e.fields.indexOf(t),1)})},methods:{resetFields:function(){this.fields.forEach(function(e){e.resetField()})},validate:function(e){var t=this,i=!0,n=0;0===this.fields.length&&e&&e(!0),this.fields.forEach(function(s,o){s.validate("",function(s){s&&(i=!1),"function"==typeof e&&++n===t.fields.length&&e(i)})})},validateField:function(e,t){var i=this.fields.filter(function(t){return t.prop===e})[0];if(!i)throw new Error("must call validateField with valid prop string!");i.validate("",t)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("form",{staticClass:"el-form",class:[e.labelPosition?"el-form--label-"+e.labelPosition:"",{"el-form--inline":e.inline}]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(801),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(802),i(828),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}function o(e,t){var i=e;t=t.replace(/\[(\w+)\]/g,".$1"),t=t.replace(/^\./,"");for(var n=t.split("."),s=0,o=n.length;s<o-1;++s){var a=n[s];if(!(a in i))throw new Error("please transfer a valid prop path to form item!");i=i[a]}return{o:i,k:n[s],v:i[n[s]]}}t.__esModule=!0;var a=i(803),r=n(a),l=i(607),u=n(l);t.default={name:"ElFormItem",componentName:"ElFormItem",mixins:[u.default],props:{label:String,labelWidth:String,prop:String,required:Boolean,rules:[Object,Array],error:String,validateStatus:String,showMessage:{type:Boolean,default:!0}},watch:{error:function(e){this.validateMessage=e,this.validateState=e?"error":""},validateStatus:function(e){this.validateState=e}},computed:{labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={};if("top"===this.form.labelPosition||this.form.inline)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.marginLeft=t),e},form:function(){for(var e=this.$parent;"ElForm"!==e.$options.componentName;)e=e.$parent;return e},fieldValue:{cache:!1,get:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return t.indexOf(":")!==-1&&(t=t.replace(/:/,".")),o(e,t).v}}}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isRequired:!1}},methods:{validate:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:s,n=this.getFilteredRule(e);if(!n||0===n.length)return i(),!0;this.validateState="validating";var o={};o[this.prop]=n;var a=new r.default(o),l={};l[this.prop]=this.fieldValue,a.validate(l,{firstFields:!0},function(e,n){t.validateState=e?"error":"success",t.validateMessage=e?e[0].message:"",i(t.validateMessage)})},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;i.indexOf(":")!==-1&&(i=i.replace(/:/,"."));var n=o(e,i);Array.isArray(t)?(this.validateDisabled=!0,n.o[n.k]=[].concat(this.initialValue)):(this.validateDisabled=!0,n.o[n.k]=this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules;return e=e?e[this.prop]:[],[].concat(t||e||[])},getFilteredRule:function(e){var t=this.getRules();return t.filter(function(t){return!t.trigger||t.trigger.indexOf(e)!==-1})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){return this.validateDisabled?void(this.validateDisabled=!1):void this.validate("change")}},mounted:function(){var e=this;if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var t=this.fieldValue;Array.isArray(t)&&(t=[].concat(t)),Object.defineProperty(this,"initialValue",{value:t});var i=this.getRules();i.length&&(i.every(function(t){if(t.required)return e.isRequired=!0,!1}),this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){this.rules=null,this._messages=c.messages,this.define(e)}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(804),l=i(805),u=n(l),c=i(827),d=i(807);s.prototype={messages:function(e){return e&&(this._messages=(0,r.deepMerge)((0,c.newMessages)(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==("undefined"==typeof e?"undefined":a(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(e){function t(e){function t(e){Array.isArray(e)?s=s.concat.apply(s,e):s.push(e)}var i=void 0,n=void 0,s=[],o={};for(i=0;i<e.length;i++)t(e[i]);if(s.length)for(i=0;i<s.length;i++)n=s[i].field,o[n]=o[n]||[],o[n].push(s[i]);else s=null,o=null;f(s,o)}var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},l=arguments[2],u=e,h=n,f=l;if("function"==typeof h&&(f=h,h={}),!this.rules||0===Object.keys(this.rules).length)return void(f&&f());if(h.messages){var p=this.messages();p===c.messages&&(p=(0,c.newMessages)()),(0,r.deepMerge)(p,h.messages),h.messages=p}else h.messages=this.messages();h.error=d.error;var m=void 0,v=void 0,g={},y=h.keys||Object.keys(this.rules);y.forEach(function(t){m=i.rules[t],v=u[t],m.forEach(function(n){var s=n;"function"==typeof s.transform&&(u===e&&(u=o({},u)),v=u[t]=s.transform(v)),s="function"==typeof s?{validator:s}:o({},s),s.validator=i.getValidationMethod(s),s.field=t,s.fullField=s.fullField||t,s.type=i.getType(s),s.validator&&(g[t]=g[t]||[],g[t].push({rule:s,value:v,source:u,field:t}))})});var b={};(0,r.asyncMap)(g,h,function(e,t){function i(e,t){return o({},t,{fullField:l.fullField+"."+e})}function n(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],a=n;if(Array.isArray(a)||(a=[a]),a.length&&(0,r.warning)("async-validator:",a),a.length&&l.message&&(a=[].concat(l.message)),a=a.map((0,r.complementError)(l)),(h.first||h.fieldFirst)&&a.length)return b[l.field]=1,t(a);if(u){if(l.required&&!e.value)return a=l.message?[].concat(l.message).map((0,r.complementError)(l)):[h.error(l,(0,r.format)(h.messages.required,l.field))],t(a);var c={};if(l.defaultField)for(var d in e.value)e.value.hasOwnProperty(d)&&(c[d]=l.defaultField);c=o({},c,e.rule.fields);for(var f in c)if(c.hasOwnProperty(f)){var p=Array.isArray(c[f])?c[f]:[c[f]];c[f]=p.map(i.bind(null,f))}var m=new s(c);m.messages(h.messages),e.rule.options&&(e.rule.options.messages=h.messages,e.rule.options.error=h.error),m.validate(e.value,e.rule.options||h,function(e){t(e&&e.length?a.concat(e):e)})}else t(a)}var l=e.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==a(l.fields)&&"object"!==a(l.defaultField));u=u&&(l.required||!l.required&&e.value),l.field=e.field,l.validator(l,e.value,n,e.source,h)},function(e){t(e)})},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!u.default.hasOwnProperty(e.type))throw new Error((0,r.format)("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return i!==-1&&t.splice(i,1),1===t.length&&"required"===t[0]?u.default.required:u.default[this.getType(e)]||!1}},s.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");u.default[e]=t},s.messages=c.messages,t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,s=t[0],o=t.length;if("function"==typeof s)return s.apply(null,t.slice(1));if("string"==typeof s){for(var a=String(s).replace(m,function(e){if("%%"===e)return"%";if(n>=o)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),r=t[n];n<o;r=t[++n])a+=" "+r;return a}return s}function s(e){return"string"===e||"url"===e||"hex"===e||"email"===e||"pattern"===e}function o(e,t){return void 0===e||null===e||(!("array"!==t||!Array.isArray(e)||e.length)||!(!s(t)||"string"!=typeof e||e))}function a(e){return 0===Object.keys(e).length}function r(e,t,i){function n(e){s.push.apply(s,e),o++,o===a&&i(s)}var s=[],o=0,a=e.length;e.forEach(function(e){t(e,n)})}function l(e,t,i){function n(a){if(a&&a.length)return void i(a);var r=s;s+=1,r<o?t(e[r],n):i([])}var s=0,o=e.length;n([])}function u(e){var t=[];return Object.keys(e).forEach(function(i){t.push.apply(t,e[i])}),t}function c(e,t,i,n){if(t.first){var s=u(e);return l(s,i,n)}var o=t.firstFields||[];o===!0&&(o=Object.keys(e));var a=Object.keys(e),c=a.length,d=0,h=[],f=function(e){h.push.apply(h,e),d++,d===c&&n(h)};a.forEach(function(t){var n=e[t];o.indexOf(t)!==-1?l(n,i,f):r(n,i,f)})}function d(e){return function(t){return t&&t.message?(t.field=t.field||e.fullField,t):{message:t,field:t.field||e.fullField}}}function h(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===("undefined"==typeof n?"undefined":p(n))&&"object"===p(e[i])?e[i]=f({},e[i],n):e[i]=n}return e}Object.defineProperty(t,"__esModule",{value:!0});var f=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},p="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.format=n,t.isEmptyValue=o,t.isEmptyObject=a,t.asyncMap=c,t.complementError=d,t.deepMerge=h;var m=/%[sdj%]/g;t.warning=function(){}},function(e,t,i){"use strict";e.exports={string:i(806),method:i(814),number:i(815),boolean:i(816),regexp:i(817),integer:i(818),float:i(819),array:i(820),object:i(821),enum:i(822),pattern:i(823),email:i(824),url:i(824),date:i(825),hex:i(824),required:i(826)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s,"string"),(0,r.isEmptyValue)(t,"string")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s),a.default.pattern(e,t,n,o,s),e.whitespace===!0&&a.default.whitespace(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={required:i(808),whitespace:i(809),type:i(810),range:i(811),enum:i(812),pattern:i(813)},e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s,o){!e.required||i.hasOwnProperty(e.field)&&!a.isEmptyValue(t,o||e.type)||n.push(a.format(s.messages.required,e.fullField))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){(/^\s+$/.test(t)||""===t)&&n.push(a.format(s.messages.whitespace,e.fullField))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,
+e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function o(e,t,i,n,s){if(e.required&&void 0===t)return void(0,c.default)(e,t,i,n,s);var o=["integer","float","array","regexp","object","method","email","number","date","url","hex"],r=e.type;o.indexOf(r)>-1?h[r](t)||n.push(l.format(s.messages.types[r],e.fullField,e.type)):r&&("undefined"==typeof t?"undefined":a(t))!==e.type&&n.push(l.format(s.messages.types[r],e.fullField,e.type))}Object.defineProperty(t,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(804),l=s(r),u=i(808),c=n(u),d={email:/^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},h={integer:function(e){return h.number(e)&&parseInt(e,10)===e},float:function(e){return h.number(e)&&!h.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===("undefined"==typeof e?"undefined":a(e))&&!h.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(d.email)},url:function(e){return"string"==typeof e&&!!e.match(d.url)},hex:function(e){return"string"==typeof e&&!!e.match(d.hex)}};t.default=o,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){var o="number"==typeof e.len,r="number"==typeof e.min,l="number"==typeof e.max,u=t,c=null,d="number"==typeof t,h="string"==typeof t,f=Array.isArray(t);return d?c="number":h?c="string":f&&(c="array"),!!c&&((h||f)&&(u=t.length),void(o?u!==e.len&&n.push(a.format(s.messages[c].len,e.fullField,e.len)):r&&!l&&u<e.min?n.push(a.format(s.messages[c].min,e.fullField,e.min)):l&&!r&&u>e.max?n.push(a.format(s.messages[c].max,e.fullField,e.max)):r&&l&&(u<e.min||u>e.max)&&n.push(a.format(s.messages[c].range,e.fullField,e.min,e.max))))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e[r]=Array.isArray(e[r])?e[r]:[],e[r].indexOf(t)===-1&&n.push(a.format(s.messages[r],e.fullField,e[r].join(", ")))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o),r="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e.pattern instanceof RegExp&&(e.pattern.test(t)||n.push(a.format(s.messages.pattern.mismatch,e.fullField,t,e.pattern)))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var a=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,o.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,a,s),void 0!==t&&r.default.type(e,t,n,a,s)}i(a)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(804),a=i(807),r=n(a);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"array")&&!e.required)return i();a.default.required(e,t,n,o,s,"array"),(0,r.isEmptyValue)(t,"array")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),t&&a.default[l](e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804),l="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t,"string")||a.default.pattern(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=e.type,l=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,r.isEmptyValue)(t,o)&&!e.required)return i();a.default.required(e,t,n,l,s,o),(0,r.isEmptyValue)(t,o)||a.default.type(e,t,n,l,s)}i(l)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||(a.default.type(e,t,n,o,s),t&&a.default.range(e,t.getTime(),n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(807),a=n(o),r=i(804);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var a=[],l=Array.isArray(t)?"array":"undefined"==typeof t?"undefined":o(t);r.default.required(e,t,n,a,s,l),i(a)}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(807),r=n(a);t.default=s,e.exports=t.default},function(e,t){"use strict";function i(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}Object.defineProperty(t,"__esModule",{value:!0}),t.newMessages=i;t.messages=i()},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:{"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-required":e.isRequired||e.required}},[e.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.prop}},[e._v("\n    "+e._s(e.label+e.form.labelSuffix)+"\n  ")]):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?i("div",{staticClass:"el-form-item__error"},[e._v(e._s(e.validateMessage))]):e._e()])],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(830),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(831),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(832),o=n(s);t.default={name:"ElTabs",components:{TabNav:o.default},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})}},methods:{handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){this.currentName=e,this.$emit("input",e)},addPanes:function(e){var t=this.$slots.default.indexOf(e.$vnode);this.panes.splice(t,0,e)},removePanes:function(e){var t=this.panes,i=t.indexOf(e);i>-1&&t.splice(i,1)}},render:function(e){var t=this.type,i=this.handleTabClick,n=this.handleTabRemove,s=this.handleTabAdd,o=this.currentName,a=this.panes,r=this.editable,l=this.addable,u=r||l?e("span",{class:"el-tabs__new-tab",on:{click:s}},[e("i",{class:"el-icon-plus"},[])]):null,c={props:{currentName:o,onTabClick:i,onTabRemove:n,editable:r,type:t,panes:a},ref:"nav"};return e("div",{class:{"el-tabs":!0,"el-tabs--card":"card"===t,"el-tabs--border-card":"border-card"===t}},[e("div",{class:"el-tabs__header"},[u,e("tab-nav",c,[])]),e("div",{class:"el-tabs__content"},[this.$slots.default])])},created:function(){this.currentName||this.setCurrentName("0")}}},function(e,t,i){var n=i(13)(i(833),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(834),a=n(o),r=i(632);t.default={name:"TabNav",components:{TabBar:a.default},props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:s},onTabRemove:{type:Function,default:s},type:String},data:function(){return{scrollable:!1,navStyle:{transform:""}}},methods:{scrollPrev:function(){var e=this.$refs.navScroll.offsetWidth,t=this.getCurrentScrollOffset();if(t){var i=t>e?t-e:0;this.setOffset(i)}},scrollNext:function(){var e=this.$refs.nav.offsetWidth,t=this.$refs.navScroll.offsetWidth,i=this.getCurrentScrollOffset();if(!(e-i<=t)){var n=e-i>2*t?i+t:e-t;this.setOffset(n)}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active"),i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),o=e.getBoundingClientRect(),a=this.getCurrentScrollOffset(),r=a;n.left<s.left&&(r=a-(s.left-n.left)),n.right>s.right&&(r=a+n.right-s.right),o.right<s.right&&(r=e.offsetWidth-s.width),this.setOffset(Math.max(r,0))}},getCurrentScrollOffset:function(){var e=this.navStyle;return e.transform?Number(e.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]):0},setOffset:function(e){this.navStyle.transform="translateX(-"+e+"px)"},update:function(){var e=this.$refs.nav.offsetWidth,t=this.$refs.navScroll.offsetWidth,i=this.getCurrentScrollOffset();if(t<e){var n=this.getCurrentScrollOffset();this.scrollable=this.scrollable||{},this.scrollable.prev=n,this.scrollable.next=n+t<e,e-n<t&&this.setOffset(e-t)}else this.scrollable=!1,i>0&&this.setOffset(0)}},updated:function(){this.update()},render:function(e){var t=this.type,i=this.panes,n=this.editable,s=this.onTabClick,o=this.onTabRemove,a=this.navStyle,r=this.scrollable,l=this.scrollNext,u=this.scrollPrev,c=r?[e("span",{class:["el-tabs__nav-prev",r.prev?"":"is-disabled"],on:{click:u}},[e("i",{class:"el-icon-arrow-left"},[])]),e("span",{class:["el-tabs__nav-next",r.next?"":"is-disabled"],on:{click:l}},[e("i",{class:"el-icon-arrow-right"},[])])]:null,d=this._l(i,function(t,i){var a=t.name||t.index||i,r=t.isClosable||n;t.index=""+i;var l=r?e("span",{class:"el-icon-close",on:{click:function(e){o(t,e)}}},[]):null,u=t.$slots.label||t.label;return e("div",{class:{"el-tabs__item":!0,"is-active":t.active,"is-disabled":t.disabled,"is-closable":r},ref:"tabs",refInFor:!0,on:{click:function(e){s(t,a,e)}}},[u,l])});return e("div",{class:["el-tabs__nav-wrap",r?"is-scrollable":""]},[c,e("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[e("div",{class:"el-tabs__nav",ref:"nav",style:a},[t?null:e("tab-bar",{attrs:{tabs:i}},[]),d])])])},mounted:function(){(0,r.addResizeListener)(this.$el,this.update)},beforeDestroy:function(){this.$el&&this.update&&(0,r.removeResizeListener)(this.$el,this.update)}}},function(e,t,i){var n=i(13)(i(835),i(836),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"TabBar",props:{tabs:Array},computed:{barStyle:{cache:!1,get:function(){var e=this;if(!this.$parent.$refs.tabs)return{};var t={},i=0,n=0;this.tabs.every(function(t,s){var o=e.$parent.$refs.tabs[s];return!!o&&(t.active?(n=o.clientWidth,!1):(i+=o.clientWidth,!0))});var s="translateX("+i+"px)";return t.width=n+"px",t.transform=s,t.msTransform=s,t.webkitTransform=s,t}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tabs__active-bar",style:e.barStyle})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(838),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(839),i(840),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean},data:function(){return{index:null}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){return this.$parent.currentName===(this.name||this.index)}},mounted:function(){this.$parent.addPanes(this)},destroyed:function(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.$parent.removePanes(this)},watch:{label:function(){this.$parent.$forceUpdate()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(842),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(843),i(850),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(844),o=n(s),a=i(15),r=i(607),l=n(r);t.default={name:"ElTree",mixins:[l.default],components:{ElTreeNode:i(847)},data:function(){return{store:null,root:null,currentNode:null}},props:{data:{type:Array},emptyText:{type:String,default:function(){return(0,a.t)("el.tree.emptyText")}},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,renderContent:Function,showCheckbox:{type:Boolean,default:!1},props:{default:function(){return{children:"children",label:"label",icon:"icon"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,currentNodeKey:[String,Number],load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:16}},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}}},watch:{defaultCheckedKeys:function(e){this.store.defaultCheckedKeys=e,this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},currentNodeKey:function(e){this.store.setCurrentNodeKey(e),this.store.currentNodeKey=e},data:function(e){this.store.setData(e)}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e,t){var i=this.nodeKey;return i&&e?e.data[i]:t},getCheckedNodes:function(e){return this.store.getCheckedNodes(e)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)}},created:function(){this.isTree=!0,this.store=new o.default({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(845),r=n(a),l=i(846),u=function(){function e(t){var i=this;s(this,e),this.currentNode=null,this.currentNodeKey=null;for(var n in t)t.hasOwnProperty(n)&&(this[n]=t[n]);if(this.nodesMap={},this.root=new r.default({data:this.data,store:this}),this.lazy&&this.load){var o=this.load;o(this.root,function(e){i.root.doCreateChildren(e),i._initDefaultCheckedNodes()})}else this._initDefaultCheckedNodes()}return e.prototype.filter=function(e){var t=this.filterNodeMethod,i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;if(s.forEach(function(n){n.visible=t.call(n,e,n.data,n),i(n)}),!n.visible&&s.length){var o=!0;s.forEach(function(e){e.visible&&(o=!1)}),n.root?n.root.visible=o===!1:n.visible=o===!1}n.visible&&!n.isLeaf&&n.expand()};i(this)},e.prototype.setData=function(e){var t=e!==this.root.data;this.root.setData(e),t&&this._initDefaultCheckedNodes()},e.prototype.getNode=function(e){var t="object"!==("undefined"==typeof e?"undefined":o(e))?e:(0,l.getNodeKey)(this.key,e);return this.nodesMap[t]},e.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},e.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},e.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent.removeChild(t)},e.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},e.prototype._initDefaultCheckedNodes=function(){var e=this,t=this.defaultCheckedKeys||[],i=this.nodesMap;t.forEach(function(t){var n=i[t];n&&n.setChecked(!0,!e.checkStrictly)})},e.prototype._initDefaultCheckedNode=function(e){var t=this.defaultCheckedKeys||[];t.indexOf(e.key)!==-1&&e.setChecked(!0,!this.checkStrictly)},e.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},e.prototype.registerNode=function(e){var t=this.key;if(t&&e&&e.data){var i=e.key;void 0!==i&&(this.nodesMap[e.key]=e)}},e.prototype.deregisterNode=function(e){var t=this.key;t&&e&&e.data&&delete this.nodesMap[e.key]},e.prototype.getCheckedNodes=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[],i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;s.forEach(function(n){(!e&&n.checked||e&&n.isLeaf&&n.checked)&&t.push(n.data),i(n)})};return i(this),t},e.prototype.getCheckedKeys=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.key,i=this._getAllNodes(),n=[];return i.forEach(function(i){(!e||e&&i.isLeaf)&&i.checked&&n.push((i.data||{})[t])}),n},e.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},e.prototype._setCheckedKeys=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments[2],s=this._getAllNodes();s.sort(function(e,t){return t.level-e.level});var o=Object.keys(n);s.forEach(function(n){var s=o.indexOf(n.data[e]+"")>-1;if(n.isLeaf)n.setChecked(s,!1);else{if(t.checkStrictly)n.setChecked(s,!1);else{for(var a=n.childNodes,r=!0,l=!0,u=0,c=a.length;u<c;u++){var d=a[u];(d.checked!==!0||d.indeterminate)&&(r=!1),(d.checked!==!1||d.indeterminate)&&(l=!1)}r?n.setChecked(!0,!t.checkStrictly):r||l?l&&n.setChecked(s,!t.checkStrictly):(s=!!s||"half",n.setChecked(s,!t.checkStrictly&&s===!0))}i&&!function(){n.setChecked(!1,!1);var e=function e(t){var i=t.childNodes;i.forEach(function(t){t.isLeaf||t.setChecked(!1,!1),e(t)})};e(n)}()}})},e.prototype.setCheckedNodes=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setCheckedKeys=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setDefaultExpandedKeys=function(e){var t=this;e=e||[],this.defaultExpandedKeys=e,e.forEach(function(e){var i=t.getNode(e);i&&i.expand(null,t.autoExpandParent)})},e.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},e.prototype.getCurrentNode=function(){return this.currentNode},e.prototype.setCurrentNode=function(e){this.currentNode=e},e.prototype.setCurrentNodeKey=function(e){var t=this.getNode(e);t&&(this.currentNode=t)},e}();t.default=u},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a=i(613),r=n(a),l=i(846),u=function(e){for(var t=e.childNodes,i=!0,n=!0,s=0,o=t.length;s<o;s++){var a=t[s];(a.checked!==!0||a.indeterminate)&&(i=!1),(a.checked!==!1||a.indeterminate)&&(n=!1)}i?e.setChecked(!0):i||n?n&&e.setChecked(!1):e.setChecked("half")},c=function(e,t){var i=e.store.props,n=e.data||{},s=i[t];return"function"==typeof s?s(n,e):"string"==typeof s?n[s]:"undefined"==typeof s?"":void 0},d=0,h=function(){function e(t){s(this,e),this.id=d++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0;for(var i in t)t.hasOwnProperty(i)&&(this[i]=t[i]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var n=this.store;if(!n)throw new Error("[Node]store is required!");n.registerNode(this);var o=n.props;if(o&&"undefined"!=typeof o.isLeaf){var a=c(this,"isLeaf");"boolean"==typeof a&&(this.isLeafByUser=a)}if(n.lazy!==!0&&this.data?(this.setData(this.data),n.defaultExpandAll&&(this.expanded=!0)):this.level>0&&n.lazy&&n.defaultExpandAll&&this.expand(),this.data){var r=n.defaultExpandedKeys,l=n.key;l&&r&&r.indexOf(this.key)!==-1&&this.expand(null,n.autoExpandParent),l&&n.currentNodeKey&&this.key===n.currentNodeKey&&(n.currentNode=this),n.lazy&&n._initDefaultCheckedNode(this),this.updateLeafState()}}return e.prototype.setData=function(e){Array.isArray(e)||(0,l.markNodeData)(this,e),this.data=e,this.childNodes=[];var t=void 0;t=0===this.level&&this.data instanceof Array?this.data:c(this,"children")||[];for(var i=0,n=t.length;i<n;i++)this.insertChild({data:t[i]})},e.prototype.insertChild=function(t,i){if(!t)throw new Error("insertChild error: child is required.");t instanceof e||((0,r.default)(t,{parent:this,store:this.store}),t=new e(t)),t.level=this.level+1,"undefined"==typeof i||i<0?this.childNodes.push(t):this.childNodes.splice(i,0,t),this.updateLeafState()},e.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},e.prototype.insertAfter=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t),i!==-1&&(i+=1)),this.insertChild(e,i)},e.prototype.removeChild=function(e){var t=this.childNodes.indexOf(e);t>-1&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(t,1)),this.updateLeafState()},e.prototype.removeChildByData=function(e){var t=null;this.childNodes.forEach(function(i){i.data===e&&(t=i)}),t&&this.removeChild(t)},e.prototype.expand=function(e,t){var i=this,n=function(){if(t)for(var n=i.parent;n.level>0;)n.expanded=!0,n=n.parent;i.expanded=!0,e&&e()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&n()}):n()},e.prototype.doCreateChildren=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild((0,r.default)({data:e},i))})},e.prototype.collapse=function(){this.expanded=!1},e.prototype.shouldLoadData=function(){return this.store.lazy===!0&&this.store.load&&!this.loaded},e.prototype.updateLeafState=function(){if(this.store.lazy===!0&&this.loaded!==!0&&"undefined"!=typeof this.isLeafByUser)return void(this.isLeaf=this.isLeafByUser);var e=this.childNodes;return!this.store.lazy||this.store.lazy===!0&&this.loaded===!0?void(this.isLeaf=!e||0===e.length):void(this.isLeaf=!1)},e.prototype.setChecked=function(e,t){var i=this;this.indeterminate="half"===e,this.checked=e===!0;var n=function(){if(t)for(var n=i.childNodes,s=0,o=n.length;s<o;s++){var a=n[s];a.setChecked(e!==!1,t)}};!this.store.checkStrictly&&this.shouldLoadData()?this.loadData(function(){n()},{checked:e!==!1}):n();var s=this.parent;s&&0!==s.level&&(this.store.checkStrictly||u(s))},e.prototype.getChildren=function(){var e=this.data;if(!e)return null;var t=this.store.props,i="children";return t&&(i=t.children||"children"),void 0===e[i]&&(e[i]=null),e[i]},e.prototype.updateChildren=function(){var e=this,t=this.getChildren()||[],i=this.childNodes.map(function(e){return e.data}),n={},s=[];t.forEach(function(e,t){e[l.NODE_KEY]?n[e[l.NODE_KEY]]={index:t,data:e}:s.push({index:t,data:e})}),i.forEach(function(t){n[t[l.NODE_KEY]]||e.removeChildByData(t)}),s.forEach(function(t){var i=t.index,n=t.data;e.insertChild({data:n},i)}),this.updateLeafState()},e.prototype.loadData=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.store.lazy!==!0||!this.store.load||this.loaded||this.loading)e&&e.call(this);else{this.loading=!0;var n=function(n){t.loaded=!0,t.loading=!1,t.childNodes=[],t.doCreateChildren(n,i),t.updateLeafState(),e&&e.call(t,n)};this.store.load(this,n)}},o(e,[{key:"label",get:function(){return c(this,"label")}},{key:"icon",get:function(){return c(this,"icon")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}}]),e}();t.default=h},function(e,t){"use strict";t.__esModule=!0;var i=t.NODE_KEY="$treeNodeId";t.markNodeData=function(e,t){t[i]||Object.defineProperty(t,i,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},t.getNodeKey=function(e,t){return e?t[e]:t[i]}},function(e,t,i){var n=i(13)(i(848),i(849),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(702),o=n(s),a=i(607),r=n(a);t.default={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[r.default],props:{node:{default:function(){return{}}},props:{},renderContent:Function},components:{
+ElCheckbox:o.default,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=this.node,n=i.data,s=i.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:t.tree.$vnode.context,node:i,data:n,store:s}):e("span",{class:"el-tree-node__label"},[this.node.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,showCheckbox:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){this.expanded=e,e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e,t){var i=this.tree.nodeKey;return i&&e?e.data[i]:t},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),this.tree.currentNode=this,this.tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.$emit("node-click",this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleUserClick:function(){this.node.indeterminate&&this.node.setChecked(this.node.checked,!this.tree.checkStrictly)},handleCheckChange:function(e){this.node.indeterminate||this.node.setChecked(e.target.checked,!this.tree.checkStrictly)},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)}},created:function(){var e=this,t=this.$parent;t.isTree?this.tree=t:this.tree=t.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=i.props||{},s=n.children||"children";this.$watch("node.data."+s,function(){e.node.updateChildren()}),this.showCheckbox=i.showCheckbox,this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(t){e.node!==t&&e.node.collapse()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.node.visible,expression:"node.visible"}],staticClass:"el-tree-node",class:{"is-expanded":e.childNodeRendered&&e.expanded,"is-current":e.tree.store.currentNode===e.node,"is-hidden":!e.node.visible},on:{click:function(t){t.stopPropagation(),e.handleClick(t)}}},[i("div",{staticClass:"el-tree-node__content",style:{"padding-left":(e.node.level-1)*e.tree.indent+"px"}},[i("span",{staticClass:"el-tree-node__expand-icon",class:{"is-leaf":e.node.isLeaf,expanded:!e.node.isLeaf&&e.expanded},on:{click:function(t){t.stopPropagation(),e.handleExpandIconClick(t)}}}),e.showCheckbox?i("el-checkbox",{attrs:{indeterminate:e.node.indeterminate},on:{change:e.handleCheckChange},nativeOn:{click:function(t){t.stopPropagation(),e.handleUserClick(t)}},model:{value:e.node.checked,callback:function(t){e.node.checked=t},expression:"node.checked"}}):e._e(),e.node.loading?i("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):e._e(),i("node-content",{attrs:{node:e.node}})],1),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.expanded,expression:"expanded"}],staticClass:"el-tree-node__children"},e._l(e.node.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{"render-content":e.renderContent,node:t},on:{"node-expand":e.handleChildNodeExpand}})}))])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":e.highlightCurrent}},[e._l(e.root.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{node:t,props:e.props,"render-content":e.renderContent},on:{"node-expand":e.handleNodeExpand}})}),e.root.childNodes&&0!==e.root.childNodes.length?e._e():i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[e._v(e._s(e.emptyText))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(852),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(853),i(854),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"el-icon-circle-check",warning:"el-icon-warning",error:"el-icon-circle-cross"};t.default={name:"ElAlert",props:{title:{type:String,default:"",required:!0},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:{type:Boolean,default:!1}},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return i[this.type]||"el-icon-information"},isBigIcon:function(){return this.description?"is-big":""},isBoldTitle:function(){return this.description?"is-bold":""}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-alert",class:[e.typeClass]},[e.showIcon?i("i",{staticClass:"el-alert__icon",class:[e.iconClass,e.isBigIcon]}):e._e(),i("div",{staticClass:"el-alert__content"},[e.title?i("span",{staticClass:"el-alert__title",class:[e.isBoldTitle]},[e._v(e._s(e.title))]):e._e(),e._t("default",[e.description?i("p",{staticClass:"el-alert__description"},[e._v(e._s(e.description))]):e._e()]),i("i",{directives:[{name:"show",rawName:"v-show",value:e.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==e.closeText,"el-icon-close":""===e.closeText},on:{click:function(t){e.close()}}},[e._v(e._s(e.closeText))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(856),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(618),r=i(731),l=o.default.extend(i(857)),u=void 0,c=[],d=1,h=function e(t){if(!o.default.prototype.$isServer){t=t||{};var i=t.onClose,n="notification_"+d++;t.onClose=function(){e.close(n,i)},u=new l({data:t}),(0,r.isVNode)(t.message)&&(u.$slots.default=[t.message],t.message=""),u.id=n,u.vm=u.$mount(),document.body.appendChild(u.vm.$el),u.vm.visible=!0,u.dom=u.vm.$el,u.dom.style.zIndex=a.PopupManager.nextZIndex();for(var s=t.offset||0,h=s,f=0,p=c.length;f<p;f++)h+=c[f].$el.offsetHeight+16;return h+=16,u.top=h,c.push(u),u.vm}};["success","warning","info","error"].forEach(function(e){h[e]=function(t){return("string"==typeof t||(0,r.isVNode)(t))&&(t={message:t}),t.type=e,h(t)}}),h.close=function(e,t){for(var i=void 0,n=void 0,s=0,o=c.length;s<o;s++)if(e===c[s].id){"function"==typeof t&&t(c[s]),i=s,n=c[s].dom.offsetHeight,c.splice(s,1);break}if(o>1)for(s=i;s<o-1;s++)c[s].dom.style.top=parseInt(c[s].dom.style.top,10)-n-16+"px"},t.default=h},function(e,t,i){var n=i(13)(i(858),i(859),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,top:null,timer:null}},computed:{typeClass:function(){return this.type&&i[this.type]?"el-icon-"+i[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-notification",class:e.customClass,style:{top:e.top?e.top+"px":"auto"},on:{mouseenter:function(t){e.clearTimer()},mouseleave:function(t){e.startTimer()},click:e.click}},[e.type||e.iconClass?i("i",{staticClass:"el-notification__icon",class:[e.typeClass,e.iconClass]}):e._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":e.typeClass||e.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:e._s(e.title)}}),i("div",{staticClass:"el-notification__content"},[e._t("default",[e._v(e._s(e.message))])],2),i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(t){t.stopPropagation(),e.close(t)}}})])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(861),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(862),i(866),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(686),o=n(s),a=i(863),r=n(a),l=i(71),u=i(607),c=n(u);t.default={name:"ElSlider",mixins:[c.default],props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1},vertical:{type:Boolean,default:!1},height:{type:String}},components:{ElInputNumber:o.default,SliderButton:r.default},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1}},watch:{value:function(e,t){this.dragging||Array.isArray(e)&&Array.isArray(t)&&e.every(function(e,i){return e===t[i]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var e=this;return this.range?![this.minValue,this.maxValue].every(function(t,i){return t===e.oldValue[i]}):this.value!==this.oldValue},setValues:function(){var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.$emit("change",[this.minValue,this.maxValue]),this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(!this.range)return void this.$refs.button1.setPosition(e);var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)},onSliderClick:function(e){if(!this.disabled&&!this.dragging)if(this.vertical){var t=this.$refs.slider.getBoundingClientRect().bottom;this.setPosition((t-e.clientY)/this.$sliderSize*100)}else{var i=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-i)/this.$sliderSize*100)}}},computed:{$sliderSize:function(){return parseInt((0,l.getStyle)(this.$refs.slider,this.vertical?"height":"width"),10)},stops:function(){for(var e=this,t=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s<t;s++)n.push(s*i);return this.range?n.filter(function(t){return t<100*(e.minValue-e.min)/(e.max-e.min)||t>100*(e.maxValue-e.min)/(e.max-e.min)}):n.filter(function(t){return t>100*(e.firstValue-e.min)/(e.max-e.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barSize:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barStart:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)},runwayStyle:function(){return this.vertical?{height:this.height}:{}},barStyle:function(){return this.vertical?{height:this.barSize,bottom:this.barStart}:{width:this.barSize,left:this.barStart}}},mounted:function(){this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue]):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue)}}},function(e,t,i){var n=i(13)(i(864),i(865),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(729),o=n(s);t.default={name:"ElSliderButton",components:{ElTooltip:o.default},props:{value:{type:Number,default:0},vertical:{type:Boolean,default:!1}},data:function(){return{hovering:!1,dragging:!1,startX:0,currentX:0,startY:0,currentY:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.disabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value},wrapperStyle:function(){return this.vertical?{bottom:this.currentPosition}:{left:this.currentPosition}}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onDragStart:function(e){this.dragging=!0,this.vertical?this.startY=e.clientY:this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition)},onDragging:function(e){if(this.dragging){this.displayTooltip();var t=0;this.vertical?(this.currentY=e.clientY,t=(this.startY-this.currentY)/this.$parent.$sliderSize*100):(this.currentX=e.clientX,t=(this.currentX-this.startX)/this.$parent.$sliderSize*100),this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.setPosition(e.newPosition)},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){e<0?e=0:e>100&&(e=100);var t=100/((this.max-this.min)/this.step),i=Math.round(e/t),n=i*t*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$refs.tooltip&&this.$refs.tooltip.updatePopper(),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:e.hovering,dragging:e.dragging},style:e.wrapperStyle,on:{mouseenter:e.handleMouseEnter,mouseleave:e.handleMouseLeave,mousedown:e.onButtonDown}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top",disabled:!e.showTooltip}},[i("span",{slot:"content"},[e._v(e._s(e.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:e.hovering,dragging:e.dragging}})])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-slider",class:{"is-vertical":e.vertical,"el-slider--with-input":e.showInput}},[e.showInput&&!e.range?i("el-input-number",{ref:"input",staticClass:"el-slider__input",attrs:{step:e.step,disabled:e.disabled,controls:e.showInputControls,min:e.min,max:e.max,size:"small"},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}):e._e(),i("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":e.showInput,disabled:e.disabled},style:e.runwayStyle,on:{click:e.onSliderClick}},[i("div",{staticClass:"el-slider__bar",style:e.barStyle}),i("slider-button",{ref:"button1",attrs:{vertical:e.vertical},model:{value:e.firstValue,callback:function(t){e.firstValue=t},expression:"firstValue"}}),e.range?i("slider-button",{ref:"button2",attrs:{vertical:e.vertical},model:{value:e.secondValue,callback:function(t){e.secondValue=t},expression:"secondValue"}}):e._e(),e._l(e.stops,function(t){return e.showStops?i("div",{staticClass:"el-slider__stop",style:e.vertical?{bottom:t+"%"}:{left:t+"%"}}):e._e()})],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(868),o=n(s),a=i(872),r=n(a);t.default={install:function(e){e.use(o.default),e.prototype.$loading=r.default},directive:o.default,service:r.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(2),o=n(s),a=i(71),r=o.default.extend(i(869));t.install=function(e){if(!e.prototype.$isServer){var t=function(t,n){n.value?e.nextTick(function(){n.modifiers.fullscreen?(t.originalPosition=document.body.style.position,t.originalOverflow=document.body.style.overflow,(0,a.addClass)(t.mask,"is-fullscreen"),i(document.body,t,n)):((0,a.removeClass)(t.mask,"is-fullscreen"),n.modifiers.body?(t.originalPosition=document.body.style.position,["top","left"].forEach(function(e){var i="top"===e?"scrollTop":"scrollLeft";t.maskStyle[e]=t.getBoundingClientRect()[e]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(e){t.maskStyle[e]=t.getBoundingClientRect()[e]+"px"}),i(document.body,t,n)):(t.originalPosition=t.style.position,i(t,t,n)))}):t.domVisible&&(t.instance.$on("after-leave",function(e){t.domVisible=!1,n.modifiers.fullscreen&&"hidden"!==t.originalOverflow&&(document.body.style.overflow=t.originalOverflow),n.modifiers.fullscreen||n.modifiers.body?document.body.style.position=t.originalPosition:t.style.position=t.originalPosition}),t.instance.visible=!1)},i=function(t,i,n){i.domVisible||(Object.keys(i.maskStyle).forEach(function(e){i.mask.style[e]=i.maskStyle[e]}),"absolute"!==i.originalPosition&&(t.style.position="relative"),n.modifiers.fullscreen&&n.modifiers.lock&&(t.style.overflow="hidden"),i.domVisible=!0,t.appendChild(i.mask),e.nextTick(function(){i.instance.visible=!0}),i.domInserted=!0)};e.directive("loading",{bind:function(e,i){var n=new r({el:document.createElement("div"),data:{text:e.getAttribute("element-loading-text"),fullscreen:!!i.modifiers.fullscreen}});e.instance=n,e.mask=n.$el,e.maskStyle={},t(e,i)},update:function(e,i){e.instance.setText(e.getAttribute("element-loading-text")),i.oldValue!==i.value&&t(e,i)},unbind:function(e,t){e.domInserted&&(t.modifiers.fullscreen||t.modifiers.body?document.body.removeChild(e.mask):e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask))}})}}},function(e,t,i){var n=i(13)(i(870),i(871),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={data:function(){return{text:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}]},[i("div",{staticClass:"el-loading-spinner"},[i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(869),r=n(a),l=i(613),u=n(l),c=o.default.extend(r.default),d={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},h=void 0;c.prototype.originalPosition="",c.prototype.originalOverflow="",c.prototype.close=function(){var e=this;this.fullscreen&&"hidden"!==this.originalOverflow&&(document.body.style.overflow=this.originalOverflow),this.fullscreen||this.body?document.body.style.position=this.originalPosition:this.target.style.position=this.originalPosition,this.fullscreen&&(h=void 0),this.$on("after-leave",function(t){e.$el&&e.$el.parentNode&&e.$el.parentNode.removeChild(e.$el),e.$destroy()}),this.visible=!1};var f=function(e,t,i){var n={};e.fullscreen?(i.originalPosition=document.body.style.position,i.originalOverflow=document.body.style.overflow):e.body?(i.originalPosition=document.body.style.position,["top","left"].forEach(function(t){var i="top"===t?"scrollTop":"scrollLeft";n[t]=e.target.getBoundingClientRect()[t]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(t){n[t]=e.target.getBoundingClientRect()[t]+"px"})):i.originalPosition=t.style.position,Object.keys(n).forEach(function(e){i.$el.style[e]=n[e]})},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!o.default.prototype.$isServer){if(e=(0,u.default)({},d,e),"string"==typeof e.target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&h)return h;var t=e.body?document.body:e.target,i=new c({el:document.createElement("div"),data:e});return f(e,t,i),"absolute"!==i.originalPosition&&(t.style.position="relative"),e.fullscreen&&e.lock&&(t.style.overflow="hidden"),t.appendChild(i.$el),o.default.nextTick(function(){i.visible=!0}),e.fullscreen&&(h=i),i}};t.default=p},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(874),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(875),i(876),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElIcon",props:{name:String}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("i",{class:"el-icon-"+e.name})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(878),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(879),i(880),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElRow",componentName:"ElRow",props:{gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-row",class:["start"!==e.justify?"is-justify-"+e.justify:"","top"!==e.align?"is-align-"+e.align:"",{"el-row--flex":"flex"===e.type}],style:e.style},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(882),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default={name:"ElCol",props:{span:{type:Number,default:24},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object]},computed:{gutter:function(){for(var e=this.$parent;e&&"ElRow"!==e.$options.componentName;)e=e.$parent;return e?e.gutter:0}},render:function(e){var t=this,n=[],s={};return this.gutter&&(s.paddingLeft=this.gutter/2+"px",s.paddingRight=s.paddingLeft),["span","offset","pull","push"].forEach(function(e){t[e]&&n.push("span"!==e?"el-col-"+e+"-"+t[e]:"el-col-"+t[e])}),["xs","sm","md","lg"].forEach(function(e){"number"==typeof t[e]?n.push("el-col-"+e+"-"+t[e]):"object"===i(t[e])&&!function(){var i=t[e];Object.keys(i).forEach(function(t){n.push("span"!==t?"el-col-"+e+"-"+t+"-"+i[t]:"el-col-"+e+"-"+i[t])})}()}),e("div",{class:["el-col",n],style:s},[this.$slots.default])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(884),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(885),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(886),a=n(o),r=i(893),l=n(r),u=i(899),c=n(u),d=i(888),h=n(d),f=i(901),p=n(f);t.default={name:"ElUpload",mixins:[p.default],components:{ElProgress:h.default,UploadList:a.default,Upload:l.default,IframeUpload:c.default},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,onRemove:{type:Function,default:s},onChange:{type:Function,default:s},onPreview:{type:Function},onSuccess:{type:Function,default:s},onProgress:{type:Function,default:s},onError:{type:Function,default:s},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function,disabled:Boolean},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},watch:{fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status="success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};try{t.url=URL.createObjectURL(e)}catch(e){return void console.error(e)}this.uploadFiles.push(t),this.onChange(t,this.uploadFiles)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(e,t){t&&(e=this.getFile(t));var i=this.uploadFiles;i.splice(i.indexOf(e),1),this.onRemove(e,i)},getFile:function(e){var t,i=this.uploadFiles;return i.every(function(i){return t=e.uid===i.uid?i:null,!t}),t},clearFiles:function(){this.uploadFiles=[]},submit:function(){var e=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(t){e.$refs["upload-inner"].upload(t.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},render:function(e){var t;this.showFileList&&(t=e(a.default,{attrs:{listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}},[]));var i={props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,disabled:this.disabled,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},n=this.$slots.trigger||this.$slots.default,s="undefined"!=typeof FormData||this.$isServer?e("upload",i,[n]):e("iframeUpload",i,[n]);return e("div",null,["picture-card"===this.listType?t:"",this.$slots.trigger?[s,this.$slots.default]:s,this.$slots.tip,"picture-card"!==this.listType?t:""])}}},function(e,t,i){var n=i(13)(i(887),i(892),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(608),o=n(s),a=i(888),r=n(a);t.default={mixins:[o.default],components:{ElProgress:r.default},props:{files:{type:Array,default:function(){return[]}},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(889),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(890),i(891),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return["line","circle"].indexOf(e)>-1}},percentage:{type:Number,default:0,required:!0,validator:function(e){return e>=0&&e<=100}},status:{type:String},strokeWidth:{
+type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e;switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-cross":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}]},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?i("i",{class:e.iconClass}):[e._v(e._s(e.percentage)+"%")]],2):e._e()])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition-group",{class:["el-upload-list","el-upload-list--"+e.listType],attrs:{tag:"ul",name:"list"}},e._l(e.files,function(t){return i("li",{key:t,class:["el-upload-list__item","is-"+t.status]},[["picture-card","picture"].indexOf(e.listType)>-1&&"success"===t.status?i("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):e._e(),i("a",{staticClass:"el-upload-list__item-name",on:{click:function(i){e.handleClick(t)}}},[i("i",{staticClass:"el-icon-document"}),e._v(e._s(t.name)+"\n    ")]),i("label",{staticClass:"el-upload-list__item-status-label"},["success"===t.status?i("i",{class:{"el-icon-circle-check":"text"===e.listType,"el-icon-check":["picture-card","picture"].indexOf(e.listType)>-1}}):e._e(),i("i",{staticClass:"el-icon-close",on:{click:function(i){e.$emit("remove",t)}}})]),"picture-card"===e.listType&&"success"===t.status?i("span",{staticClass:"el-upload-list__item-actions"},[e.handlePreview&&"picture-card"===e.listType?i("span",{staticClass:"el-upload-list__item-preview",on:{click:function(i){e.handlePreview(t)}}},[i("i",{staticClass:"el-icon-view"})]):e._e(),i("span",{staticClass:"el-upload-list__item-delete",on:{click:function(i){e.$emit("remove",t)}}},[i("i",{staticClass:"el-icon-delete2"})])]):e._e(),"uploading"===t.status?i("el-progress",{attrs:{type:"picture-card"===e.listType?"circle":"line","stroke-width":"picture-card"===e.listType?6:2,percentage:e.parsePercentage(t.percentage)}}):e._e()],1)}))},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(894),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(895),o=n(s),a=i(896),r=n(a);t.default={components:{UploadDragger:r.default},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:o.default},disabled:Boolean},data:function(){return{mouseover:!1}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleChange:function(e){var t=e.target.files;t&&(this.uploadFiles(t),this.$refs.input.value=null)},uploadFiles:function(e){var t=this,i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})},upload:function(e,t){var i=this;if(!this.beforeUpload)return this.post(e);var n=this.beforeUpload(e);n&&n.then?n.then(function(t){"[object File]"===Object.prototype.toString.call(t)?i.post(t):i.post(e)},function(){i.onRemove(e,!0)}):n!==!1?this.post(e):this.onRemove(e,!0)},post:function(e){var t=this,i={headers:this.headers,withCredentials:this.withCredentials,file:e,data:this.data,filename:this.name,action:this.action,onProgress:function(i){t.onProgress(i,e)},onSuccess:function(i){t.onSuccess(i,e)},onError:function(i){t.onError(i,e)}},n=this.httpRequest(i);n&&n.then&&n.then(i.onSuccess,i.onError)},handleClick:function(){this.disabled||this.$refs.input.click()}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,o=this.multiple,a=this.accept,r=this.listType,l=this.uploadFiles,u=this.disabled,c={class:{"el-upload":!0},on:{click:t}};return c.class["el-upload--"+r]=!0,e("div",c,[i?e("upload-dragger",{attrs:{disabled:u},on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:o,accept:a},ref:"input",on:{change:s}},[])])}}},function(e,t){"use strict";function i(e,t,i){var n=void 0;n=i.response?i.status+" "+(i.response.error||i.response):i.responseText?i.status+" "+i.responseText:"fail to post "+e+" "+i.status;var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}function n(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}function s(e){if("undefined"!=typeof XMLHttpRequest){var t=new XMLHttpRequest,s=e.action;t.upload&&(t.upload.onprogress=function(t){t.total>0&&(t.percent=t.loaded/t.total*100),e.onProgress(t)});var o=new FormData;e.data&&Object.keys(e.data).map(function(t){o.append(t,e.data[t])}),o.append(e.filename,e.file),t.onerror=function(t){e.onError(t)},t.onload=function(){return t.status<200||t.status>=300?e.onError(i(s,e,t)):void e.onSuccess(n(t))},t.open("post",s,!0),e.withCredentials&&"withCredentials"in t&&(t.withCredentials=!0);var a=e.headers||{};for(var r in a)a.hasOwnProperty(r)&&null!==a[r]&&t.setRequestHeader(r,a[r]);return t.send(o),t}}t.__esModule=!0,t.default=s},function(e,t,i){var n=i(13)(i(897),i(898),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElUploadDrag",props:{disabled:Boolean},data:function(){return{dragover:!1}},methods:{onDragover:function(){this.disabled||(this.dragover=!0)},onDrop:function(e){this.disabled||(this.dragover=!1,this.$emit("file",e.dataTransfer.files))}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-upload-dragger",class:{"is-dragover":e.dragover},on:{drop:function(t){t.preventDefault(),e.onDrop(t)},dragover:function(t){t.preventDefault(),e.onDragover(t)},dragleave:function(t){t.preventDefault(),e.dragover=!1}}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(900),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(896),o=n(s);t.default={components:{UploadDragger:o.default},props:{type:String,data:{},action:{type:String,required:!0},name:{type:String,default:"file"},withCredentials:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},drag:Boolean,listType:String,disabled:Boolean},data:function(){return{mouseover:!1,domain:"",file:null,submitting:!1}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleClick:function(){this.disabled||this.$refs.input.click()},handleChange:function(e){var t=e.target.value;t&&this.uploadFiles(t)},uploadFiles:function(e){if(!this.submitting){this.submitting=!0,this.file=e,this.onStart(e);var t=this.getFormNode(),i=this.getFormDataNode(),n=this.data;"function"==typeof n&&(n=n(e));var s=[];for(var o in n)n.hasOwnProperty(o)&&s.push('<input name="'+o+'" value="'+n[o]+'"/>');i.innerHTML=s.join(""),t.submit(),i.innerHTML=""}},getFormNode:function(){return this.$refs.form},getFormDataNode:function(){return this.$refs.data}},created:function(){this.frameName="frame-"+Date.now()},mounted:function(){var e=this;!this.$isServer&&window.addEventListener("message",function(t){if(e.file){var i=new URL(e.action).origin;if(t.origin===i){var n=t.data;"success"===n.result?e.onSuccess(n,e.file):"failed"===n.result&&e.onError(n,e.file),e.submitting=!1,e.file=null}}},!1)},render:function(e){var t=this.drag,i=this.uploadFiles,n=this.listType,s=this.frameName,o=this.disabled,a={"el-upload":!0};return a["el-upload--"+n]=!0,e("div",{class:a,on:{click:this.handleClick},nativeOn:{drop:this.onDrop,dragover:this.handleDragover,dragleave:this.handleDragleave}},[e("iframe",{on:{load:this.onload},ref:"iframe",attrs:{name:s}},[]),e("form",{ref:"form",attrs:{action:this.action,target:s,enctype:"multipart/form-data",method:"POST"}},[e("input",{class:"el-upload__input",attrs:{type:"file",name:"file",accept:this.accept},ref:"input",on:{change:this.handleChange}},[]),e("input",{attrs:{type:"hidden",name:"documentDomain",value:this.$isServer?"":document.domain}},[]),e("span",{ref:"data"},[])]),t?e("upload-dragger",{on:{file:i},attrs:{disabled:o}},[this.$slots.default]):this.$slots.default])}}},function(e,t,i){"use strict";t.__esModule=!0,t.default={mounted:function(){return},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(903),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(904),i(905),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-spinner"},[i("svg",{staticClass:"el-spinner-inner",style:{width:e.radius/2+"px",height:e.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:e.strokeColor,"stroke-width":e.strokeWidth}})])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(907),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(618),r=o.default.extend(i(908)),l=void 0,u=[],c=1,d=function e(t){if(!o.default.prototype.$isServer){t=t||{},"string"==typeof t&&(t={message:t});var i=t.onClose,n="message_"+c++;return t.onClose=function(){e.close(n,i)},l=new r({data:t}),l.id=n,l.vm=l.$mount(),document.body.appendChild(l.vm.$el),l.vm.visible=!0,l.dom=l.vm.$el,l.dom.style.zIndex=a.PopupManager.nextZIndex(),u.push(l),l.vm}};["success","warning","info","error"].forEach(function(e){d[e]=function(t){return"string"==typeof t&&(t={message:t}),t.type=e,d(t)}}),d.close=function(e,t){for(var i=0,n=u.length;i<n;i++)if(e===u[i].id){"function"==typeof t&&t(u[i]),u.splice(i,1);break}},d.closeAll=function(){for(var e=u.length-1;e>=0;e--)u[e].close()},t.default=d},function(e,t,i){var n=i(13)(i(909),i(915),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null}},computed:{typeImg:function(){return i(910)("./"+this.type+".svg")}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){this.startTimer()}}},function(e,t,i){function n(e){return i(s(e))}function s(e){return o[e]||function(){throw new Error("Cannot find module '"+e+"'.")}()}var o={"./error.svg":911,"./info.svg":912,"./success.svg":913,"./warning.svg":914};n.keys=function(){return Object.keys(o)},n.resolve=s,e.exports=n,n.id=910},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9kYW5nZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iRWxlbWVudC1ndWlkZWxpbmUtdjAuMi40IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWVzc2FnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwLjAwMDAwMCwgLTMzMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuW4puWAvuWQkV/kv6Hmga8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMzMyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl9kYW5nZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiNGRjQ5NDkiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuODE3MjYyNywxNi4zNDUxNzk2IEMyNS45MzkwOTAyLDE2LjIyMzM0ODMgMjYsMTYuMDc2MTQxOCAyNiwxNS45MDM1NTIzIEMyNiwxNS43MzA5NjI4IDI1LjkzOTA5MDIsMTUuNTgzNzU2MyAyNS44MTcyNjI3LDE1LjQ2MTkyODkgTDI0LjUwNzYxNTcsMTQuMTgyNzQxMSBDMjQuMzg1Nzg4MiwxNC4wNjA5MTM3IDI0LjI0MzY1NzUsMTQgMjQuMDgxMjE5NiwxNCBDMjMuOTE4NzgxNywxNCAyMy43NzY2NTEsMTQuMDYwOTEzNyAyMy42NTQ4MjM1LDE0LjE4Mjc0MTEgTDIwLDE3LjgzNzU2MzUgTDE2LjMxNDcyMTYsMTQuMTgyNzQxMSBDMTYuMTkyODkwMiwxNC4wNjA5MTM3IDE2LjA1MDc1OTUsMTQgMTUuODg4MzIxNiwxNCBDMTUuNzI1ODg3NiwxNCAxNS41ODM3NTY5LDE0LjA2MDkxMzcgMTUuNDYxOTI5NCwxNC4xODI3NDExIEwxNC4xNTIyODI0LDE1LjQ2MTkyODkgQzE0LjA1MDc1ODIsMTUuNTgzNzU2MyAxNCwxNS43MzA5NjI4IDE0LDE1LjkwMzU1MjMgQzE0LDE2LjA3NjE0MTggMTQuMDUwNzU4MiwxNi4yMjMzNDgzIDE0LjE1MjI4MjQsMTYuMzQ1MTc5NiBMMTcuODM3NTYwOCwyMC4wMDAwMDE5IEwxNC4xNTIyODI0LDIzLjY1NDgyNDMgQzE0LjA1MDc1ODIsMjMuNzc2NjUxNyAxNCwyMy45MjM4NTgyIDE0LDI0LjA5NjQ0NzcgQzE0LDI0LjI2OTAzNzIgMTQuMDUwNzU4MiwyNC40MTYyNDM3IDE0LjE1MjI4MjQsMjQuNTM4MDcxMSBMMTUuNDYxOTI5NCwyNS44MTcyNTg5IEMxNS41ODM3NTY5LDI1LjkzOTA4NjMgMTUuNzI1ODg3NiwyNiAxNS44ODgzMjE2LDI2IEMxNi4wNTA3NTk1LDI2IDE2LjE5Mjg5MDIsMjUuOTM5MDg2MyAxNi4zMTQ3MjE2LDI1LjgxNzI1ODkgTDIwLDIyLjE2MjQzNjUgTDIzLjY1NDgyMzUsMjUuODE3MjU4OSBDMjMuNzc2NjUxLDI1LjkzOTA4NjMgMjMuOTE4NzgxNywyNiAyNC4wODEyMTk2LDI2IEMyNC4yNDM2NTc1LDI2IDI0LjM4NTc4ODIsMjUuOTM5MDg2MyAyNC41MDc2MTU3LDI1LjgxNzI1ODkgTDI1LjgxNzI2MjcsMjQuNTM4MDcxMSBDMjUuOTM5MDkwMiwyNC40MTYyNDM3IDI2LDI0LjI2OTAzNzIgMjYsMjQuMDk2NDQ3NyBDMjYsMjMuOTIzODU4MiAyNS45MzkwOTAyLDIzLjc3NjY1MTcgMjUuODE3MjYyNywyMy42NTQ4MjQzIEwyMi4xMzE5ODA0LDIwLjAwMDAwMTkgTDI1LjgxNzI2MjcsMTYuMzQ1MTc5NiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0xNTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDE1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25faW5mbyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzUwQkZGRiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMS42MTUzODQ2LDI2LjU0MzIwOTkgQzIxLjYxNTM4NDYsMjYuOTQ3ODc1MSAyMS40NTgzMzQ4LDI3LjI5MTgzNjggMjEuMTQ0MjMwOCwyNy41NzUxMDI5IEMyMC44MzAxMjY4LDI3Ljg1ODM2ODkgMjAuNDQ4NzE5NCwyOCAyMCwyOCBDMTkuNTUxMjgwNiwyOCAxOS4xNjk4NzMyLDI3Ljg1ODM2ODkgMTguODU1NzY5MiwyNy41NzUxMDI5IEMxOC41NDE2NjUyLDI3LjI5MTgzNjggMTguMzg0NjE1NCwyNi45NDc4NzUxIDE4LjM4NDYxNTQsMjYuNTQzMjA5OSBMMTguMzg0NjE1NCwxOS43NDQ4NTYgQzE4LjM4NDYxNTQsMTkuMzQwMTkwNyAxOC41NDE2NjUyLDE4Ljk5NjIyOSAxOC44NTU3NjkyLDE4LjcxMjk2MyBDMTkuMTY5ODczMiwxOC40Mjk2OTY5IDE5LjU1MTI4MDYsMTguMjg4MDY1OCAyMCwxOC4yODgwNjU4IEMyMC40NDg3MTk0LDE4LjI4ODA2NTggMjAuODMwMTI2OCwxOC40Mjk2OTY5IDIxLjE0NDIzMDgsMTguNzEyOTYzIEMyMS40NTgzMzQ4LDE4Ljk5NjIyOSAyMS42MTUzODQ2LDE5LjM0MDE5MDcgMjEuNjE1Mzg0NiwxOS43NDQ4NTYgTDIxLjYxNTM4NDYsMjYuNTQzMjA5OSBaIE0yMCwxNS44MDQyOTgxIEMxOS40NDQ0NDI3LDE1LjgwNDI5ODEgMTguOTcyMjI0LDE1LjYxOTM2ODcgMTguNTgzMzMzMywxNS4yNDk1MDQ2IEMxOC4xOTQ0NDI3LDE0Ljg3OTY0MDYgMTgsMTQuNDMwNTI1NSAxOCwxMy45MDIxNDkxIEMxOCwxMy4zNzM3NzI2IDE4LjE5NDQ0MjcsMTIuOTI0NjU3NSAxOC41ODMzMzMzLDEyLjU1NDc5MzUgQzE4Ljk3MjIyNCwxMi4xODQ5Mjk1IDE5LjQ0NDQ0MjcsMTIgMjAsMTIgQzIwLjU1NTU1NzMsMTIgMjEuMDI3Nzc2LDEyLjE4NDkyOTUgMjEuNDE2NjY2NywxMi41NTQ3OTM1IEMyMS44MDU1NTczLDEyLjkyNDY1NzUgMjIsMTMuMzczNzcyNiAyMiwxMy45MDIxNDkxIEMyMiwxNC40MzA1MjU1IDIxLjgwNTU1NzMsMTQuODc5NjQwNiAyMS40MTY2NjY3LDE1LjI0OTUwNDYgQzIxLjAyNzc3NiwxNS42MTkzNjg3IDIwLjU1NTU1NzMsMTUuODA0Mjk4MSAyMCwxNS44MDQyOTgxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9zdWNjZXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yMTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDIxMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25fc3VjY2VzcyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzEzQ0U2NiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy44MjU1ODE0LDE3LjE0ODQzNTcgTDE5LjAxNzQ0LDI1LjgyODEyMTMgQzE4LjkwMTE2MDksMjUuOTQyNzA4MyAxOC43NjU1MDMzLDI2IDE4LjYxMDQ2NywyNiBDMTguNDU1NDI3LDI2IDE4LjMxOTc2OTMsMjUuOTQyNzA4MyAxOC4yMDM0ODY1LDI1LjgyODEyMTMgTDE4LjAyOTA3MTYsMjUuNjU2MjUgTDEzLjE3NDQxODYsMjAuODQzNzUgQzEzLjA1ODEzOTUsMjAuNzI5MTYzIDEzLDIwLjU5NTQ4MzcgMTMsMjAuNDQyNzA0NyBDMTMsMjAuMjg5OTI5MyAxMy4wNTgxMzk1LDIwLjE1NjI1IDEzLjE3NDQxODYsMjAuMDQxNjY2NyBMMTQuMzY2Mjc3MiwxOC44NjcxODU3IEMxNC40ODI1NiwxOC43NTI2MDIzIDE0LjYxODIxNzcsMTguNjk1MzEwNyAxNC43NzMyNTc3LDE4LjY5NTMxMDcgQzE0LjkyODI5NCwxOC42OTUzMTA3IDE1LjA2Mzk1MTYsMTguNzUyNjAyMyAxNS4xODAyMzA3LDE4Ljg2NzE4NTcgTDE4LjYxMDQ2NywyMi4yNzYwMzggTDI1LjgxOTc2OTMsMTUuMTcxODcxMyBDMjUuOTM2MDQ4NCwxNS4wNTcyODggMjYuMDcxNzA2LDE1IDI2LjIyNjc0MjMsMTUgQzI2LjM4MTc4MjMsMTUgMjYuNTE3NDQsMTUuMDU3Mjg4IDI2LjYzMzcyMjgsMTUuMTcxODcxMyBMMjcuODI1NTgxNCwxNi4zNDYzNTIzIEMyNy45NDE4NjA1LDE2LjQ2MDkzNTcgMjgsMTYuNTk0NjE1IDI4LDE2Ljc0NzM5NCBDMjgsMTYuOTAwMTczIDI3Ljk0MTg2MDUsMTcuMDMzODUyMyAyNy44MjU1ODE0LDE3LjE0ODQzNTcgTDI3LjgyNTU4MTQsMTcuMTQ4NDM1NyBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl93YXJuaW5nPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yNzIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMjcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl93YXJuaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjRjdCQTJBIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjYxNTM4NDYsMjYuNTQzMjA5OSBDMjEuNjE1Mzg0NiwyNi45NDc4NzUxIDIxLjQ1ODMzNDgsMjcuMjkxODM2OCAyMS4xNDQyMzA4LDI3LjU3NTEwMjkgQzIwLjgzMDEyNjgsMjcuODU4MzY4OSAyMC40NDg3MTk0LDI4IDIwLDI4IEMxOS41NTEyODA2LDI4IDE5LjE2OTg3MzIsMjcuODU4MzY4OSAxOC44NTU3NjkyLDI3LjU3NTEwMjkgQzE4LjU0MTY2NTIsMjcuMjkxODM2OCAxOC4zODQ2MTU0LDI2Ljk0Nzg3NTEgMTguMzg0NjE1NCwyNi41NDMyMDk5IEwxOC4zODQ2MTU0LDE5Ljc0NDg1NiBDMTguMzg0NjE1NCwxOS4zNDAxOTA3IDE4LjU0MTY2NTIsMTguOTk2MjI5IDE4Ljg1NTc2OTIsMTguNzEyOTYzIEMxOS4xNjk4NzMyLDE4LjQyOTY5NjkgMTkuNTUxMjgwNiwxOC4yODgwNjU4IDIwLDE4LjI4ODA2NTggQzIwLjQ0ODcxOTQsMTguMjg4MDY1OCAyMC44MzAxMjY4LDE4LjQyOTY5NjkgMjEuMTQ0MjMwOCwxOC43MTI5NjMgQzIxLjQ1ODMzNDgsMTguOTk2MjI5IDIxLjYxNTM4NDYsMTkuMzQwMTkwNyAyMS42MTUzODQ2LDE5Ljc0NDg1NiBMMjEuNjE1Mzg0NiwyNi41NDMyMDk5IFogTTIwLDE1LjgwNDI5ODEgQzE5LjQ0NDQ0MjcsMTUuODA0Mjk4MSAxOC45NzIyMjQsMTUuNjE5MzY4NyAxOC41ODMzMzMzLDE1LjI0OTUwNDYgQzE4LjE5NDQ0MjcsMTQuODc5NjQwNiAxOCwxNC40MzA1MjU1IDE4LDEzLjkwMjE0OTEgQzE4LDEzLjM3Mzc3MjYgMTguMTk0NDQyNywxMi45MjQ2NTc1IDE4LjU4MzMzMzMsMTIuNTU0NzkzNSBDMTguOTcyMjI0LDEyLjE4NDkyOTUgMTkuNDQ0NDQyNywxMiAyMCwxMiBDMjAuNTU1NTU3MywxMiAyMS4wMjc3NzYsMTIuMTg0OTI5NSAyMS40MTY2NjY3LDEyLjU1NDc5MzUgQzIxLjgwNTU1NzMsMTIuOTI0NjU3NSAyMiwxMy4zNzM3NzI2IDIyLDEzLjkwMjE0OTEgQzIyLDE0LjQzMDUyNTUgMjEuODA1NTU3MywxNC44Nzk2NDA2IDIxLjQxNjY2NjcsMTUuMjQ5NTA0NiBDMjEuMDI3Nzc2LDE1LjYxOTM2ODcgMjAuNTU1NTU3MywxNS44MDQyOTgxIDIwLDE1LjgwNDI5ODEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMjAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-message",class:e.customClass,on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?e._e():i("img",{staticClass:"el-message__img",attrs:{src:e.typeImg,alt:""}}),i("div",{staticClass:"el-message__group",class:{"is-with-icon":e.iconClass}},[i("p",[e.iconClass?i("i",{staticClass:"el-message__icon",class:e.iconClass}):e._e(),e._v(e._s(e.message))]),e.showClose?i("div",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(917),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(918),i(919),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||e.isDot),expression:"!hidden && ( content || isDot )"}],staticClass:"el-badge__content",class:{"is-fixed":e.$slots.default,"is-dot":e.isDot},domProps:{textContent:e._s(e.content)}})])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(921),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(922),i(923),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElCard",props:["header","bodyStyle"]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(925),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(926),i(927),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71);t.default={name:"ElRate",data:function(){return{classMap:{},colorMap:{},pointerAtLeftHalf:!1,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},textTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return e=this.disabled?this.textTemplate.replace(/\{\s*value\s*\}/,this.value):this.texts[Math.ceil(this.currentValue)-1]},decimalStyle:function(){var e="";return this.disabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.disabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e}},watch:{value:function(e){this.$emit("change",e),this.currentValue=e}},methods:{getValueFromMap:function(e,t){var i="";return i=e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.disabled&&this.valueDecimal>0&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&(e-.5).toFixed(1)===this.currentValue.toFixed(1);return t||i},getIconStyle:function(e){var t=this.disabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.disabled||(this.allowHalf&&this.pointerAtLeftHalf?this.$emit("input",this.currentValue):this.$emit("input",e))},setCurrentValue:function(e,t){if(!this.disabled){if(this.allowHalf){var i=t.target;(0,n.hasClass)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),(0,n.hasClass)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.disabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0),this.classMap={lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass},this.colorMap={lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-rate"},[e._l(e.max,function(t){return i("span",{staticClass:"el-rate__item",style:{cursor:e.disabled?"auto":"pointer"},on:{mousemove:function(i){e.setCurrentValue(t,i)},mouseleave:e.resetCurrentValue,click:function(i){e.selectValue(t)}}},[i("i",{staticClass:"el-rate__icon",class:[e.classes[t-1],{hover:e.hoverIndex===t}],style:e.getIconStyle(t)},[e.showDecimalIcon(t)?i("i",{staticClass:"el-rate__decimal",class:e.decimalIconClass,style:e.decimalStyle}):e._e()])])}),e.showText?i("span",{staticClass:"el-rate__text",style:{color:e.textColor}},[e._v(e._s(e.text))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(929),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(930),i(931),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,
+t.default={name:"ElSteps",props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,center:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-steps",class:["is-"+e.direction,e.center?"is-center":""]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(933),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(934),i(935),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,style:{},lineStyle:{},mainOffset:0,isLast:!1,internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},computed:{currentStatus:function(){return this.status||this.internalStatus}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?t=50:"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i},adjustPosition:function(){this.style={},this.$parent.stepOffset=this.$el.getBoundingClientRect().width/(this.$parent.steps.length-1)}},mounted:function(){var e=this,t=this.$parent,i=t.center,n=t.steps.length,s=this.isLast=t.steps[t.steps.length-1]===this,o="number"==typeof t.space?t.space+"px":t.space?t.space:100/(i?n-1:n)+"%";"horizontal"===t.direction?(this.style={width:o},t.alignCenter&&(this.mainOffset=-this.$refs.title.getBoundingClientRect().width/2+16+"px"),i&&s&&this.adjustPosition()):s||(this.style={height:o});var a=this.$watch("index",function(t){e.$watch("$parent.active",e.updateStatus,{immediate:!0}),a()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:["is-"+e.$parent.direction],style:[e.style,e.isLast?"":{marginRight:-e.$parent.stepOffset+"px"}]},[i("div",{staticClass:"el-step__head",class:["is-"+e.currentStatus,{"is-text":!e.icon}]},[i("div",{staticClass:"el-step__line",class:["is-"+e.$parent.direction,{"is-icon":e.icon}],style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("span",{staticClass:"el-step__icon"},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{class:["el-icon-"+e.icon]}):i("div",[e._v(e._s(e.index+1))])]):i("i",{class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main",style:{marginLeft:e.mainOffset}},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(937),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(938),i(939),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(31),o=n(s),a=i(635),r=n(a),l=i(632);t.default={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},watch:{items:function(e){e.length>0&&this.setActiveItem(0)},activeIndex:function(e,t){this.resetItemPosition(),this.$emit("change",e,t)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(e){var t=this;this.items.forEach(function(i,n){e===t.itemInStage(i,n)&&(i.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(){var e=this;this.items.forEach(function(t,i){t.translateItem(i,e.activeIndex)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.activeIndex=0},pauseTimer:function(){clearInterval(this.timer)},startTimer:function(){this.interval<=0||!this.autoplay||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(e){if("string"==typeof e){var t=this.items.filter(function(t){return t.name===e});t.length>0&&(e=this.items.indexOf(t[0]))}if(e=Number(e),!isNaN(e)&&e===Math.floor(e)){var i=this.items.length;e<0?this.activeIndex=i-1:e>=i?this.activeIndex=0:this.activeIndex=e}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var e=this;this.handleItemChange=(0,r.default)(100,this.updateItems),this.throttledArrowClick=(0,o.default)(300,!0,function(t){e.setActiveItem(t)}),this.throttledIndicatorHover=(0,o.default)(300,function(t){e.handleIndicatorHover(t)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){(0,l.addResizeListener)(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&e.initialIndex>=0&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&(0,l.removeResizeListener)(this.$el,this.resetItemPosition)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===e.type},on:{mouseenter:function(t){t.stopPropagation(),e.handleMouseEnter(t)},mouseleave:function(t){t.stopPropagation(),e.handleMouseLeave(t)}}},[i("div",{staticClass:"el-carousel__container",style:{height:e.height}},[i("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",on:{mouseenter:function(t){e.handleButtonEnter("left")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex-1)}}},[i("i",{staticClass:"el-icon-arrow-left"})]):e._e()]),i("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",on:{mouseenter:function(t){e.handleButtonEnter("right")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex+1)}}},[i("i",{staticClass:"el-icon-arrow-right"})]):e._e()]),e._t("default")],2),"none"!==e.indicatorPosition?i("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--outside":"outside"===e.indicatorPosition||"card"===e.type}},e._l(e.items,function(t,n){return i("li",{staticClass:"el-carousel__indicator",class:{"is-active":n===e.activeIndex},on:{mouseenter:function(t){e.throttledIndicatorHover(n)},click:function(t){t.stopPropagation(),e.handleIndicatorClick(n)}}},[i("button",{staticClass:"el-carousel__button"})])})):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(941),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(942),i(943),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i=.83;t.default={name:"ElCarouselItem",props:{name:String},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&t-e>=i/2?i+1:e>t+1&&e-t>=i/2?-2:e},calculateTranslate:function(e,t,n){return this.inStage?n*((2-i)*(e-t)+1)/4:e<t?-(1+i)*n/4:(3+i)*n/4},translateItem:function(e,t){var n=this.$parent.$el.offsetWidth,s=this.$parent.items.length;e!==t&&s>2&&(e=this.processIndex(e,t,s)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:i):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.handleItemChange()},destroyed:function(){this.$parent&&this.$parent.handleItemChange()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(945),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(946),i(947),null,null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);i>-1?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(949),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(950),i(951),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);t.default={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[o.default],data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0}},props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return this.$parent.activeNames.indexOf(this.name)>-1}},watch:{isActive:function(e){}},methods:{handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this)}},mounted:function(){}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse-item",class:{"is-active":e.isActive}},[i("div",{staticClass:"el-collapse-item__header",on:{click:e.handleHeaderClick}},[i("i",{staticClass:"el-collapse-item__header__arrow el-icon-arrow-right"}),e._t("title",[e._v(e._s(e.title))])],2),i("el-collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap"},[i("div",{staticClass:"el-collapse-item__content"},[e._t("default")],2)])])],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(953),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(954),i(958),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(955),r=n(a),l=i(609),u=n(l),c=i(617),d=n(c),h=i(636),f=n(h),p=i(607),m=n(p),v=i(608),g=n(v),y=i(15),b=i(635),_=n(b),C={props:{placement:{type:String,default:"bottom-start"},appendToBody:d.default.props.appendToBody,offset:d.default.props.offset,boundariesPadding:d.default.props.boundariesPadding,popperOptions:d.default.props.popperOptions},methods:d.default.methods,data:d.default.data,beforeDestroy:d.default.beforeDestroy};t.default={name:"ElCascader",directives:{Clickoutside:f.default},mixins:[C,m.default,g.default],components:{ElInput:u.default},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},placeholder:{type:String,default:function(){return(0,y.t)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300}},data:function(){return{currentValue:this.value,menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},currentLabels:function(){var e=this,t=this.options,i=[];return this.currentValue.forEach(function(n){var s=t&&t.filter(function(t){return t[e.valueKey]===n})[0];s&&(i.push(s[e.labelKey]),t=s[e.childrenKey])}),i}},watch:{menuVisible:function(e){e?this.showMenu():this.hideMenu()},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new o.default(r.default).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.popperElm=this.menu.$el,this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy)},showMenu:function(){var e=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(t){e.updatePopper(),e.menu.inputWidth=e.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handlePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t&&(this.menuVisible=!1)},handleInputChange:function(e){var t=this;if(this.menuVisible){var i=this.flatOptions;if(!e)return void(this.menu.options=this.options);var n=i.filter(function(i){return i.some(function(i){return new RegExp(e,"i").test(i[t.labelKey])})});n=n.length>0?n.map(function(i){return{__IS__FLAT__OPTIONS:!0,value:i.map(function(e){return e[t.valueKey]}),label:t.renderFilteredOptionLabel(e,i)}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n}},renderFilteredOptionLabel:function(e,t){var i=this;return t.map(function(t,n){var s=t[i.labelKey],o=s.toLowerCase().indexOf(e.toLowerCase()),a=s.slice(o,e.length+o),r=o>-1?i.highlightKeyword(s,a):s;return 0===n?r:[" / ",r]})},highlightKeyword:function(e,t){var i=this,n=this._c;return e.split(t).map(function(e,s){return 0===s?e:[n("span",{class:{"el-cascader-menu__item__keyword":!0}},[i._v(t)]),e]})},flattenOptions:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=[];return e.forEach(function(e){var s=i.concat(e);e[t.childrenKey]?(t.changeOnSelect&&n.push(s),n=n.concat(t.flattenOptions(e[t.childrenKey],s))):n.push(s)}),n},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){this.menuVisible=!1},handleClick:function(){if(!this.disabled)return this.filterable?(this.menuVisible=!0,void this.$refs.input.$refs.input.focus()):void(this.menuVisible=!this.menuVisible)}},created:function(){var e=this;this.debouncedInputChange=(0,_.default)(this.debounce,function(t){e.handleInputChange(t)})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}}},function(e,t,i){var n=i(13)(i(956),null,null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(957),o=n(s);t.default={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:""}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{cache:!1,get:function(){var e=this,t=this.activeValue,i=["label","value","children","disabled"],n=function t(n){n.forEach(function(n){n.__IS__FLAT__OPTIONS||(i.forEach(function(t){var i=n[e.props[t]||t];i&&(n[t]=i)}),Array.isArray(n.children)&&t(n.children))})},s=function e(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],s=n.length;n[s]=i;var o=t[s];return o&&(i=i.filter(function(e){return e.value===o})[0],i&&i.children&&e(i.children,n)),n};return n(this.options),s(this.options)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue)},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue,!1):this.$emit("activeItemChange",this.activeValue)}},render:function(e){var t=this,i=this.activeValue,n=this.activeOptions,s=this.visible,a=this.expandTrigger,r=this.popperClass,l=this._l(n,function(n,s){var r=!1,l=t._l(n,function(n){var l={on:{}};if(n.__IS__FLAT__OPTIONS&&(r=!0),!n.disabled)if(n.children){var u={click:"click",hover:"mouseenter"}[a];l.on[u]=function(){t.activeItem(n,s)}}else l.on.click=function(){t.select(n,s)};return e("li",(0,o.default)([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":n.children,"is-active":n.value===i[s],"is-disabled":n.disabled}},l]),[n.label])}),u={};return r&&(u.minWidth=t.inputWidth+"px"),e("ul",{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":r},style:u},[l])});return e("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":this.handleMenuLeave}},[e("div",{directives:[{name:"show",value:s}],class:["el-cascader-menus",r]},[l])])}}},function(e,t){function i(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}var n=/^(attrs|props|on|nativeOn|class|style|hook)$/;e.exports=function(e){return e.reduce(function(e,t){var s,o,a,r,l;for(a in t)if(s=e[a],o=t[a],s&&n.test(a))if("class"===a&&("string"==typeof s&&(l=s,e[a]=s={},s[l]=!0),"string"==typeof o&&(l=o,t[a]=o={},o[l]=!0)),"on"===a||"nativeOn"===a||"hook"===a)for(r in o)s[r]=i(s[r],o[r]);else if(Array.isArray(s))e[a]=s.concat(o);else if(Array.isArray(o))e[a]=[s].concat(o);else for(r in o)s[r]=o[r];else e[a]=t[a];return e},{})}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":e.menuVisible,"is-disabled":e.disabled},e.size?"el-cascader--"+e.size:""],on:{click:e.handleClick,mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}}},[i("el-input",{ref:"input",attrs:{readonly:!e.filterable,placeholder:e.currentLabels.length?void 0:e.placeholder,"validate-event":!1,size:e.size,disabled:e.disabled},on:{change:e.debouncedInputChange},model:{value:e.inputValue,callback:function(t){e.inputValue=t},expression:"inputValue"}},[i("template",{slot:"icon"},[e.clearable&&e.inputHover&&e.currentLabels.length?i("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:e.clearValue}}):i("i",{key:"2",staticClass:"el-input__icon el-icon-caret-bottom",class:{"is-reverse":e.menuVisible}})])],2),i("span",{directives:[{name:"show",rawName:"v-show",value:""===e.inputValue,expression:"inputValue === ''"}],staticClass:"el-cascader__label"},[e.showAllLevels?[e._l(e.currentLabels,function(t,n){return[e._v("\n        "+e._s(t)+"\n        "),n<e.currentLabels.length-1?i("span",[e._v(" / ")]):e._e()]})]:[e._v("\n      "+e._s(e.currentLabels[e.currentLabels.length-1])+"\n    ")]],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(960),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(961),i(976),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(962),o=n(s),a=i(963),r=n(a),l=i(636),u=n(l);t.default={name:"ElColorPicker",props:{value:{type:String},showAlpha:{type:Boolean},colorFormat:{type:String}},directives:{Clickoutside:u.default},computed:{displayedColor:function(){if(this.value||this.showPanelColor){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return this.showAlpha?"rgba("+t+", "+i+", "+n+", "+this.color.get("alpha")/100+")":"rgb("+t+", "+i+", "+n+")"}return"transparent"}},watch:{value:function(e){e&&e!==this.color.value&&this.color.fromString(e)},color:{deep:!0,handler:function(){this.showPanelColor=!0}}},methods:{confirmValue:function(e){this.$emit("input",this.color.value),this.$emit("change",this.color.value),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var e=this;this.$nextTick(function(t){e.value?e.color.fromString(e.value):e.showPanelColor=!1})}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){var e=new o.default({enableAlpha:this.showAlpha,format:this.colorFormat});return{color:e,showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:r.default}}},function(e,t){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},o=function(e){return"string"==typeof e&&e.indexOf(".")!==-1&&1===parseFloat(e)},a=function(e){return"string"==typeof e&&e.indexOf("%")!==-1},r=function(e,t){o(e)&&(e="100%");var i=a(e);return e=Math.min(t,Math.max(0,parseFloat(e))),i&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},l={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},u=function(e){var t=e.r,i=e.g,n=e.b,s=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(l[t]||t)+(l[i]||i)};return isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+s(t)+s(i)+s(n)},c={A:10,B:11,C:12,D:13,E:14,F:15},d=function(e){return 2===e.length?16*(c[e[0].toUpperCase()]||+e[0])+(c[e[1].toUpperCase()]||+e[1]):c[e[1].toUpperCase()]||+e[1]},h=function(e,t,i){t/=100,i/=100;var n=t,s=Math.max(i,.01),o=void 0,a=void 0;return i*=2,t*=i<=1?i:2-i,n*=s<=1?s:2-s,a=(i+t)/2,o=0===i?2*n/(s+n):2*t/(i+t),{h:e,s:100*o,v:100*a}},f=function(e,t,i){e=r(e,255),t=r(t,255),i=r(i,255);var n=Math.max(e,t,i),s=Math.min(e,t,i),o=void 0,a=void 0,l=n,u=n-s;if(a=0===n?0:u/n,n===s)o=0;else{switch(n){case e:o=(t-i)/u+(t<i?6:0);break;case t:o=(i-e)/u+2;break;case i:o=(e-t)/u+4}o/=6}return{h:Math.round(360*o),s:Math.round(100*a),v:Math.round(100*l)}},p=function(e,t,i){e=6*r(e,360),t=r(t,100),i=r(i,100);var n=Math.floor(e),s=e-n,o=i*(1-t),a=i*(1-s*t),l=i*(1-(1-s)*t),u=n%6,c=[i,a,o,o,l,i][u],d=[l,i,i,a,o,o][u],h=[o,o,l,i,i,a][u];return{r:Math.round(255*c),g:Math.round(255*d),b:Math.round(255*h)}},m=function(){function e(t){i(this,e),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",t=t||{};for(var n in t)t.hasOwnProperty(n)&&(this[n]=t[n]);this.doOnChange()}return e.prototype.set=function(e,t){if(1!==arguments.length||"object"!==("undefined"==typeof e?"undefined":n(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},e.prototype.get=function(e){return this["_"+e]},e.prototype.toRgb=function(){return p(this._hue,this._saturation,this._value)},e.prototype.fromString=function(e){var t=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var i=function(e,i,n){t._hue=e,t._saturation=i,t._value=n,t.doOnChange()};if(e.indexOf("hsl")!==-1){var n=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===n.length&&(this._alpha=Math.floor(100*parseFloat(n[3]))),n.length>=3){var s=h(n[0],n[1],n[2]),o=s.h,a=s.s,r=s.v;i(o,a,r)}}else if(e.indexOf("hsv")!==-1){var l=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});4===l.length&&(this._alpha=Math.floor(100*parseFloat(l[3]))),l.length>=3&&i(l[0],l[1],l[2])}else if(e.indexOf("rgb")!==-1){var u=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===u.length&&(this._alpha=Math.floor(100*parseFloat(u[3]))),u.length>=3){var c=f(u[0],u[1],u[2]),p=c.h,m=c.s,v=c.v;i(p,m,v)}}else if(e.indexOf("#")!==-1){var g=e.replace("#","").trim(),y=void 0,b=void 0,_=void 0;3===g.length?(y=d(g[0]+g[0]),b=d(g[1]+g[1]),_=d(g[2]+g[2])):6===g.length&&(y=d(g.substring(0,2)),b=d(g.substring(2,4)),_=d(g.substring(4)));var C=f(y,b,_),x=C.h,w=C.s,M=C.v;i(x,w,M)}},e.prototype.doOnChange=function(){var e=this._hue,t=this._saturation,i=this._value,n=this._alpha,o=this.format;if(this.enableAlpha)switch(o){case"hsl":var a=s(e,t/100,i/100);this.value="hsla("+e+", "+Math.round(100*a[1])+"%, "+Math.round(100*a[2])+"%, "+n/100+")";break;case"hsv":this.value="hsva("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%, "+n/100+")";break;default:var r=p(e,t,i),l=r.r,c=r.g,d=r.b;this.value="rgba("+l+", "+c+", "+d+", "+n/100+")"}else switch(o){case"hsl":var h=s(e,t/100,i/100);this.value="hsl("+e+", "+Math.round(100*h[1])+"%, "+Math.round(100*h[2])+"%)";break;case"hsv":this.value="hsv("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%)";break;case"rgb":var f=p(e,t,i),m=f.r,v=f.g,g=f.b;this.value="rgb("+m+", "+v+", "+g+")";break;default:this.value=u(p(e,t,i))}},e}();t.default=m},function(e,t,i){var n=i(13)(i(964),i(975),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(965),o=n(s),a=i(969),r=n(a),l=i(972),u=n(l),c=i(617),d=n(c),h=i(608),f=n(h);t.default={name:"el-color-picker-dropdown",mixins:[d.default,f.default],components:{SvPanel:o.default,HueSlider:r.default,AlphaSlider:u.default},props:{color:{required:!0},showAlpha:Boolean},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var t=this;e===!0&&this.$nextTick(function(){var e=t.$refs,i=e.sl,n=e.hue,s=e.alpha;i&&i.update(),n&&n.update(),s&&s.update()})}}}},function(e,t,i){var n=i(13)(i(966),i(968),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(967),o=n(s);t.default={name:"el-sl-panel",props:{color:{required:!0}},watch:{"color.value":function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.getBoundingClientRect(),s=n.width,o=n.height;o||(o=3*s/4),this.cursorLeft=e*s/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el,i=t.getBoundingClientRect(),n=e.clientX-i.left,s=e.clientY-i.top;n=Math.max(0,n),n=Math.min(n,i.width),s=Math.max(0,s),s=Math.min(s,i.height),this.cursorLeft=n,this.cursorTop=s,this.color.set({saturation:n/i.width*100,value:100-s/i.height*100})}},mounted:function(){var e=this;(0,o.default)(this.$el,{drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e,t){if(!o.default.prototype.$isServer){var i=function(e){t.drag&&t.drag(e)},n=function e(n){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,a=!1,t.end&&t.end(n)};e.addEventListener("mousedown",function(e){a||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",i),document.addEventListener("mouseup",n),a=!0,t.start&&t.start(e))})}};var s=i(2),o=n(s),a=!1},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-svpanel",style:{backgroundColor:e.background}},[i("div",{staticClass:"el-color-svpanel__white"}),i("div",{
+staticClass:"el-color-svpanel__black"}),i("div",{staticClass:"el-color-svpanel__cursor",style:{top:e.cursorTop+"px",left:e.cursorLeft+"px"}},[i("div")])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(970),i(971),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(967),o=n(s);t.default={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},watch:{"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var o=e.clientX-t.left;o=Math.min(o,t.width-i.offsetWidth/2),o=Math.max(i.offsetWidth/2,o),n=Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(973),i(974),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(967),o=n(s);t.default={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:e.background},on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:e.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:e.color}})],1),e.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:e.color}}):e._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[e._v(e._s(e.currentColor))]),i("a",{staticClass:"el-color-dropdown__link-btn",attrs:{href:"JavaScript:"},on:{click:function(t){e.$emit("clear")}}},[e._v(e._s(e.t("el.colorpicker.clear")))]),i("button",{staticClass:"el-color-dropdown__btn",on:{click:e.confirmValue}},[e._v(e._s(e.t("el.colorpicker.confirm")))])])],1)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.hide,expression:"hide"}],staticClass:"el-color-picker"},[i("div",{staticClass:"el-color-picker__trigger",on:{click:function(t){e.showPicker=!e.showPicker}}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":e.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:e.displayedColor}}),e.value||e.showPanelColor?e._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{staticClass:"el-color-picker__icon el-icon-caret-bottom"})]),i("picker-dropdown",{ref:"dropdown",staticClass:"el-color-picker__panel",attrs:{color:e.color,"show-alpha":e.showAlpha},on:{pick:e.confirmValue,clear:e.clearValue},model:{value:e.showPicker,callback:function(t){e.showPicker=t},expression:"showPicker"}})],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(978),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(979),i(983),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(653),o=n(s),a=i(607),r=n(a),l=i(608),u=n(l),c=i(980),d=n(c);t.default={name:"ElTransfer",mixins:[r.default,u.default],components:{TransferPanel:d.default,ElButton:o.default},props:{data:{type:Array,default:function(){return[]}},titles:{type:Array,default:function(){return[]}},buttonTexts:{type:Array,default:function(){return[]}},filterPlaceholder:{type:String,default:""},filterMethod:Function,leftDefaultChecked:{type:Array,default:function(){return[]}},rightDefaultChecked:{type:Array,default:function(){return[]}},renderContent:Function,value:{type:Array,default:function(){return[]}},footerFormat:{type:Object,default:function(){return{}}},filterable:Boolean,props:{type:Object,default:function(){return{label:"label",key:"key",disabled:"disabled"}}}},data:function(){return{leftChecked:[],rightChecked:[]}},computed:{sourceData:function(){var e=this;return this.data.filter(function(t){return e.value.indexOf(t[e.props.key])===-1})},targetData:function(){var e=this;return this.data.filter(function(t){return e.value.indexOf(t[e.props.key])>-1})}},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",e)}},methods:{onSourceCheckedChange:function(e){this.leftChecked=e},onTargetCheckedChange:function(e){this.rightChecked=e},addToLeft:function(){var e=this.value.slice();this.rightChecked.forEach(function(t){var i=e.indexOf(t);i>-1&&e.splice(i,1)}),this.$emit("input",e),this.$emit("change",e,"left",this.rightChecked)},addToRight:function(){var e=this,t=this.value.slice();this.leftChecked.forEach(function(i){e.value.indexOf(i)===-1&&(t=t.concat(i))}),this.$emit("input",t),this.$emit("change",t,"right",this.leftChecked)}}}},function(e,t,i){var n=i(13)(i(981),i(982),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(710),o=n(s),a=i(702),r=n(a),l=i(609),u=n(l),c=i(608),d=n(c);t.default={mixins:[d.default],name:"ElTransferPanel",componentName:"ElTransferPanel",components:{ElCheckboxGroup:o.default,ElCheckbox:r.default,ElInput:u.default,OptionContent:{props:{option:Object},render:function(e){var t=function e(t){return"ElTransferPanel"===t.$options.componentName?t:t.$parent?e(t.$parent):t},i=t(this);return i.renderContent?i.renderContent(e,this.option):e("span",null,[this.option[i.labelProp]||this.option[i.keyProp]])}}},props:{data:{type:Array,default:function(){return[]}},renderContent:Function,placeholder:String,title:String,filterable:Boolean,format:Object,filterMethod:Function,defaultChecked:Array,props:Object},data:function(){return{checked:[],allChecked:!1,query:"",inputHover:!1}},watch:{checked:function(e){this.updateAllChecked(),this.$emit("checked-change",e)},data:function(){var e=this,t=[],i=this.filteredData.map(function(t){return t[e.keyProp]});this.checked.forEach(function(e){i.indexOf(e)>-1&&t.push(e)}),this.checked=t},checkableData:function(){this.updateAllChecked()},defaultChecked:{immediate:!0,handler:function(e,t){var i=this;if(!t||e.length!==t.length||!e.every(function(e){return t.indexOf(e)>-1})){var n=[],s=this.checkableData.map(function(e){return e[i.keyProp]});e.forEach(function(e){s.indexOf(e)>-1&&n.push(e)}),this.checked=n}}}},computed:{filteredData:function(){var e=this;return this.data.filter(function(t){if("function"==typeof e.filterMethod)return e.filterMethod(e.query,t);var i=t[e.labelProp]||t[e.keyProp].toString();return i.toLowerCase().indexOf(e.query.toLowerCase())>-1})},checkableData:function(){var e=this;return this.filteredData.filter(function(t){return!t[e.disabledProp]})},checkedSummary:function(){var e=this.checked.length,t=this.data.length,i=this.format,n=i.noChecked,s=i.hasChecked;return n&&s?e>0?s.replace(/\${checked}/g,e).replace(/\${total}/g,t):n.replace(/\${total}/g,t):e>0?this.t("el.transfer.hasCheckedFormat",{total:t,checked:e}):this.t("el.transfer.noCheckedFormat",{total:t})},isIndeterminate:function(){var e=this.checked.length;return e>0&&e<this.checkableData.length},hasNoMatch:function(){return this.query.length>0&&0===this.filteredData.length},inputIcon:function(){return this.query.length>0&&this.inputHover?"circle-close":"search"},labelProp:function(){return this.props.label||"label"},keyProp:function(){return this.props.key||"key"},disabledProp:function(){return this.props.disabled||"disabled"}},methods:{updateAllChecked:function(){var e=this,t=this.checkableData.map(function(t){return t[e.keyProp]});this.allChecked=t.length>0&&t.every(function(t){return e.checked.indexOf(t)>-1})},handleAllCheckedChange:function(e){var t=this;this.checked=e.target.checked?this.checkableData.map(function(e){return e[t.keyProp]}):[]},clearQuery:function(){"circle-close"===this.inputIcon&&(this.query="")}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer-panel"},[i("p",{staticClass:"el-transfer-panel__header"},[e._v(e._s(e.title))]),i("div",{staticClass:"el-transfer-panel__body"},[e.filterable?i("el-input",{staticClass:"el-transfer-panel__filter",attrs:{size:"small",placeholder:e.placeholder,icon:e.inputIcon},on:{click:e.clearQuery},nativeOn:{mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}},model:{value:e.query,callback:function(t){e.query=t},expression:"query"}}):e._e(),i("el-checkbox-group",{directives:[{name:"show",rawName:"v-show",value:!e.hasNoMatch&&e.data.length>0,expression:"!hasNoMatch && data.length > 0"}],staticClass:"el-transfer-panel__list",class:{"is-filterable":e.filterable},model:{value:e.checked,callback:function(t){e.checked=t},expression:"checked"}},e._l(e.filteredData,function(t){return i("el-checkbox",{key:t[e.keyProp],staticClass:"el-transfer-panel__item",attrs:{label:t[e.keyProp],disabled:t[e.disabledProp]}},[i("option-content",{attrs:{option:t}})],1)})),i("p",{directives:[{name:"show",rawName:"v-show",value:e.hasNoMatch,expression:"hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noMatch")))]),i("p",{directives:[{name:"show",rawName:"v-show",value:0===e.data.length&&!e.hasNoMatch,expression:"data.length === 0 && !hasNoMatch"}],staticClass:"el-transfer-panel__empty"},[e._v(e._s(e.t("el.transfer.noData")))])],1),i("p",{staticClass:"el-transfer-panel__footer"},[i("el-checkbox",{attrs:{indeterminate:e.isIndeterminate},on:{change:e.handleAllCheckedChange},model:{value:e.allChecked,callback:function(t){e.allChecked=t},expression:"allChecked"}},[e._v(e._s(e.checkedSummary))]),e._t("default")],2)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-transfer"},[i("transfer-panel",{attrs:{filterable:e.filterable,"filter-method":e.filterMethod,data:e.sourceData,"render-content":e.renderContent,title:e.titles[0]||e.t("el.transfer.titles.0"),format:e.footerFormat,"default-checked":e.leftDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder"),props:e.props},on:{"checked-change":e.onSourceCheckedChange}},[e._t("left-footer")],2),i("div",{staticClass:"el-transfer__buttons"},[i("el-button",{attrs:{type:"primary",size:"small",disabled:0===e.rightChecked.length},nativeOn:{click:function(t){e.addToLeft(t)}}},[i("i",{staticClass:"el-icon-arrow-left"}),void 0!==e.buttonTexts[0]?i("span",[e._v(e._s(e.buttonTexts[0]))]):e._e()]),i("el-button",{attrs:{type:"primary",size:"small",disabled:0===e.leftChecked.length},nativeOn:{click:function(t){e.addToRight(t)}}},[void 0!==e.buttonTexts[1]?i("span",[e._v(e._s(e.buttonTexts[1]))]):e._e(),i("i",{staticClass:"el-icon-arrow-right"})])],1),i("transfer-panel",{attrs:{filterable:e.filterable,"filter-method":e.filterMethod,data:e.targetData,"render-content":e.renderContent,title:e.titles[1]||e.t("el.transfer.titles.1"),format:e.footerFormat,"default-checked":e.rightDefaultChecked,placeholder:e.filterPlaceholder||e.t("el.transfer.filterPlaceholder"),props:e.props},on:{"checked-change":e.onTargetCheckedChange}},[e._t("right-footer")],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var s=i(71),o=function(){function e(){n(this,e)}return e.prototype.beforeEnter=function(e){(0,s.addClass)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height=e.scrollHeight+"px",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},e.prototype.afterEnter=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&((0,s.addClass)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}();t.default={name:"ElCollapseTransition",functional:!0,render:function(e,t){var i=t.children,n={on:new o};return e("transition",n,i)}}}]);
\ No newline at end of file
diff --git a/element-ui.b8cc43b.js b/element-ui.b8cc43b.js
deleted file mode 100644
index ef7d5be6f..000000000
--- a/element-ui.b8cc43b.js
+++ /dev/null
@@ -1,12 +0,0 @@
-webpackJsonp([1,2],[function(e,t,i){e.exports=i(578)},,function(e,t){e.exports=Vue},,,,,,,,,,,function(e,t){e.exports=function(e,t,i,n){var s,o=e=e||{},a=typeof e.default;"object"!==a&&"function"!==a||(s=e,o=e.default);var r="function"==typeof o?o.options:o;if(t&&(r.render=t.render,r.staticRenderFns=t.staticRenderFns),i&&(r._scopeId=i),n){var l=r.computed||(r.computed={});Object.keys(n).forEach(function(e){var t=n[e];l[e]=function(){return t}})}return{esModule:s,exports:o,options:r}}},,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.i18n=t.use=t.t=void 0;var s=i(16),o=n(s),a=i(2),r=n(a),l=i(17),u=n(l),c=i(18),d=n(c),h=(0,d.default)(r.default),f=o.default,p=!1,m=function(){var e=Object.getPrototypeOf(this||r.default).$t;if("function"==typeof e)return p||(p=!0,r.default.locale(r.default.config.lang,(0,u.default)(f,r.default.locale(r.default.config.lang)||{},{clone:!0}))),e.apply(this,arguments)},v=t.t=function(e,t){var i=m.apply(this,arguments);if(null!==i&&void 0!==i)return i;for(var n=e.split("."),s=f,o=0,a=n.length;o<a;o++){var r=n[o];if(i=s[r],o===a-1)return h(i,t);if(!i)return"";s=i}return""},g=t.use=function(e){f=e||f},y=t.i18n=function(e){m=e||m};t.default={use:g,t:v,i18n:y}},function(e,t){"use strict";t.__esModule=!0,t.default={el:{colorpicker:{confirm:"确定",clear:"清空"},datepicker:{now:"此刻",today:"今天",cancel:"取消",clear:"清空",confirm:"确定",selectDate:"选择日期",selectTime:"选择时间",startDate:"开始日期",startTime:"开始时间",endDate:"结束日期",endTime:"结束时间",year:"年",month1:"1 月",month2:"2 月",month3:"3 月",month4:"4 月",month5:"5 月",month6:"6 月",month7:"7 月",month8:"8 月",month9:"9 月",month10:"10 月",month11:"11 月",month12:"12 月",weeks:{sun:"日",mon:"一",tue:"二",wed:"三",thu:"四",fri:"五",sat:"六"},months:{jan:"一月",feb:"二月",mar:"三月",apr:"四月",may:"五月",jun:"六月",jul:"七月",aug:"八月",sep:"九月",oct:"十月",nov:"十一月",dec:"十二月"}},select:{loading:"加载中",noMatch:"无匹配数据",noData:"无数据",placeholder:"请选择"},cascader:{noMatch:"无匹配数据",placeholder:"请选择"},pagination:{goto:"前往",pagesize:"条/页",total:"共 {total} 条",pageClassifier:"页"},messagebox:{title:"提示",confirm:"确定",cancel:"取消",error:"输入的数据不合法!"},upload:{delete:"删除",preview:"查看图片",continue:"继续上传"},table:{emptyText:"暂无数据",confirmFilter:"筛选",resetFilter:"重置",clearFilter:"全部"},tree:{emptyText:"暂无数据"}}}},function(e,t,i){var n,s;!function(o,a){n=a,s="function"==typeof n?n.call(t,i,t,e):n,!(void 0!==s&&(e.exports=s))}(this,function(){function e(e){var t=e&&"object"==typeof e;return t&&"[object RegExp]"!==Object.prototype.toString.call(e)&&"[object Date]"!==Object.prototype.toString.call(e)}function t(e){return Array.isArray(e)?[]:{}}function i(i,n){var s=n&&n.clone===!0;return s&&e(i)?o(t(i),i,n):i}function n(t,n,s){var a=t.slice();return n.forEach(function(n,r){"undefined"==typeof a[r]?a[r]=i(n,s):e(n)?a[r]=o(t[r],n,s):t.indexOf(n)===-1&&a.push(i(n,s))}),a}function s(t,n,s){var a={};return e(t)&&Object.keys(t).forEach(function(e){a[e]=i(t[e],s)}),Object.keys(n).forEach(function(r){e(n[r])&&t[r]?a[r]=o(t[r],n[r],s):a[r]=i(n[r],s)}),a}function o(e,t,o){var a=Array.isArray(t),r=o||{arrayMerge:n},l=r.arrayMerge||n;return a?Array.isArray(e)?l(e,t,o):i(t,o):s(e,t,o)}return o.all=function(e,t){if(!Array.isArray(e)||e.length<2)throw new Error("first argument should be an array with at least two elements");return e.reduce(function(e,i){return o(e,i,t)})},o})},function(e,t,i){"use strict";t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default=function(e){function t(e){for(var t=arguments.length,i=Array(t>1?t-1:0),a=1;a<t;a++)i[a-1]=arguments[a];return 1===i.length&&"object"===n(i[0])&&(i=i[0]),i&&i.hasOwnProperty||(i={}),e.replace(o,function(t,n,o,a){var r=void 0;return"{"===e[a-1]&&"}"===e[a+t.length]?o:(r=(0,s.hasOwn)(i,o)?i[o]:null,null===r||void 0===r?"":r)})}return t};var s=i(19),o=/(%|)\{([0-9a-zA-Z_]+)\}/g},function(e,t){"use strict";function i(e,t){return o.call(e,t)}function n(e,t){for(var i in t)e[i]=t[i];return e}function s(e){for(var t={},i=0;i<e.length;i++)e[i]&&n(t,e[i]);return t}t.__esModule=!0,t.hasOwn=i,t.toObject=s;var o=Object.prototype.hasOwnProperty},,,,,,,,,,,,function(e,t){e.exports=function(e,t,i,n){function s(){function s(){a=Number(new Date),i.apply(l,c)}function r(){o=void 0}var l=this,u=Number(new Date)-a,c=arguments;n&&!o&&s(),o&&clearTimeout(o),void 0===n&&u>e?s():t!==!0&&(o=setTimeout(n?r:s,void 0===n?e-u:e))}var o,a=0;return"boolean"!=typeof t&&(n=i,i=t,t=void 0),s}},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!e||!t)return!1;if(t.indexOf(" ")!==-1)throw new Error("className should not contain space.");return e.classList?e.classList.contains(t):(" "+e.className+" ").indexOf(" "+t+" ")>-1}function o(e,t){if(e){for(var i=e.className,n=(t||"").split(" "),o=0,a=n.length;o<a;o++){var r=n[o];r&&(e.classList?e.classList.add(r):s(e,r)||(i+=" "+r))}e.classList||(e.className=i)}}function a(e,t){if(e&&t){for(var i=t.split(" "),n=" "+e.className+" ",o=0,a=i.length;o<a;o++){var r=i[o];r&&(e.classList?e.classList.remove(r):s(e,r)&&(n=n.replace(" "+r+" "," ")))}e.classList||(e.className=m(n))}}function r(e,t,i){if(e&&t)if("object"===("undefined"==typeof t?"undefined":l(t)))for(var n in t)t.hasOwnProperty(n)&&r(e,n,t[n]);else t=v(t),"opacity"===t&&p<9?e.style.filter=isNaN(i)?"":"alpha(opacity="+100*i+")":e.style[t]=i}t.__esModule=!0,t.getStyle=t.once=t.off=t.on=void 0;var l="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.hasClass=s,t.addClass=o,t.removeClass=a,t.setStyle=r;var u=i(2),c=n(u),d=c.default.prototype.$isServer,h=/([\:\-\_]+(.))/g,f=/^moz([A-Z])/,p=d?0:Number(document.documentMode),m=function(e){return(e||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},v=function(e){return e.replace(h,function(e,t,i,n){return n?i.toUpperCase():i}).replace(f,"Moz$1")},g=t.on=function(){return!d&&document.addEventListener?function(e,t,i){e&&t&&i&&e.addEventListener(t,i,!1)}:function(e,t,i){e&&t&&i&&e.attachEvent("on"+t,i)}}(),y=t.off=function(){return!d&&document.removeEventListener?function(e,t,i){e&&t&&e.removeEventListener(t,i,!1)}:function(e,t,i){e&&t&&e.detachEvent("on"+t,i)}}();t.once=function(e,t,i){var n=function n(){i&&i.apply(this,arguments),y(e,t,n)};g(e,t,n)},t.getStyle=p<9?function(e,t){if(!d){if(!e||!t)return null;t=v(t),"float"===t&&(t="styleFloat");try{switch(t){case"opacity":try{return e.filters.item("alpha").opacity/100}catch(e){return 1}default:return e.style[t]||e.currentStyle?e.currentStyle[t]:null}}catch(i){return e.style[t]}}}:function(e,t){if(!d){if(!e||!t)return null;t=v(t),"float"===t&&(t="cssFloat");try{var i=document.defaultView.getComputedStyle(e,"");return e.style[t]||i?i[t]:null}catch(i){return e.style[t]}}}},,,,,,,function(e,t,i){var n;!function(s){"use strict";function o(e,t){for(var i=[],n=0,s=e.length;n<s;n++)i.push(e[n].substr(0,t));return i}function a(e){return function(t,i,n){var s=n[e].indexOf(i.charAt(0).toUpperCase()+i.substr(1).toLowerCase());~s&&(t.month=s)}}function r(e,t){for(e=String(e),t=t||2;e.length<t;)e="0"+e;return e}var l={},u=/d{1,4}|M{1,4}|yy(?:yy)?|S{1,3}|Do|ZZ|([HhMsDm])\1?|[aA]|"[^"]*"|'[^']*'/g,c=/\d\d?/,d=/\d{3}/,h=/\d{4}/,f=/[0-9]*['a-z\u00A0-\u05FF\u0700-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+|[\u0600-\u06FF\/]+(\s*?[\u0600-\u06FF]+){1,2}/i,p=function(){},m=["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"],v=["January","February","March","April","May","June","July","August","September","October","November","December"],g=o(v,3),y=o(m,3);l.i18n={dayNamesShort:y,dayNames:m,monthNamesShort:g,monthNames:v,amPm:["am","pm"],DoFn:function(e){return e+["th","st","nd","rd"][e%10>3?0:(e-e%10!==10)*e%10]}};var b={D:function(e){return e.getDay()},DD:function(e){return r(e.getDay())},Do:function(e,t){return t.DoFn(e.getDate())},d:function(e){return e.getDate()},dd:function(e){return r(e.getDate())},ddd:function(e,t){return t.dayNamesShort[e.getDay()]},dddd:function(e,t){return t.dayNames[e.getDay()]},M:function(e){return e.getMonth()+1},MM:function(e){return r(e.getMonth()+1)},MMM:function(e,t){return t.monthNamesShort[e.getMonth()]},MMMM:function(e,t){return t.monthNames[e.getMonth()]},yy:function(e){return String(e.getFullYear()).substr(2)},yyyy:function(e){return e.getFullYear()},h:function(e){return e.getHours()%12||12},hh:function(e){return r(e.getHours()%12||12)},H:function(e){return e.getHours()},HH:function(e){return r(e.getHours())},m:function(e){return e.getMinutes()},mm:function(e){return r(e.getMinutes())},s:function(e){return e.getSeconds()},ss:function(e){return r(e.getSeconds())},S:function(e){return Math.round(e.getMilliseconds()/100)},SS:function(e){return r(Math.round(e.getMilliseconds()/10),2)},SSS:function(e){return r(e.getMilliseconds(),3)},a:function(e,t){return e.getHours()<12?t.amPm[0]:t.amPm[1]},A:function(e,t){return e.getHours()<12?t.amPm[0].toUpperCase():t.amPm[1].toUpperCase()},ZZ:function(e){var t=e.getTimezoneOffset();return(t>0?"-":"+")+r(100*Math.floor(Math.abs(t)/60)+Math.abs(t)%60,4)}},_={d:[c,function(e,t){e.day=t}],M:[c,function(e,t){e.month=t-1}],yy:[c,function(e,t){var i=new Date,n=+(""+i.getFullYear()).substr(0,2);e.year=""+(t>68?n-1:n)+t}],h:[c,function(e,t){e.hour=t}],m:[c,function(e,t){e.minute=t}],s:[c,function(e,t){e.second=t}],yyyy:[h,function(e,t){e.year=t}],S:[/\d/,function(e,t){e.millisecond=100*t}],SS:[/\d{2}/,function(e,t){e.millisecond=10*t}],SSS:[d,function(e,t){e.millisecond=t}],D:[c,p],ddd:[f,p],MMM:[f,a("monthNamesShort")],MMMM:[f,a("monthNames")],a:[f,function(e,t,i){var n=t.toLowerCase();n===i.amPm[0]?e.isPm=!1:n===i.amPm[1]&&(e.isPm=!0)}],ZZ:[/[\+\-]\d\d:?\d\d/,function(e,t){var i,n=(t+"").match(/([\+\-]|\d\d)/gi);n&&(i=+(60*n[1])+parseInt(n[2],10),e.timezoneOffset="+"===n[0]?i:-i)}]};_.DD=_.D,_.dddd=_.ddd,_.Do=_.dd=_.d,_.mm=_.m,_.hh=_.H=_.HH=_.h,_.MM=_.M,_.ss=_.s,_.A=_.a,l.masks={default:"ddd MMM dd yyyy HH:mm:ss",shortDate:"M/D/yy",mediumDate:"MMM d, yyyy",longDate:"MMMM d, yyyy",fullDate:"dddd, MMMM d, yyyy",shortTime:"HH:mm",mediumTime:"HH:mm:ss",longTime:"HH:mm:ss.SSS"},l.format=function(e,t,i){var n=i||l.i18n;if("number"==typeof e&&(e=new Date(e)),"[object Date]"!==Object.prototype.toString.call(e)||isNaN(e.getTime()))throw new Error("Invalid Date in fecha.format");return t=l.masks[t]||t||l.masks.default,t.replace(u,function(t){return t in b?b[t](e,n):t.slice(1,t.length-1)})},l.parse=function(e,t,i){var n=i||l.i18n;if("string"!=typeof t)throw new Error("Invalid format in fecha.parse");if(t=l.masks[t]||t,e.length>1e3)return!1;var s=!0,o={};if(t.replace(u,function(t){if(_[t]){var i=_[t],a=e.search(i[0]);~a?e.replace(i[0],function(t){return i[1](o,t,n),e=e.substr(a+t.length),t}):s=!1}return _[t]?"":t.slice(1,t.length-1)}),!s)return!1;var a=new Date;o.isPm===!0&&null!=o.hour&&12!==+o.hour?o.hour=+o.hour+12:o.isPm===!1&&12===+o.hour&&(o.hour=0);var r;return null!=o.timezoneOffset?(o.minute=+(o.minute||0)-+o.timezoneOffset,r=new Date(Date.UTC(o.year||a.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0))):r=new Date(o.year||a.getFullYear(),o.month||0,o.day||1,o.hour||0,o.minute||0,o.second||0,o.millisecond||0),r},"undefined"!=typeof e&&e.exports?e.exports=l:(n=function(){return l}.call(t,i,t,e),!(void 0!==n&&(e.exports=n)))}(void 0)},,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(579),o=n(s),a=i(619),r=n(a),l=i(623),u=n(l),c=i(630),d=n(c),h=i(641),f=n(h),p=i(645),m=n(p),v=i(649),g=n(v),y=i(653),b=n(y),_=i(659),C=n(_),x=i(663),w=n(x),M=i(589),k=n(M),D=i(667),S=n(D),I=i(671),N=n(I),T=i(675),E=n(T),$=i(679),O=n($),A=i(683),P=n(A),L=i(687),j=n(L),z=i(691),F=n(z),V=i(584),R=n(V),B=i(618),W=n(B),H=i(695),Y=n(H),U=i(633),q=n(U),G=i(637),Z=n(G),Q=i(699),K=n(Q),J=i(715),X=n(J),ee=i(717),te=n(ee),ie=i(744),ne=n(ie),se=i(749),oe=n(se),ae=i(754),re=n(ae),le=i(706),ue=n(le),ce=i(759),de=n(ce),he=i(764),fe=n(he),pe=i(768),me=n(pe),ve=i(772),ge=n(ve),ye=i(776),be=n(ye),_e=i(805),Ce=n(_e),xe=i(813),we=n(xe),Me=i(606),ke=n(Me),De=i(817),Se=n(De),Ie=i(827),Ne=n(Ie),Te=i(831),Ee=n(Te),$e=i(836),Oe=n($e),Ae=i(843),Pe=n(Ae),Le=i(849),je=n(Le),ze=i(853),Fe=n(ze),Ve=i(857),Re=n(Ve),Be=i(859),We=n(Be),He=i(864),Ye=n(He),Ue=i(878),qe=n(Ue),Ge=i(882),Ze=n(Ge),Qe=i(892),Ke=n(Qe),Je=i(896),Xe=n(Je),et=i(900),tt=n(et),it=i(904),nt=n(it),st=i(908),ot=n(st),at=i(912),rt=n(at),lt=i(610),ut=n(lt),ct=i(916),dt=n(ct),ht=i(920),ft=n(ht),pt=i(924),mt=n(pt),vt=i(928),gt=n(vt),yt=i(935),bt=n(yt),_t=i(15),Ct=n(_t),xt=[o.default,r.default,u.default,d.default,f.default,m.default,g.default,b.default,C.default,w.default,k.default,S.default,N.default,E.default,O.default,P.default,j.default,F.default,R.default,W.default,Y.default,q.default,Z.default,K.default,X.default,te.default,ne.default,oe.default,re.default,ue.default,fe.default,me.default,ge.default,be.default,Ce.default,we.default,ke.default,Se.default,Ne.default,Oe.default,je.default,Fe.default,Re.default,We.default,Ye.default,qe.default,Ke.default,Xe.default,tt.default,nt.default,ot.default,rt.default,ut.default,dt.default,ft.default,mt.default,gt.default,bt.default],wt=function e(t){var i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.installed||(Ct.default.use(i.locale),Ct.default.i18n(i.i18n),xt.map(function(e){t.component(e.name,e)}),t.use(Pe.default.directive),t.prototype.$loading=Pe.default.service,t.prototype.$msgbox=de.default,t.prototype.$alert=de.default.alert,t.prototype.$confirm=de.default.confirm,t.prototype.$prompt=de.default.prompt,t.prototype.$notify=Ee.default,t.prototype.$message=Ze.default)};"undefined"!=typeof window&&window.Vue&&wt(window.Vue),e.exports={version:"1.2.9",locale:Ct.default.use,i18n:Ct.default.i18n,install:wt,Loading:Pe.default,Pagination:o.default,Dialog:r.default,Autocomplete:u.default,Dropdown:d.default,DropdownMenu:f.default,DropdownItem:m.default,Menu:g.default,Submenu:b.default,MenuItem:C.default,MenuItemGroup:w.default,Input:k.default,InputNumber:S.default,Radio:N.default,RadioGroup:E.default,RadioButton:O.default,Checkbox:P.default,CheckboxGroup:j.default,Switch:F.default,Select:R.default,Option:W.default,OptionGroup:Y.default,Button:q.default,ButtonGroup:Z.default,Table:K.default,TableColumn:X.default,DatePicker:te.default,TimeSelect:ne.default,TimePicker:oe.default,Popover:re.default,Tooltip:ue.default,MessageBox:de.default,Breadcrumb:fe.default,BreadcrumbItem:me.default,Form:ge.default,FormItem:be.default,Tabs:Ce.default,TabPane:we.default,Tag:ke.default,Tree:Se.default,Alert:Ne.default,Notification:Ee.default,Slider:Oe.default,Icon:je.default,Row:Fe.default,Col:Re.default,Upload:We.default,Progress:Ye.default,Spinner:qe.default,Message:Ze.default,Badge:Ke.default,Card:Xe.default,Rate:tt.default,Steps:nt.default,Step:ot.default,Carousel:rt.default,Scrollbar:ut.default,CarouselItem:dt.default,Collapse:ft.default,CollapseItem:mt.default,Cascader:gt.default,ColorPicker:bt.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(580),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(581),o=n(s),a=i(584),r=n(a),l=i(618),u=n(l),c=i(588),d=n(c);t.default={name:"ElPagination",props:{pageSize:{type:Number,default:10},small:Boolean,total:Number,pageCount:Number,currentPage:{type:Number,default:1},layout:{default:"prev, pager, next, jumper, ->, total"},pageSizes:{type:Array,default:function(){return[10,20,30,40,50,100]}}},data:function(){return{internalCurrentPage:1,internalPageSize:0}},render:function(e){var t=e("div",{class:"el-pagination"},[]),i=this.layout||"";if(i){var n={prev:e("prev",null,[]),jumper:e("jumper",null,[]),pager:e("pager",{attrs:{currentPage:this.internalCurrentPage,pageCount:this.internalPageCount},on:{change:this.handleCurrentChange}},[]),next:e("next",null,[]),sizes:e("sizes",{attrs:{pageSizes:this.pageSizes}},[]),slot:e("my-slot",null,[]),total:e("total",null,[])},s=i.split(",").map(function(e){return e.trim()}),o=e("div",{class:"el-pagination__rightwrapper"},[]),a=!1;return this.small&&(t.data.class+=" el-pagination--small"),s.forEach(function(e){return"->"===e?void(a=!0):void(a?o.children.push(n[e]):t.children.push(n[e]))}),a&&t.children.push(o),t}},components:{MySlot:{render:function(e){return this.$parent.$slots.default?this.$parent.$slots.default[0]:""}},Prev:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-prev",{disabled:this.$parent.internalCurrentPage<=1}],on:{click:this.$parent.prev}},[e("i",{class:"el-icon el-icon-arrow-left"},[])])}},Next:{render:function(e){return e("button",{attrs:{type:"button"},class:["btn-next",{disabled:this.$parent.internalCurrentPage===this.$parent.internalPageCount||0===this.$parent.internalPageCount}],on:{click:this.$parent.next}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])}},Sizes:{mixins:[d.default],props:{pageSizes:Array},watch:{pageSizes:{immediate:!0,handler:function(e){Array.isArray(e)&&(this.$parent.internalPageSize=e.indexOf(this.$parent.pageSize)>-1?this.$parent.pageSize:this.pageSizes[0])}}},render:function(e){var t=this;return e("span",{class:"el-pagination__sizes"},[e("el-select",{attrs:{value:this.$parent.internalPageSize},on:{input:this.handleChange}},[this.pageSizes.map(function(i){return e("el-option",{attrs:{value:i,label:i+" "+t.t("el.pagination.pagesize")}},[])})])])},components:{ElSelect:r.default,ElOption:u.default},methods:{handleChange:function(e){e!==this.$parent.internalPageSize&&(this.$parent.internalPageSize=e=parseInt(e,10),this.$parent.$emit("size-change",e))}}},Jumper:{mixins:[d.default],data:function(){return{oldValue:null}},methods:{handleFocus:function(e){this.oldValue=e.target.value},handleChange:function(e){var t=e.target;this.$parent.internalCurrentPage=this.$parent.getValidCurrentPage(t.value),this.oldValue=null}},render:function(e){return e("span",{class:"el-pagination__jump"},[this.t("el.pagination.goto"),e("input",{class:"el-pagination__editor",attrs:{type:"number",min:1,max:this.internalPageCount,number:!0},domProps:{value:this.$parent.internalCurrentPage},on:{change:this.handleChange,focus:this.handleFocus},style:{width:"30px"}},[]),this.t("el.pagination.pageClassifier")])}},Total:{mixins:[d.default],render:function(e){return"number"==typeof this.$parent.total?e("span",{class:"el-pagination__total"},[this.t("el.pagination.total",{total:this.$parent.total})]):""}},Pager:o.default},methods:{handleCurrentChange:function(e){this.internalCurrentPage=this.getValidCurrentPage(e)},prev:function(){var e=this.internalCurrentPage-1;this.internalCurrentPage=this.getValidCurrentPage(e)},next:function(){var e=this.internalCurrentPage+1;this.internalCurrentPage=this.getValidCurrentPage(e)},getValidCurrentPage:function(e){e=parseInt(e,10);var t="number"==typeof this.internalPageCount,i=void 0;return t?e<1?i=1:e>this.internalPageCount&&(i=this.internalPageCount):(isNaN(e)||e<1)&&(i=1),void 0===i&&isNaN(e)?i=1:0===i&&(i=1),void 0===i?e:i}},computed:{internalPageCount:function(){return"number"==typeof this.total?Math.ceil(this.total/this.internalPageSize):"number"==typeof this.pageCount?this.pageCount:null}},watch:{currentPage:{immediate:!0,handler:function(e){this.internalCurrentPage=e}},pageSize:{immediate:!0,handler:function(e){this.internalPageSize=e}},internalCurrentPage:function(e,t){var i=this;e=parseInt(e,10),e=isNaN(e)?t||1:this.getValidCurrentPage(e),void 0!==e?this.$nextTick(function(){i.internalCurrentPage=e,t!==e&&i.$emit("current-change",i.internalCurrentPage)}):this.$emit("current-change",this.internalCurrentPage)},internalPageCount:function(e){var t=this.internalCurrentPage;e>0&&0===t?this.internalCurrentPage=1:t>e&&(this.internalCurrentPage=0===e?1:e)}}}},function(e,t,i){var n=i(13)(i(582),i(583),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElPager",props:{currentPage:Number,pageCount:Number},watch:{showPrevMore:function(e){e||(this.quickprevIconClass="el-icon-more")},showNextMore:function(e){e||(this.quicknextIconClass="el-icon-more")}},methods:{onPagerClick:function(e){var t=e.target;if("UL"!==t.tagName){var i=Number(e.target.textContent),n=this.pageCount,s=this.currentPage;t.className.indexOf("more")!==-1&&(t.className.indexOf("quickprev")!==-1?i=s-5:t.className.indexOf("quicknext")!==-1&&(i=s+5)),isNaN(i)||(i<1&&(i=1),i>n&&(i=n)),i!==s&&this.$emit("change",i)}}},computed:{pagers:function(){var e=7,t=Number(this.currentPage),i=Number(this.pageCount),n=!1,s=!1;i>e&&(t>e-2&&(n=!0),t<i-2&&(s=!0));var o=[];if(n&&!s)for(var a=i-(e-2),r=a;r<i;r++)o.push(r);else if(!n&&s)for(var l=2;l<e;l++)o.push(l);else if(n&&s)for(var u=Math.floor(e/2)-1,c=t-u;c<=t+u;c++)o.push(c);else for(var d=2;d<i;d++)o.push(d);return this.showPrevMore=n,this.showNextMore=s,o}},data:function(){return{current:null,showPrevMore:!1,showNextMore:!1,quicknextIconClass:"el-icon-more",quickprevIconClass:"el-icon-more"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-pager",on:{click:e.onPagerClick}},[e.pageCount>0?i("li",{staticClass:"number",class:{active:1===e.currentPage}},[e._v("1")]):e._e(),e.showPrevMore?i("li",{staticClass:"el-icon more btn-quickprev",class:[e.quickprevIconClass],on:{mouseenter:function(t){e.quickprevIconClass="el-icon-d-arrow-left"},mouseleave:function(t){e.quickprevIconClass="el-icon-more"}}}):e._e(),e._l(e.pagers,function(t){return i("li",{staticClass:"number",class:{active:e.currentPage===t}},[e._v(e._s(t))])}),e.showNextMore?i("li",{staticClass:"el-icon more btn-quicknext",class:[e.quicknextIconClass],on:{mouseenter:function(t){e.quicknextIconClass="el-icon-d-arrow-right"},mouseleave:function(t){e.quicknextIconClass="el-icon-more"}}}):e._e(),e.pageCount>1?i("li",{staticClass:"number",class:{active:e.currentPage===e.pageCount}},[e._v(e._s(e.pageCount))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(585),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(586),i(617),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s),a=i(588),r=n(a),l=i(589),u=n(l),c=i(595),d=n(c),h=i(603),f=n(h),p=i(606),m=n(p),v=i(610),g=n(v),y=i(615),b=n(y),_=i(616),C=n(_),x=i(71),w=i(612),M=i(15),k={large:42,small:30,mini:22};t.default={mixins:[o.default,r.default],name:"ElSelect",componentName:"ElSelect",computed:{iconClass:function(){var e=this.clearable&&!this.disabled&&this.inputHovering&&!this.multiple&&void 0!==this.value&&""!==this.value;return e?"circle-close is-show-close":this.remote&&this.filterable?"":"caret-top"},debounce:function(){return this.remote?300:0},emptyText:function(){return this.loading?this.loadingText||this.t("el.select.loading"):(!this.remote||""!==this.query||0!==this.options.length)&&(this.filterable&&this.options.length>0&&0===this.filteredOptionsCount?this.noMatchText||this.t("el.select.noMatch"):0===this.options.length?this.noDataText||this.t("el.select.noData"):null)},showNewOption:function(){var e=this,t=this.options.filter(function(e){return!e.created}).some(function(t){return t.currentLabel===e.query});return this.filterable&&this.allowCreate&&""!==this.query&&!t}},components:{ElInput:u.default,ElSelectMenu:d.default,ElOption:f.default,ElTag:m.default,ElScrollbar:g.default},directives:{Clickoutside:C.default},props:{name:String,value:{},size:String,disabled:Boolean,clearable:Boolean,filterable:Boolean,allowCreate:Boolean,loading:Boolean,popperClass:String,remote:Boolean,loadingText:String,noMatchText:String,noDataText:String,remoteMethod:Function,filterMethod:Function,multiple:Boolean,multipleLimit:{type:Number,default:0},placeholder:{type:String,default:function(){return(0,M.t)("el.select.placeholder")}}},data:function(){return{options:[],cachedOptions:[],createdLabel:null,createdSelected:!1,selected:this.multiple?[]:{},isSelect:!0,inputLength:20,inputWidth:0,cachedPlaceHolder:"",optionsCount:0,filteredOptionsCount:0,dropdownUl:null,visible:!1,selectedLabel:"",hoverIndex:-1,query:"",bottomOverflow:0,topOverflow:0,optionsAllDisabled:!1,inputHovering:!1,currentPlaceholder:""}},watch:{placeholder:function(e){this.cachedPlaceHolder=this.currentPlaceholder=e},value:function(e){this.multiple&&(this.resetInputHeight(),e.length>0||this.$refs.input&&""!==this.query?this.currentPlaceholder="":this.currentPlaceholder=this.cachedPlaceHolder),this.setSelected(),this.filterable&&!this.multiple&&(this.inputLength=20),this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e)},query:function(e){var t=this;this.$nextTick(function(){t.visible&&t.broadcast("ElSelectDropdown","updatePopper")}),this.hoverIndex=-1,this.multiple&&this.filterable&&(this.inputLength=15*this.$refs.input.value.length+20,this.managePlaceholder(),this.resetInputHeight()),this.remote&&"function"==typeof this.remoteMethod?(this.hoverIndex=-1,this.remoteMethod(e),this.broadcast("ElOption","resetIndex")):"function"==typeof this.filterMethod?(this.filterMethod(e),this.broadcast("ElOptionGroup","queryChange")):(this.filteredOptionsCount=this.optionsCount,this.broadcast("ElOption","queryChange",e),this.broadcast("ElOptionGroup","queryChange"))},visible:function(e){var t=this;e?(this.handleIconShow(),this.broadcast("ElSelectDropdown","updatePopper"),this.filterable&&(this.query=this.selectedLabel,this.multiple?this.$refs.input.focus():(this.remote||(this.broadcast("ElOption","queryChange",""),this.broadcast("ElOptionGroup","queryChange")),this.broadcast("ElInput","inputSelect")))):(this.$refs.reference.$el.querySelector("input").blur(),this.handleIconHide(),this.broadcast("ElSelectDropdown","destroyPopper"),this.$refs.input&&this.$refs.input.blur(),this.query="",this.selectedLabel="",this.inputLength=20,this.resetHoverIndex(),this.$nextTick(function(){t.$refs.input&&""===t.$refs.input.value&&0===t.selected.length&&(t.currentPlaceholder=t.cachedPlaceHolder)}),this.multiple||(this.getOverflows(),this.selected&&(this.filterable&&this.allowCreate&&this.createdSelected&&this.createdOption?this.selectedLabel=this.createdLabel:this.selectedLabel=this.selected.currentLabel,this.filterable&&(this.query=this.selectedLabel)))),this.$emit("visible-change",e)},options:function(e){if(!this.$isServer){this.optionsAllDisabled=e.length===e.filter(function(e){return e.disabled===!0}).length,this.multiple&&this.resetInputHeight();var t=this.$el.querySelectorAll("input");[].indexOf.call(t,document.activeElement)===-1&&this.setSelected()}}},methods:{handleIconHide:function(){var e=this.$el.querySelector(".el-input__icon");e&&(0,x.removeClass)(e,"is-reverse")},handleIconShow:function(){var e=this.$el.querySelector(".el-input__icon");e&&!(0,x.hasClass)(e,"el-icon-circle-close")&&(0,x.addClass)(e,"is-reverse")},handleMenuEnter:function(){this.dropdownUl||(this.dropdownUl=this.$refs.popper.$el.querySelector(".el-select-dropdown__wrap"),this.getOverflows()),!this.multiple&&this.dropdownUl&&this.resetMenuScroll()},getOverflows:function(){if(this.dropdownUl&&this.selected&&this.selected.$el){var e=this.selected.$el.getBoundingClientRect(),t=this.$refs.popper.$el.getBoundingClientRect();this.bottomOverflow=e.bottom-t.bottom,this.topOverflow=e.top-t.top}},resetMenuScroll:function(){this.bottomOverflow>0?this.dropdownUl.scrollTop+=this.bottomOverflow:this.topOverflow<0&&(this.dropdownUl.scrollTop+=this.topOverflow)},getOption:function(e){for(var t=void 0,i=this.cachedOptions.length-1;i>=0;i--){var n=this.cachedOptions[i];if(n.value===e){t=n;break}}if(t)return t;var s="string"==typeof e||"number"==typeof e?e:"",o={value:e,currentLabel:s};return this.multiple&&(o.hitState=!1),o},setSelected:function(){var e=this;if(!this.multiple){var t=this.getOption(this.value);return t.created?(this.createdLabel=t.currentLabel,this.createdSelected=!0):this.createdSelected=!1,this.selectedLabel=t.currentLabel,this.selected=t,void(this.filterable&&(this.query=this.selectedLabel))}var i=[];Array.isArray(this.value)&&this.value.forEach(function(t){i.push(e.getOption(t))}),this.selected=i,this.$nextTick(function(){e.resetInputHeight()})},handleFocus:function(){this.visible=!0},handleIconClick:function(e){this.iconClass.indexOf("circle-close")>-1?this.deleteSelected(e):this.toggleMenu()},handleMouseDown:function(e){"INPUT"===e.target.tagName&&this.visible&&(this.handleClose(),e.preventDefault())},doDestroy:function(){this.$refs.popper&&this.$refs.popper.doDestroy()},handleClose:function(){this.visible=!1},toggleLastOptionHitState:function(e){if(Array.isArray(this.selected)){var t=this.selected[this.selected.length-1];if(t)return e===!0||e===!1?(t.hitState=e,e):(t.hitState=!t.hitState,t.hitState)}},deletePrevTag:function(e){e.target.value.length<=0&&!this.toggleLastOptionHitState()&&this.value.pop()},managePlaceholder:function(){""!==this.currentPlaceholder&&(this.currentPlaceholder=this.$refs.input.value?"":this.cachedPlaceHolder)},resetInputState:function(e){8!==e.keyCode&&this.toggleLastOptionHitState(!1),this.inputLength=15*this.$refs.input.value.length+20,this.resetInputHeight()},resetInputHeight:function(){var e=this;this.$nextTick(function(){if(e.$refs.reference){var t=e.$refs.reference.$el.childNodes,i=[].filter.call(t,function(e){return"INPUT"===e.tagName})[0];i.style.height=Math.max(e.$refs.tags.clientHeight+6,k[e.size]||36)+"px",e.visible&&e.emptyText!==!1&&e.broadcast("ElSelectDropdown","updatePopper")}})},resetHoverIndex:function(){var e=this;setTimeout(function(){e.multiple?e.selected.length>0?e.hoverIndex=Math.min.apply(null,e.selected.map(function(t){return e.options.indexOf(t)})):e.hoverIndex=-1:e.hoverIndex=e.options.indexOf(e.selected)},300)},handleOptionSelect:function(e){if(this.multiple){var t=-1;this.value.forEach(function(i,n){i===e.value&&(t=n)}),t>-1?this.value.splice(t,1):(this.multipleLimit<=0||this.value.length<this.multipleLimit)&&this.value.push(e.value),e.created&&(this.query="",this.inputLength=20),this.filterable&&this.$refs.input.focus()}else this.$emit("input",e.value),this.visible=!1},toggleMenu:function(){this.filterable&&""===this.query&&this.visible||this.disabled||(this.visible=!this.visible)},navigateOptions:function(e){return this.visible?void(0!==this.options.length&&0!==this.filteredOptionsCount&&(this.optionsAllDisabled=this.options.length===this.options.filter(function(e){return e.disabled===!0}).length,this.optionsAllDisabled||("next"===e&&(this.hoverIndex++,this.hoverIndex===this.options.length&&(this.hoverIndex=0),this.resetScrollTop(),this.options[this.hoverIndex].disabled!==!0&&this.options[this.hoverIndex].groupDisabled!==!0&&this.options[this.hoverIndex].visible||this.navigateOptions("next")),"prev"===e&&(this.hoverIndex--,this.hoverIndex<0&&(this.hoverIndex=this.options.length-1),this.resetScrollTop(),this.options[this.hoverIndex].disabled!==!0&&this.options[this.hoverIndex].groupDisabled!==!0&&this.options[this.hoverIndex].visible||this.navigateOptions("prev"))))):void(this.visible=!0)},resetScrollTop:function(){
-var e=this.options[this.hoverIndex].$el.getBoundingClientRect().bottom-this.$refs.popper.$el.getBoundingClientRect().bottom,t=this.options[this.hoverIndex].$el.getBoundingClientRect().top-this.$refs.popper.$el.getBoundingClientRect().top;e>0&&(this.dropdownUl.scrollTop+=e),t<0&&(this.dropdownUl.scrollTop+=t)},selectOption:function(){this.options[this.hoverIndex]&&this.handleOptionSelect(this.options[this.hoverIndex])},deleteSelected:function(e){e.stopPropagation(),this.$emit("input",""),this.visible=!1},deleteTag:function(e,t){var i=this.selected.indexOf(t);i>-1&&!this.disabled&&(this.value.splice(i,1),this.$emit("remove-tag",t)),e.stopPropagation()},onInputChange:function(){this.filterable&&(this.query=this.selectedLabel)},onOptionDestroy:function(e){this.optionsCount--,this.filteredOptionsCount--;var t=this.options.indexOf(e);t>-1&&this.options.splice(t,1),this.broadcast("ElOption","resetIndex")},resetInputWidth:function(){this.inputWidth=this.$refs.reference.$el.getBoundingClientRect().width},handleResize:function(){this.resetInputWidth(),this.multiple&&this.resetInputHeight()}},created:function(){var e=this;this.cachedPlaceHolder=this.currentPlaceholder=this.placeholder,this.multiple&&!Array.isArray(this.value)&&this.$emit("input",[]),!this.multiple&&Array.isArray(this.value)&&this.$emit("input",""),this.setSelected(),this.debouncedOnInputChange=(0,b.default)(this.debounce,function(){e.onInputChange()}),this.$on("handleOptionClick",this.handleOptionSelect),this.$on("onOptionDestroy",this.onOptionDestroy),this.$on("setSelected",this.setSelected)},mounted:function(){var e=this;this.multiple&&Array.isArray(this.value)&&this.value.length>0&&(this.currentPlaceholder=""),(0,w.addResizeListener)(this.$el,this.handleResize),this.remote&&this.multiple&&this.resetInputHeight(),this.$nextTick(function(){e.$refs.reference&&e.$refs.reference.$el&&(e.inputWidth=e.$refs.reference.$el.getBoundingClientRect().width)})},beforeDestroy:function(){this.$el&&this.handleResize&&(0,w.removeResizeListener)(this.$el,this.handleResize)}}},function(e,t){"use strict";function i(e,t,n){this.$children.forEach(function(s){var o=s.$options.componentName;o===e?s.$emit.apply(s,[t].concat(n)):i.apply(s,[e,t].concat([n]))})}t.__esModule=!0,t.default={methods:{dispatch:function(e,t,i){for(var n=this.$parent||this.$root,s=n.$options.componentName;n&&(!s||s!==e);)n=n.$parent,n&&(s=n.$options.componentName);n&&n.$emit.apply(n,[t].concat(i))},broadcast:function(e,t,n){i.call(this,e,t,n)}}}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(15);t.default={methods:{t:function(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];return n.t.apply(this,t)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(590),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(591),i(594),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s),a=i(592),r=n(a),l=i(593),u=n(l);t.default={name:"ElInput",componentName:"ElInput",mixins:[o.default],data:function(){return{currentValue:this.value,textareaCalcStyle:{}}},props:{value:[String,Number],placeholder:String,size:String,resize:String,readonly:Boolean,autofocus:Boolean,icon:String,disabled:Boolean,type:{type:String,default:"text"},name:String,autosize:{type:[Boolean,Object],default:!1},rows:{type:Number,default:2},autoComplete:{type:String,default:"off"},form:String,maxlength:Number,minlength:Number,max:{},min:{},step:{},validateEvent:{type:Boolean,default:!0},onIconClick:Function},computed:{validating:function(){return"validating"===this.$parent.validateState},textareaStyle:function(){return(0,u.default)({},this.textareaCalcStyle,{resize:this.resize})}},watch:{value:function(e,t){this.setCurrentValue(e)}},methods:{handleBlur:function(e){this.$emit("blur",e),this.validateEvent&&this.dispatch("ElFormItem","el.form.blur",[this.currentValue])},inputSelect:function(){this.$refs.input.select()},resizeTextarea:function(){if(!this.$isServer){var e=this.autosize,t=this.type;if(e&&"textarea"===t){var i=e.minRows,n=e.maxRows;this.textareaCalcStyle=(0,r.default)(this.$refs.textarea,i,n)}}},handleFocus:function(e){this.$emit("focus",e)},handleInput:function(e){var t=e.target.value;this.$emit("input",t),this.setCurrentValue(t),this.$emit("change",t)},handleIconClick:function(e){this.onIconClick&&this.onIconClick(e),this.$emit("click",e)},setCurrentValue:function(e){var t=this;e!==this.currentValue&&(this.$nextTick(function(e){t.resizeTextarea()}),this.currentValue=e,this.validateEvent&&this.dispatch("ElFormItem","el.form.change",[e]))}},created:function(){this.$on("inputSelect",this.inputSelect)},mounted:function(){this.resizeTextarea()}}},function(e,t){"use strict";function i(e){var t=window.getComputedStyle(e),i=t.getPropertyValue("box-sizing"),n=parseFloat(t.getPropertyValue("padding-bottom"))+parseFloat(t.getPropertyValue("padding-top")),s=parseFloat(t.getPropertyValue("border-bottom-width"))+parseFloat(t.getPropertyValue("border-top-width")),o=a.map(function(e){return e+":"+t.getPropertyValue(e)}).join(";");return{contextStyle:o,paddingSize:n,borderSize:s,boxSizing:i}}function n(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,n=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;s||(s=document.createElement("textarea"),document.body.appendChild(s));var a=i(e),r=a.paddingSize,l=a.borderSize,u=a.boxSizing,c=a.contextStyle;s.setAttribute("style",c+";"+o),s.value=e.value||e.placeholder||"";var d=s.scrollHeight;"border-box"===u?d+=l:"content-box"===u&&(d-=r),s.value="";var h=s.scrollHeight-r;if(null!==t){var f=h*t;"border-box"===u&&(f=f+r+l),d=Math.max(f,d)}if(null!==n){var p=h*n;"border-box"===u&&(p=p+r+l),d=Math.min(p,d)}return{height:d+"px"}}t.__esModule=!0,t.default=n;var s=void 0,o="\n  height:0 !important;\n  visibility:hidden !important;\n  overflow:hidden !important;\n  position:absolute !important;\n  z-index:-1000 !important;\n  top:0 !important;\n  right:0 !important\n",a=["letter-spacing","line-height","padding-top","padding-bottom","font-family","font-weight","font-size","text-rendering","text-transform","width","text-indent","padding-left","padding-right","border-width","box-sizing"]},function(e,t){"use strict";t.__esModule=!0,t.default=function(e){for(var t=1,i=arguments.length;t<i;t++){var n=arguments[t]||{};for(var s in n)if(n.hasOwnProperty(s)){var o=n[s];void 0!==o&&(e[s]=o)}}return e}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{class:["textarea"===e.type?"el-textarea":"el-input",e.size?"el-input--"+e.size:"",{"is-disabled":e.disabled,"el-input-group":e.$slots.prepend||e.$slots.append,"el-input-group--append":e.$slots.append,"el-input-group--prepend":e.$slots.prepend}]},["textarea"!==e.type?[e.$slots.prepend?i("div",{staticClass:"el-input-group__prepend"},[e._t("prepend")],2):e._e(),e._t("icon",[e.icon?i("i",{staticClass:"el-input__icon",class:["el-icon-"+e.icon,e.onIconClick?"is-clickable":""],on:{click:e.handleIconClick}}):e._e()]),"textarea"!==e.type?i("input",{ref:"input",staticClass:"el-input__inner",attrs:{type:e.type,name:e.name,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,maxlength:e.maxlength,minlength:e.minlength,autocomplete:e.autoComplete,autofocus:e.autofocus,min:e.min,max:e.max,step:e.step,form:e.form},domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur}}):e._e(),e.validating?i("i",{staticClass:"el-input__icon el-icon-loading"}):e._e(),e.$slots.append?i("div",{staticClass:"el-input-group__append"},[e._t("append")],2):e._e()]:i("textarea",{ref:"textarea",staticClass:"el-textarea__inner",style:e.textareaStyle,attrs:{name:e.name,placeholder:e.placeholder,disabled:e.disabled,readonly:e.readonly,rows:e.rows,form:e.form,autofocus:e.autofocus,maxlength:e.maxlength,minlength:e.minlength},domProps:{value:e.currentValue},on:{input:e.handleInput,focus:e.handleFocus,blur:e.handleBlur}})],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(596),i(602),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(597),o=n(s);t.default={name:"ElSelectDropdown",componentName:"ElSelectDropdown",mixins:[o.default],props:{placement:{default:"bottom-start"},boundariesPadding:{default:0},popperOptions:{default:function(){return{forceAbsolute:!0,gpuAcceleration:!1}}}},data:function(){return{minWidth:""}},computed:{popperClass:function(){return this.$parent.popperClass}},watch:{"$parent.inputWidth":function(){this.minWidth=this.$parent.$el.getBoundingClientRect().width+"px"}},mounted:function(){this.referenceElm=this.$parent.$refs.reference.$el,this.$parent.popperElm=this.popperElm=this.$el,this.$on("updatePopper",this.updatePopper),this.$on("destroyPopper",this.destroyPopper)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(598),r=o.default.prototype.$isServer?function(){}:i(601),l=function(e){return e.stopPropagation()};t.default={props:{placement:{type:String,default:"bottom"},boundariesPadding:{type:Number,default:5},reference:{},popper:{},offset:{default:0},value:Boolean,visibleArrow:Boolean,transition:String,appendToBody:{type:Boolean,default:!0},popperOptions:{type:Object,default:function(){return{gpuAcceleration:!1}}}},data:function(){return{showPopper:!1,currentPlacement:""}},watch:{value:{immediate:!0,handler:function(e){this.showPopper=e,this.$emit("input",e)}},showPopper:function(e){e?this.updatePopper():this.destroyPopper(),this.$emit("input",e)}},methods:{createPopper:function(){var e=this;if(!this.$isServer&&(this.currentPlacement=this.currentPlacement||this.placement,/^(top|bottom|left|right)(-start|-end)?$/g.test(this.currentPlacement))){var t=this.popperOptions,i=this.popperElm=this.popperElm||this.popper||this.$refs.popper,n=this.referenceElm=this.referenceElm||this.reference||this.$refs.reference;!n&&this.$slots.reference&&this.$slots.reference[0]&&(n=this.referenceElm=this.$slots.reference[0].elm),i&&n&&(this.visibleArrow&&this.appendArrow(i),this.appendToBody&&document.body.appendChild(this.popperElm),this.popperJS&&this.popperJS.destroy&&this.popperJS.destroy(),t.placement=this.currentPlacement,t.offset=this.offset,this.popperJS=new r(n,i,t),this.popperJS.onCreate(function(t){e.$emit("created",e),e.resetTransformOrigin(),e.$nextTick(e.updatePopper)}),"function"==typeof t.onUpdate&&this.popperJS.onUpdate(t.onUpdate),this.popperJS._popper.style.zIndex=a.PopupManager.nextZIndex(),this.popperElm.addEventListener("click",l))}},updatePopper:function(){this.popperJS?this.popperJS.update():this.createPopper()},doDestroy:function(){!this.showPopper&&this.popperJS&&(this.popperJS.destroy(),this.popperJS=null)},destroyPopper:function(){this.popperJS&&this.resetTransformOrigin()},resetTransformOrigin:function(){var e={top:"bottom",bottom:"top",left:"right",right:"left"},t=this.popperJS._popper.getAttribute("x-placement").split("-")[0],i=e[t];this.popperJS._popper.style.transformOrigin=["top","bottom"].indexOf(t)>-1?"center "+i:i+" center"},appendArrow:function(e){var t=void 0;if(!this.appended){this.appended=!0;for(var i in e.attributes)if(/^_v-/.test(e.attributes[i].name)){t=e.attributes[i].name;break}var n=document.createElement("div");t&&n.setAttribute(t,""),n.setAttribute("x-arrow",""),n.className="popper__arrow",e.appendChild(n)}}},beforeDestroy:function(){this.doDestroy(),this.popperElm&&this.popperElm.parentNode===document.body&&(this.popperElm.removeEventListener("click",l),document.body.removeChild(this.popperElm))},deactivated:function(){this.$options.beforeDestroy[0].call(this)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.PopupManager=void 0;var s=i(2),o=n(s),a=i(593),r=n(a),l=i(599),u=n(l),c=i(600),d=n(c),h=1,f=[],p=function(e){if(f.indexOf(e)===-1){var t=function(e){var t=e.__vue__;if(!t){var i=e.previousSibling;i.__vue__&&(t=i.__vue__)}return t};o.default.transition(e,{afterEnter:function(e){var i=t(e);i&&i.doAfterOpen&&i.doAfterOpen()},afterLeave:function(e){var i=t(e);i&&i.doAfterClose&&i.doAfterClose()}})}},m=void 0,v=function e(t){return 3===t.nodeType&&(t=t.nextElementSibling||t.nextSibling,e(t)),t};t.default={props:{value:{type:Boolean,default:!1},transition:{type:String,default:""},openDelay:{},closeDelay:{},zIndex:{},modal:{type:Boolean,default:!1},modalFade:{type:Boolean,default:!0},modalClass:{},modalAppendToBody:{type:Boolean,default:!1},lockScroll:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!1},closeOnClickModal:{type:Boolean,default:!1}},created:function(){this.transition&&p(this.transition)},beforeMount:function(){this._popupId="popup-"+h++,u.default.register(this._popupId,this)},beforeDestroy:function(){u.default.deregister(this._popupId),u.default.closeModal(this._popupId),this.modal&&null!==this.bodyOverflow&&"hidden"!==this.bodyOverflow&&(document.body.style.overflow=this.bodyOverflow,document.body.style.paddingRight=this.bodyPaddingRight),this.bodyOverflow=null,this.bodyPaddingRight=null},data:function(){return{opened:!1,bodyOverflow:null,bodyPaddingRight:null,rendered:!1}},watch:{value:function(e){var t=this;if(e){if(this._opening)return;this.rendered?this.open():(this.rendered=!0,o.default.nextTick(function(){t.open()}))}else this.close()}},methods:{open:function(e){var t=this;this.rendered||(this.rendered=!0,this.$emit("input",!0));var i=(0,r.default)({},this.$props||this,e);this._closeTimer&&(clearTimeout(this._closeTimer),this._closeTimer=null),clearTimeout(this._openTimer);var n=Number(i.openDelay);n>0?this._openTimer=setTimeout(function(){t._openTimer=null,t.doOpen(i)},n):this.doOpen(i)},doOpen:function(e){if(!this.$isServer&&(!this.willOpen||this.willOpen())&&!this.opened){this._opening=!0,this.visible=!0,this.$emit("input",!0);var t=v(this.$el),i=e.modal,n=e.zIndex;if(n&&(u.default.zIndex=n),i&&(this._closing&&(u.default.closeModal(this._popupId),this._closing=!1),u.default.openModal(this._popupId,u.default.nextZIndex(),this.modalAppendToBody?void 0:t,e.modalClass,e.modalFade),e.lockScroll)){this.bodyOverflow||(this.bodyPaddingRight=document.body.style.paddingRight,this.bodyOverflow=document.body.style.overflow),m=(0,d.default)();var s=document.documentElement.clientHeight<document.body.scrollHeight;m>0&&s&&(document.body.style.paddingRight=m+"px"),document.body.style.overflow="hidden"}"static"===getComputedStyle(t).position&&(t.style.position="absolute"),t.style.zIndex=u.default.nextZIndex(),this.opened=!0,this.onOpen&&this.onOpen(),this.transition||this.doAfterOpen()}},doAfterOpen:function(){this._opening=!1},close:function(){var e=this;if(!this.willClose||this.willClose()){null!==this._openTimer&&(clearTimeout(this._openTimer),this._openTimer=null),clearTimeout(this._closeTimer);var t=Number(this.closeDelay);t>0?this._closeTimer=setTimeout(function(){e._closeTimer=null,e.doClose()},t):this.doClose()}},doClose:function(){var e=this;this.visible=!1,this.$emit("input",!1),this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose()},doAfterClose:function(){u.default.closeModal(this._popupId),this._closing=!1}}},t.PopupManager=u.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(71),r=!1,l=function(){if(!o.default.prototype.$isServer){var e=c.modalDom;return e?r=!0:(r=!1,e=document.createElement("div"),c.modalDom=e,e.addEventListener("touchmove",function(e){e.preventDefault(),e.stopPropagation()}),e.addEventListener("click",function(){c.doOnModalClick&&c.doOnModalClick()})),e}},u={},c={zIndex:2e3,modalFade:!0,getInstance:function(e){return u[e]},register:function(e,t){e&&t&&(u[e]=t)},deregister:function(e){e&&(u[e]=null,delete u[e])},nextZIndex:function(){return c.zIndex++},modalStack:[],doOnModalClick:function(){var e=c.modalStack[c.modalStack.length-1];if(e){var t=c.getInstance(e.id);t&&t.closeOnClickModal&&t.close()}},openModal:function(e,t,i,n,s){if(!o.default.prototype.$isServer&&e&&void 0!==t){this.modalFade=s;for(var u=this.modalStack,c=0,d=u.length;c<d;c++){var h=u[c];if(h.id===e)return}var f=l();if((0,a.addClass)(f,"v-modal"),this.modalFade&&!r&&(0,a.addClass)(f,"v-modal-enter"),n){var p=n.trim().split(/\s+/);p.forEach(function(e){return(0,a.addClass)(f,e)})}setTimeout(function(){(0,a.removeClass)(f,"v-modal-enter")},200),i&&i.parentNode&&11!==i.parentNode.nodeType?i.parentNode.appendChild(f):document.body.appendChild(f),t&&(f.style.zIndex=t),f.style.display="",this.modalStack.push({id:e,zIndex:t,modalClass:n})}},closeModal:function(e){var t=this.modalStack,i=l();if(t.length>0){var n=t[t.length-1];if(n.id===e){if(n.modalClass){var s=n.modalClass.trim().split(/\s+/);s.forEach(function(e){return(0,a.removeClass)(i,e)})}t.pop(),t.length>0&&(i.style.zIndex=t[t.length-1].zIndex)}else for(var o=t.length-1;o>=0;o--)if(t[o].id===e){t.splice(o,1);break}}0===t.length&&(this.modalFade&&(0,a.addClass)(i,"v-modal-leave"),setTimeout(function(){0===t.length&&(i.parentNode&&i.parentNode.removeChild(i),i.style.display="none",c.modalDom=void 0),(0,a.removeClass)(i,"v-modal-leave")},200))}};!o.default.prototype.$isServer&&window.addEventListener("keydown",function(e){if(27===e.keyCode&&c.modalStack.length>0){var t=c.modalStack[c.modalStack.length-1];if(!t)return;var i=c.getInstance(t.id);i.closeOnPressEscape&&i.close()}}),t.default=c},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(){if(o.default.prototype.$isServer)return 0;if(void 0!==a)return a;var e=document.createElement("div");e.className="el-scrollbar__wrap",e.style.visibility="hidden",e.style.width="100px",e.style.position="absolute",e.style.top="-9999px",document.body.appendChild(e);var t=e.offsetWidth;e.style.overflow="scroll";var i=document.createElement("div");i.style.width="100%",e.appendChild(i);var n=i.offsetWidth;return e.parentNode.removeChild(e),t-n};var s=i(2),o=n(s),a=void 0},function(e,t,i){var n,s;"function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};!function(o,a){n=a,s="function"==typeof n?n.call(t,i,t,e):n,!(void 0!==s&&(e.exports=s))}(void 0,function(){"use strict";function e(e,t,i){this._reference=e.jquery?e[0]:e,this.state={};var n="undefined"==typeof t||null===t,s=t&&"[object Object]"===Object.prototype.toString.call(t);return n||s?this._popper=this.parse(s?t:{}):this._popper=t.jquery?t[0]:t,this._options=Object.assign({},v,i),this._options.modifiers=this._options.modifiers.map(function(e){if(this._options.modifiersIgnored.indexOf(e)===-1)return"applyStyle"===e&&this._popper.setAttribute("x-placement",this._options.placement),this.modifiers[e]||e}.bind(this)),this.state.position=this._getPosition(this._popper,this._reference),u(this._popper,{position:this.state.position,top:0}),this.update(),this._setupEventListeners(),this}function t(e){var t=e.style.display,i=e.style.visibility;e.style.display="block",e.style.visibility="hidden";var n=(e.offsetWidth,m.getComputedStyle(e)),s=parseFloat(n.marginTop)+parseFloat(n.marginBottom),o=parseFloat(n.marginLeft)+parseFloat(n.marginRight),a={width:e.offsetWidth+o,height:e.offsetHeight+s};return e.style.display=t,e.style.visibility=i,a}function i(e){var t={left:"right",right:"left",bottom:"top",top:"bottom"};return e.replace(/left|right|bottom|top/g,function(e){return t[e]})}function n(e){var t=Object.assign({},e);return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function s(e,t){var i,n=0;for(i in e){if(e[i]===t)return n;n++}return null}function o(e,t){var i=m.getComputedStyle(e,null);return i[t]}function a(e){var t=e.offsetParent;return t!==m.document.body&&t?t:m.document.documentElement}function r(e){var t=e.parentNode;return t?t===m.document?m.document.body.scrollTop?m.document.body:m.document.documentElement:["scroll","auto"].indexOf(o(t,"overflow"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-x"))!==-1||["scroll","auto"].indexOf(o(t,"overflow-y"))!==-1?t:r(e.parentNode):e}function l(e){return e!==m.document.body&&("fixed"===o(e,"position")||(e.parentNode?l(e.parentNode):e))}function u(e,t){function i(e){return""!==e&&!isNaN(parseFloat(e))&&isFinite(e)}Object.keys(t).forEach(function(n){var s="";["width","height","top","right","bottom","left"].indexOf(n)!==-1&&i(t[n])&&(s="px"),e.style[n]=t[n]+s})}function c(e){var t={};return e&&"[object Function]"===t.toString.call(e)}function d(e){var t={width:e.offsetWidth,height:e.offsetHeight,left:e.offsetLeft,top:e.offsetTop};return t.right=t.left+t.width,t.bottom=t.top+t.height,t}function h(e){var t=e.getBoundingClientRect(),i=navigator.userAgent.indexOf("MSIE")!=-1,n=i&&"HTML"===e.tagName?-e.scrollTop:t.top;return{left:t.left,top:n,right:t.right,bottom:t.bottom,width:t.right-t.left,height:t.bottom-n}}function f(e,t,i){var n=h(e),s=h(t);if(i){var o=r(t);s.top+=o.scrollTop,s.bottom+=o.scrollTop,s.left+=o.scrollLeft,s.right+=o.scrollLeft}var a={top:n.top-s.top,left:n.left-s.left,bottom:n.top-s.top+n.height,right:n.left-s.left+n.width,width:n.width,height:n.height};return a}function p(e){for(var t=["","ms","webkit","moz","o"],i=0;i<t.length;i++){var n=t[i]?t[i]+e.charAt(0).toUpperCase()+e.slice(1):e;if("undefined"!=typeof m.document.body.style[n])return n}return null}var m=window,v={placement:"bottom",gpuAcceleration:!0,offset:0,boundariesElement:"viewport",boundariesPadding:5,preventOverflowOrder:["left","right","top","bottom"],flipBehavior:"flip",arrowElement:"[x-arrow]",modifiers:["shift","offset","preventOverflow","keepTogether","arrow","flip","applyStyle"],modifiersIgnored:[],forceAbsolute:!1};return e.prototype.destroy=function(){return this._popper.removeAttribute("x-placement"),this._popper.style.left="",this._popper.style.position="",this._popper.style.top="",this._popper.style[p("transform")]="",this._removeEventListeners(),this._options.removeOnDestroy&&this._popper.remove(),this},e.prototype.update=function(){var e={instance:this,styles:{}};e.placement=this._options.placement,e._originalPlacement=this._options.placement,e.offsets=this._getOffsets(this._popper,this._reference,e.placement),e.boundaries=this._getBoundaries(e,this._options.boundariesPadding,this._options.boundariesElement),e=this.runModifiers(e,this._options.modifiers),"function"==typeof this.state.updateCallback&&this.state.updateCallback(e)},e.prototype.onCreate=function(e){return e(this),this},e.prototype.onUpdate=function(e){return this.state.updateCallback=e,this},e.prototype.parse=function(e){function t(e,t){t.forEach(function(t){e.classList.add(t)})}function i(e,t){t.forEach(function(t){e.setAttribute(t.split(":")[0],t.split(":")[1]||"")})}var n={tagName:"div",classNames:["popper"],attributes:[],parent:m.document.body,content:"",contentType:"text",arrowTagName:"div",arrowClassNames:["popper__arrow"],arrowAttributes:["x-arrow"]};e=Object.assign({},n,e);var s=m.document,o=s.createElement(e.tagName);if(t(o,e.classNames),i(o,e.attributes),"node"===e.contentType?o.appendChild(e.content.jquery?e.content[0]:e.content):"html"===e.contentType?o.innerHTML=e.content:o.textContent=e.content,e.arrowTagName){var a=s.createElement(e.arrowTagName);t(a,e.arrowClassNames),i(a,e.arrowAttributes),o.appendChild(a)}var r=e.parent.jquery?e.parent[0]:e.parent;if("string"==typeof r){if(r=s.querySelectorAll(e.parent),r.length>1&&console.warn("WARNING: the given `parent` query("+e.parent+") matched more than one element, the first one will be used"),0===r.length)throw"ERROR: the given `parent` doesn't exists!";r=r[0]}return r.length>1&&r instanceof Element==!1&&(console.warn("WARNING: you have passed as parent a list of elements, the first one will be used"),r=r[0]),r.appendChild(o),o},e.prototype._getPosition=function(e,t){var i=a(t);if(this._options.forceAbsolute)return"absolute";var n=l(t,i);return n?"fixed":"absolute"},e.prototype._getOffsets=function(e,i,n){n=n.split("-")[0];var s={};s.position=this.state.position;var o="fixed"===s.position,r=f(i,a(e),o),l=t(e);return["right","left"].indexOf(n)!==-1?(s.top=r.top+r.height/2-l.height/2,"left"===n?s.left=r.left-l.width:s.left=r.right):(s.left=r.left+r.width/2-l.width/2,"top"===n?s.top=r.top-l.height:s.top=r.bottom),s.width=l.width,s.height=l.height,{popper:s,reference:r}},e.prototype._setupEventListeners=function(){if(this.state.updateBound=this.update.bind(this),m.addEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=r(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.addEventListener("scroll",this.state.updateBound)}},e.prototype._removeEventListeners=function(){if(m.removeEventListener("resize",this.state.updateBound),"window"!==this._options.boundariesElement){var e=r(this._reference);e!==m.document.body&&e!==m.document.documentElement||(e=m),e.removeEventListener("scroll",this.state.updateBound)}this.state.updateBound=null},e.prototype._getBoundaries=function(e,t,i){var n,s,o={};if("window"===i){var l=m.document.body,u=m.document.documentElement;s=Math.max(l.scrollHeight,l.offsetHeight,u.clientHeight,u.scrollHeight,u.offsetHeight),n=Math.max(l.scrollWidth,l.offsetWidth,u.clientWidth,u.scrollWidth,u.offsetWidth),o={top:0,right:n,bottom:s,left:0}}else if("viewport"===i){var c=a(this._popper),h=r(this._popper),f=d(c),p=function(e){return e==document.body?Math.max(document.documentElement.scrollTop,document.body.scrollTop):e.scrollTop},v=function(e){return e==document.body?Math.max(document.documentElement.scrollLeft,document.body.scrollLeft):e.scrollLeft},g="fixed"===e.offsets.popper.position?0:p(h),y="fixed"===e.offsets.popper.position?0:v(h);o={top:0-(f.top-g),right:m.document.documentElement.clientWidth-(f.left-y),bottom:m.document.documentElement.clientHeight-(f.top-g),left:0-(f.left-y)}}else o=a(this._popper)===i?{top:0,left:0,right:i.clientWidth,bottom:i.clientHeight}:d(i);return o.left+=t,o.right-=t,o.top=o.top+t,o.bottom=o.bottom-t,o},e.prototype.runModifiers=function(e,t,i){var n=t.slice();return void 0!==i&&(n=this._options.modifiers.slice(0,s(this._options.modifiers,i))),n.forEach(function(t){c(t)&&(e=t.call(this,e))}.bind(this)),e},e.prototype.isModifierRequired=function(e,t){var i=s(this._options.modifiers,e);return!!this._options.modifiers.slice(0,i).filter(function(e){return e===t}).length},e.prototype.modifiers={},e.prototype.modifiers.applyStyle=function(e){var t,i={position:e.offsets.popper.position},n=Math.round(e.offsets.popper.left),s=Math.round(e.offsets.popper.top);return this._options.gpuAcceleration&&(t=p("transform"))?(i[t]="translate3d("+n+"px, "+s+"px, 0)",i.top=0,i.left=0):(i.left=n,i.top=s),Object.assign(i,e.styles),u(this._popper,i),this._popper.setAttribute("x-placement",e.placement),this.isModifierRequired(this.modifiers.applyStyle,this.modifiers.arrow)&&e.offsets.arrow&&u(e.arrowElement,e.offsets.arrow),e},e.prototype.modifiers.shift=function(e){var t=e.placement,i=t.split("-")[0],s=t.split("-")[1];if(s){var o=e.offsets.reference,a=n(e.offsets.popper),r={y:{start:{top:o.top},end:{top:o.top+o.height-a.height}},x:{start:{left:o.left},end:{left:o.left+o.width-a.width}}},l=["bottom","top"].indexOf(i)!==-1?"x":"y";e.offsets.popper=Object.assign(a,r[l][s])}return e},e.prototype.modifiers.preventOverflow=function(e){var t=this._options.preventOverflowOrder,i=n(e.offsets.popper),s={left:function t(){var t=i.left;return i.left<e.boundaries.left&&(t=Math.max(i.left,e.boundaries.left)),{left:t}},right:function(){var t=i.left;return i.right>e.boundaries.right&&(t=Math.min(i.left,e.boundaries.right-i.width)),{left:t}},top:function t(){var t=i.top;return i.top<e.boundaries.top&&(t=Math.max(i.top,e.boundaries.top)),{top:t}},bottom:function(){var t=i.top;return i.bottom>e.boundaries.bottom&&(t=Math.min(i.top,e.boundaries.bottom-i.height)),{top:t}}};return t.forEach(function(t){e.offsets.popper=Object.assign(i,s[t]())}),e},e.prototype.modifiers.keepTogether=function(e){var t=n(e.offsets.popper),i=e.offsets.reference,s=Math.floor;return t.right<s(i.left)&&(e.offsets.popper.left=s(i.left)-t.width),t.left>s(i.right)&&(e.offsets.popper.left=s(i.right)),t.bottom<s(i.top)&&(e.offsets.popper.top=s(i.top)-t.height),t.top>s(i.bottom)&&(e.offsets.popper.top=s(i.bottom)),e},e.prototype.modifiers.flip=function(e){if(!this.isModifierRequired(this.modifiers.flip,this.modifiers.preventOverflow))return console.warn("WARNING: preventOverflow modifier is required by flip modifier in order to work, be sure to include it before flip!"),e;if(e.flipped&&e.placement===e._originalPlacement)return e;var t=e.placement.split("-")[0],s=i(t),o=e.placement.split("-")[1]||"",a=[];return a="flip"===this._options.flipBehavior?[t,s]:this._options.flipBehavior,a.forEach(function(r,l){if(t===r&&a.length!==l+1){t=e.placement.split("-")[0],s=i(t);var u=n(e.offsets.popper),c=["right","bottom"].indexOf(t)!==-1;(c&&Math.floor(e.offsets.reference[t])>Math.floor(u[s])||!c&&Math.floor(e.offsets.reference[t])<Math.floor(u[s]))&&(e.flipped=!0,e.placement=a[l+1],o&&(e.placement+="-"+o),e.offsets.popper=this._getOffsets(this._popper,this._reference,e.placement).popper,e=this.runModifiers(e,this._options.modifiers,this._flip))}}.bind(this)),e},e.prototype.modifiers.offset=function(e){var t=this._options.offset,i=e.offsets.popper;return e.placement.indexOf("left")!==-1?i.top-=t:e.placement.indexOf("right")!==-1?i.top+=t:e.placement.indexOf("top")!==-1?i.left-=t:e.placement.indexOf("bottom")!==-1&&(i.left+=t),e},e.prototype.modifiers.arrow=function(e){var i=this._options.arrowElement;if("string"==typeof i&&(i=this._popper.querySelector(i)),!i)return e;if(!this._popper.contains(i))return console.warn("WARNING: `arrowElement` must be child of its popper element!"),e;if(!this.isModifierRequired(this.modifiers.arrow,this.modifiers.keepTogether))return console.warn("WARNING: keepTogether modifier is required by arrow modifier in order to work, be sure to include it before arrow!"),e;var s={},o=e.placement.split("-")[0],a=n(e.offsets.popper),r=e.offsets.reference,l=["left","right"].indexOf(o)!==-1,u=l?"height":"width",c=l?"top":"left",d=l?"left":"top",h=l?"bottom":"right",f=t(i)[u];r[h]-f<a[c]&&(e.offsets.popper[c]-=a[c]-(r[h]-f)),r[c]+f>a[h]&&(e.offsets.popper[c]+=r[c]+f-a[h]);var p=r[c]+r[u]/2-f/2,m=p-a[c];return m=Math.max(Math.min(a[u]-f,m),0),s[c]=m,s[d]="",e.offsets.arrow=s,e.arrowElement=i,e},Object.assign||Object.defineProperty(Object,"assign",{enumerable:!1,configurable:!0,writable:!0,value:function(e){if(void 0===e||null===e)throw new TypeError("Cannot convert first argument to object");for(var t=Object(e),i=1;i<arguments.length;i++){var n=arguments[i];if(void 0!==n&&null!==n){n=Object(n);for(var s=Object.keys(n),o=0,a=s.length;o<a;o++){var r=s[o],l=Object.getOwnPropertyDescriptor(n,r);void 0!==l&&l.enumerable&&(t[r]=n[r])}}}return t}}),e})},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-select-dropdown",class:[{"is-multiple":e.$parent.multiple},e.popperClass],style:{minWidth:e.minWidth}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(604),i(605),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={mixins:[o.default],name:"ElOption",componentName:"ElOption",props:{value:{required:!0},label:[String,Number],created:Boolean,disabled:{type:Boolean,default:!1}},data:function(){return{
-index:-1,groupDisabled:!1,visible:!0,hitState:!1}},computed:{currentLabel:function(){return this.label||("string"==typeof this.value||"number"==typeof this.value?this.value:"")},currentValue:function(){return this.value||this.label||""},parent:function(){for(var e=this.$parent;!e.isSelect;)e=e.$parent;return e},itemSelected:function(){return this.parent.multiple?this.parent.value.indexOf(this.value)>-1:this.value===this.parent.value},limitReached:function(){return!!this.parent.multiple&&(!this.itemSelected&&this.parent.value.length>=this.parent.multipleLimit&&this.parent.multipleLimit>0)}},watch:{currentLabel:function(){this.created||this.parent.remote||this.dispatch("ElSelect","setSelected")},value:function(){this.created||this.parent.remote||this.dispatch("ElSelect","setSelected")}},methods:{handleGroupDisabled:function(e){this.groupDisabled=e},hoverItem:function(){this.disabled||this.groupDisabled||(this.parent.hoverIndex=this.parent.options.indexOf(this))},selectOptionClick:function(){this.disabled!==!0&&this.groupDisabled!==!0&&this.dispatch("ElSelect","handleOptionClick",this)},queryChange:function(e){var t=String(e).replace(/(\^|\(|\)|\[|\]|\$|\*|\+|\.|\?|\\|\{|\}|\|)/g,"\\$1");this.visible=new RegExp(t,"i").test(this.currentLabel)||this.created,this.visible||this.parent.filteredOptionsCount--},resetIndex:function(){var e=this;this.$nextTick(function(){e.index=e.parent.options.indexOf(e)})}},created:function(){this.parent.options.push(this),this.parent.cachedOptions.push(this),this.parent.optionsCount++,this.parent.filteredOptionsCount++,this.index=this.parent.options.indexOf(this),this.$on("queryChange",this.queryChange),this.$on("handleGroupDisabled",this.handleGroupDisabled),this.$on("resetIndex",this.resetIndex)},beforeDestroy:function(){this.dispatch("ElSelect","onOptionDestroy",this)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-dropdown__item",class:{selected:e.itemSelected,"is-disabled":e.disabled||e.groupDisabled||e.limitReached,hover:e.parent.hoverIndex===e.index},on:{mouseenter:e.hoverItem,click:function(t){t.stopPropagation(),e.selectOptionClick(t)}}},[e._t("default",[i("span",[e._v(e._s(e.currentLabel))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(607),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(608),i(609),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTag",props:{text:String,closable:Boolean,type:String,hit:Boolean,closeTransition:Boolean,color:String},methods:{handleClose:function(e){this.$emit("close",e)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:e.closeTransition?"":"el-zoom-in-center"}},[i("span",{staticClass:"el-tag",class:[e.type?"el-tag--"+e.type:"",{"is-hit":e.hit}],style:{backgroundColor:e.color}},[e._t("default"),e.closable?i("i",{staticClass:"el-tag__close el-icon-close",on:{click:e.handleClose}}):e._e()],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(611),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(612),o=i(600),a=n(o),r=i(19),l=i(613),u=n(l);t.default={name:"ElScrollbar",components:{Bar:u.default},props:{native:Boolean,wrapStyle:{},wrapClass:{},viewClass:{},viewStyle:{},noresize:Boolean,tag:{type:String,default:"div"}},data:function(){return{sizeWidth:"0",sizeHeight:"0",moveX:0,moveY:0}},computed:{wrap:function(){return this.$refs.wrap}},render:function(e){var t=(0,a.default)(),i=this.wrapStyle;if(t){var n="-"+t+"px",s="margin-bottom: "+n+"; margin-right: "+n+";";Array.isArray(this.wrapStyle)?(i=(0,r.toObject)(this.wrapStyle),i.marginRight=i.marginBottom=n):"string"==typeof this.wrapStyle?i+=s:i=s}var o=e(this.tag,{class:["el-scrollbar__view",this.viewClass],style:this.viewStyle,ref:"resize"},this.$slots.default),l=e("div",{ref:"wrap",style:i,on:{scroll:this.handleScroll},class:[this.wrapClass,"el-scrollbar__wrap",t?"":"el-scrollbar__wrap--hidden-default"]},[[o]]),c=void 0;return c=this.native?[e("div",{ref:"wrap",class:[this.wrapClass,"el-scrollbar__wrap"],style:i},[[o]])]:[l,e(u.default,{attrs:{move:this.moveX,size:this.sizeWidth}},[]),e(u.default,{attrs:{vertical:!0,move:this.moveY,size:this.sizeHeight}},[])],e("div",{class:"el-scrollbar"},c)},methods:{handleScroll:function(){var e=this.wrap;this.moveY=100*e.scrollTop/e.clientHeight,this.moveX=100*e.scrollLeft/e.clientWidth},update:function(){var e=void 0,t=void 0,i=this.wrap;i&&(e=100*i.clientHeight/i.scrollHeight,t=100*i.clientWidth/i.scrollWidth,this.sizeHeight=e<100?e+"%":"",this.sizeWidth=t<100?t+"%":"")}},mounted:function(){this.native||(this.$nextTick(this.update),!this.noresize&&(0,s.addResizeListener)(this.$refs.resize,this.update))},beforeDestroy:function(){this.native||!this.noresize&&(0,s.removeResizeListener)(this.$refs.resize,this.update)}}},function(e,t){"use strict";t.__esModule=!0;var i="undefined"==typeof window,n=function(){if(!i){var e=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||function(e){return window.setTimeout(e,20)};return function(t){return e(t)}}}(),s=function(){if(!i){var e=window.cancelAnimationFrame||window.mozCancelAnimationFrame||window.webkitCancelAnimationFrame||window.clearTimeout;return function(t){return e(t)}}}(),o=function(e){var t=e.__resizeTrigger__,i=t.firstElementChild,n=t.lastElementChild,s=i.firstElementChild;n.scrollLeft=n.scrollWidth,n.scrollTop=n.scrollHeight,s.style.width=i.offsetWidth+1+"px",s.style.height=i.offsetHeight+1+"px",i.scrollLeft=i.scrollWidth,i.scrollTop=i.scrollHeight},a=function(e){return e.offsetWidth!==e.__resizeLast__.width||e.offsetHeight!==e.__resizeLast__.height},r=function(e){var t=this;o(this),this.__resizeRAF__&&s(this.__resizeRAF__),this.__resizeRAF__=n(function(){a(t)&&(t.__resizeLast__.width=t.offsetWidth,t.__resizeLast__.height=t.offsetHeight,t.__resizeListeners__.forEach(function(i){i.call(t,e)}))})},l=i?{}:document.attachEvent,u="Webkit Moz O ms".split(" "),c="webkitAnimationStart animationstart oAnimationStart MSAnimationStart".split(" "),d="resizeanim",h=!1,f="",p="animationstart";if(!l&&!i){var m=document.createElement("fakeelement");if(void 0!==m.style.animationName&&(h=!0),h===!1)for(var v="",g=0;g<u.length;g++)if(void 0!==m.style[u[g]+"AnimationName"]){v=u[g],f="-"+v.toLowerCase()+"-",p=c[g],h=!0;break}}var y=!1,b=function(){if(!y&&!i){var e="@"+f+"keyframes "+d+" { from { opacity: 0; } to { opacity: 0; } } ",t=f+"animation: 1ms "+d+";",n=e+"\n      .resize-triggers { "+t+' visibility: hidden; opacity: 0; }\n      .resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; }\n      .resize-triggers > div { background: #eee; overflow: auto; }\n      .contract-trigger:before { width: 200%; height: 200%; }',s=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",o.styleSheet?o.styleSheet.cssText=n:o.appendChild(document.createTextNode(n)),s.appendChild(o),y=!0}};t.addResizeListener=function(e,t){if(!i)if(l)e.attachEvent("onresize",t);else{if(!e.__resizeTrigger__){"static"===getComputedStyle(e).position&&(e.style.position="relative"),b(),e.__resizeLast__={},e.__resizeListeners__=[];var n=e.__resizeTrigger__=document.createElement("div");n.className="resize-triggers",n.innerHTML='<div class="expand-trigger"><div></div></div><div class="contract-trigger"></div>',e.appendChild(n),o(e),e.addEventListener("scroll",r,!0),p&&n.addEventListener(p,function(t){t.animationName===d&&o(e)})}e.__resizeListeners__.push(t)}},t.removeResizeListener=function(e,t){l?e.detachEvent("onresize",t):(e.__resizeListeners__.splice(e.__resizeListeners__.indexOf(t),1),e.__resizeListeners__.length||(e.removeEventListener("scroll",r),e.__resizeTrigger__=!e.removeChild(e.__resizeTrigger__)))}},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71),s=i(614);t.default={name:"Bar",props:{vertical:Boolean,size:String,move:Number},computed:{bar:function(){return s.BAR_MAP[this.vertical?"vertical":"horizontal"]},wrap:function(){return this.$parent.wrap}},render:function(e){var t=this.size,i=this.move,n=this.bar;return e("div",{class:["el-scrollbar__bar","is-"+n.key],on:{mousedown:this.clickTrackHandler}},[e("div",{ref:"thumb",class:"el-scrollbar__thumb",on:{mousedown:this.clickThumbHandler},style:(0,s.renderThumbStyle)({size:t,move:i,bar:n})},[])])},methods:{clickThumbHandler:function(e){this.startDrag(e),this[this.bar.axis]=e.currentTarget[this.bar.offset]-(e[this.bar.client]-e.currentTarget.getBoundingClientRect()[this.bar.direction])},clickTrackHandler:function(e){var t=Math.abs(e.target.getBoundingClientRect()[this.bar.direction]-e[this.bar.client]),i=this.$refs.thumb[this.bar.offset]/2,n=100*(t-i)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=n*this.wrap[this.bar.scrollSize]/100},startDrag:function(e){e.stopImmediatePropagation(),this.cursorDown=!0,(0,n.on)(document,"mousemove",this.mouseMoveDocumentHandler),(0,n.on)(document,"mouseup",this.mouseUpDocumentHandler),document.onselectstart=function(){return!1}},mouseMoveDocumentHandler:function(e){if(this.cursorDown!==!1){var t=this[this.bar.axis];if(t){var i=(this.$el.getBoundingClientRect()[this.bar.direction]-e[this.bar.client])*-1,n=this.$refs.thumb[this.bar.offset]-t,s=100*(i-n)/this.$el[this.bar.offset];this.wrap[this.bar.scroll]=s*this.wrap[this.bar.scrollSize]/100}}},mouseUpDocumentHandler:function(e){this.cursorDown=!1,this[this.bar.axis]=0,(0,n.off)(document,"mousemove",this.mouseMoveDocumentHandler),document.onselectstart=null}},destroyed:function(){(0,n.off)(document,"mouseup",this.mouseUpDocumentHandler)}}},function(e,t){"use strict";function i(e){var t=e.move,i=e.size,n=e.bar,s={},o="translate"+n.axis+"("+t+"%)";return s[n.size]=i,s.transform=o,s.msTransform=o,s.webkitTransform=o,s}t.__esModule=!0,t.renderThumbStyle=i;t.BAR_MAP={vertical:{offset:"offsetHeight",scroll:"scrollTop",scrollSize:"scrollHeight",size:"height",key:"vertical",axis:"Y",client:"clientY",direction:"top"},horizontal:{offset:"offsetWidth",scroll:"scrollLeft",scrollSize:"scrollWidth",size:"width",key:"horizontal",axis:"X",client:"clientX",direction:"left"}}},function(e,t,i){var n=i(31);e.exports=function(e,t,i){return void 0===i?n(e,t,!1):n(e,i,t!==!1)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(71),r=[],l="@@clickoutsideContext",u=void 0;!o.default.prototype.$isServer&&(0,a.on)(document,"mousedown",function(e){return u=e}),!o.default.prototype.$isServer&&(0,a.on)(document,"mouseup",function(e){r.forEach(function(t){return t[l].documentHandler(e,u)})}),t.default={bind:function(e,t,i){var n=r.push(e)-1,s=function(n,s){!i.context||e.contains(n.target)||i.context.popperElm&&(i.context.popperElm.contains(n.target)||i.context.popperElm.contains(s.target))||(t.expression&&e[l].methodName&&i.context[e[l].methodName]?i.context[e[l].methodName]():e[l].bindingFn&&e[l].bindingFn())};e[l]={id:n,documentHandler:s,methodName:t.expression,bindingFn:t.value}},update:function(e,t){e[l].methodName=t.expression,e[l].bindingFn=t.value},unbind:function(e){for(var t=r.length,i=0;i<t;i++)if(r[i][l].id===e[l].id){r.splice(i,1);break}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],staticClass:"el-select"},[e.multiple?i("div",{ref:"tags",staticClass:"el-select__tags",style:{"max-width":e.inputWidth-32+"px"},on:{click:function(t){t.stopPropagation(),e.toggleMenu(t)}}},[i("transition-group",{on:{"after-leave":e.resetInputHeight}},e._l(e.selected,function(t){return i("el-tag",{key:t.value,attrs:{closable:"",hit:t.hitState,type:"primary","close-transition":""},on:{close:function(i){e.deleteTag(i,t)}}},[i("span",{staticClass:"el-select__tags-text"},[e._v(e._s(t.currentLabel))])])})),e.filterable?i("input",{directives:[{name:"model",rawName:"v-model",value:e.query,expression:"query"}],ref:"input",staticClass:"el-select__input",class:"is-"+e.size,style:{width:e.inputLength+"px","max-width":e.inputWidth-42+"px"},attrs:{type:"text",disabled:e.disabled,debounce:e.remote?300:0},domProps:{value:e._s(e.query)},on:{focus:function(t){e.visible=!0},keyup:e.managePlaceholder,keydown:[e.resetInputState,function(t){e._k(t.keyCode,"down",40)||(t.preventDefault(),e.navigateOptions("next"))},function(t){e._k(t.keyCode,"up",38)||(t.preventDefault(),e.navigateOptions("prev"))},function(t){e._k(t.keyCode,"enter",13)||(t.preventDefault(),e.selectOption(t))},function(t){e._k(t.keyCode,"esc",27)||(t.preventDefault(),e.visible=!1)},function(t){e._k(t.keyCode,"delete",[8,46])||e.deletePrevTag(t)}],input:function(t){t.target.composing||(e.query=t.target.value)}}}):e._e()],1):e._e(),i("el-input",{directives:[{name:"model",rawName:"v-model",value:e.selectedLabel,expression:"selectedLabel"}],ref:"reference",attrs:{type:"text",placeholder:e.currentPlaceholder,name:e.name,size:e.size,disabled:e.disabled,readonly:!e.filterable||e.multiple,"validate-event":!1,icon:e.iconClass},domProps:{value:e.selectedLabel},on:{focus:e.handleFocus,click:e.handleIconClick,input:function(t){e.selectedLabel=t}},nativeOn:{mousedown:function(t){e.handleMouseDown(t)},keyup:function(t){e.debouncedOnInputChange(t)},keydown:[function(t){e._k(t.keyCode,"down",40)||(t.preventDefault(),e.navigateOptions("next"))},function(t){e._k(t.keyCode,"up",38)||(t.preventDefault(),e.navigateOptions("prev"))},function(t){e._k(t.keyCode,"enter",13)||(t.preventDefault(),e.selectOption(t))},function(t){e._k(t.keyCode,"esc",27)||(t.preventDefault(),e.visible=!1)},function(t){e._k(t.keyCode,"tab",9)||(e.visible=!1)}],paste:function(t){e.debouncedOnInputChange(t)},mouseenter:function(t){e.inputHovering=!0},mouseleave:function(t){e.inputHovering=!1}}}),i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy,"after-enter":e.handleMenuEnter}},[i("el-select-menu",{directives:[{name:"show",rawName:"v-show",value:e.visible&&e.emptyText!==!1,expression:"visible && emptyText !== false"}],ref:"popper"},[i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.options.length>0&&!e.loading,expression:"options.length > 0 && !loading"}],class:{"is-empty":!e.allowCreate&&0===e.filteredOptionsCount},attrs:{tag:"ul","wrap-class":"el-select-dropdown__wrap","view-class":"el-select-dropdown__list"}},[e.showNewOption?i("el-option",{attrs:{value:e.query,created:""}}):e._e(),e._t("default")],2),e.emptyText&&!e.allowCreate?i("p",{staticClass:"el-select-dropdown__empty"},[e._v(e._s(e.emptyText))]):e._e()],1)],1)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(603),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(620),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(621),i(622),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(598),o=n(s),a=i(587),r=n(a);t.default={name:"ElDialog",mixins:[o.default,r.default],props:{title:{type:String,default:""},modal:{type:Boolean,default:!0},modalAppendToBody:{type:Boolean,default:!0},lockScroll:{type:Boolean,default:!0},closeOnClickModal:{type:Boolean,default:!0},closeOnPressEscape:{type:Boolean,default:!0},showClose:{type:Boolean,default:!0},size:{type:String,default:"small"},customClass:{type:String,default:""},top:{type:String,default:"15%"}},data:function(){return{visible:!1}},watch:{value:function(e){this.visible=e},visible:function(e){var t=this;this.$emit("input",e),e?(this.$emit("open"),this.$el.addEventListener("scroll",this.updatePopper),this.$nextTick(function(){t.$refs.dialog.scrollTop=0})):(this.$el.removeEventListener("scroll",this.updatePopper),this.$emit("close"))}},computed:{sizeClass:function(){return"el-dialog--"+this.size},style:function(){return"full"===this.size?{}:{top:this.top}}},methods:{handleWrapperClick:function(){this.closeOnClickModal&&this.close()},updatePopper:function(){this.broadcast("ElSelectDropdown","updatePopper"),this.broadcast("ElDropdownMenu","updatePopper")}},mounted:function(){this.value&&(this.rendered=!0,this.open())}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"dialog-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-dialog__wrapper",on:{click:function(t){t.target===t.currentTarget&&e.handleWrapperClick(t)}}},[i("div",{ref:"dialog",staticClass:"el-dialog",class:[e.sizeClass,e.customClass],style:e.style},[i("div",{staticClass:"el-dialog__header"},[e._t("title",[i("span",{staticClass:"el-dialog__title"},[e._v(e._s(e.title))])]),i("div",{staticClass:"el-dialog__headerbtn"},[e.showClose?i("i",{staticClass:"el-dialog__close el-icon el-icon-close",on:{click:function(t){e.close()}}}):e._e()])],2),e.rendered?i("div",{staticClass:"el-dialog__body"},[e._t("default")],2):e._e(),e.$slots.footer?i("div",{staticClass:"el-dialog__footer"},[e._t("footer")],2):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(624),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(625),i(629),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(589),o=n(s),a=i(616),r=n(a),l=i(626),u=n(l),c=i(587),d=n(c);t.default={name:"ElAutocomplete",mixins:[d.default],componentName:"ElAutocomplete",components:{ElInput:o.default,ElAutocompleteSuggestions:u.default},directives:{Clickoutside:r.default},props:{popperClass:String,placeholder:String,disabled:Boolean,name:String,size:String,value:String,autofocus:Boolean,fetchSuggestions:Function,triggerOnFocus:{type:Boolean,default:!0},customItem:String,icon:String,onIconClick:Function},data:function(){return{isFocus:!1,suggestions:[],loading:!1,highlightedIndex:-1}},computed:{suggestionVisible:function(){var e=this.suggestions,t=Array.isArray(e)&&e.length>0;return(t||this.loading)&&this.isFocus}},watch:{suggestionVisible:function(e){this.broadcast("ElAutocompleteSuggestions","visible",[e,this.$refs.input.$refs.input.offsetWidth])}},methods:{getData:function(e){var t=this;this.loading=!0,this.fetchSuggestions(e,function(e){t.loading=!1,Array.isArray(e)?t.suggestions=e:console.error("autocomplete suggestions must be an array")})},handleChange:function(e){return this.$emit("input",e),this.triggerOnFocus||e?void this.getData(e):void(this.suggestions=[])},handleFocus:function(){this.isFocus=!0,this.triggerOnFocus&&this.getData(this.value)},handleBlur:function(){var e=this;setTimeout(function(t){e.isFocus=!1},100)},handleKeyEnter:function(){this.suggestionVisible&&this.highlightedIndex>=0&&this.highlightedIndex<this.suggestions.length&&this.select(this.suggestions[this.highlightedIndex])},handleClickoutside:function(){this.isFocus=!1},select:function(e){var t=this;this.$emit("input",e.value),this.$emit("select",e),this.$nextTick(function(e){t.suggestions=[]})},highlight:function(e){if(this.suggestionVisible&&!this.loading){e<0&&(e=0),e>=this.suggestions.length&&(e=this.suggestions.length-1);var t=this.$refs.suggestions.$el.querySelector(".el-autocomplete-suggestion__wrap"),i=t.querySelectorAll(".el-autocomplete-suggestion__list li"),n=i[e],s=t.scrollTop,o=n.offsetTop;o+n.scrollHeight>s+t.clientHeight&&(t.scrollTop+=n.scrollHeight),o<s&&(t.scrollTop-=n.scrollHeight),this.highlightedIndex=e}}},mounted:function(){var e=this;this.$on("item-click",function(t){e.select(t)})},beforeDestroy:function(){this.$refs.suggestions.$destroy()}}},function(e,t,i){var n=i(13)(i(627),i(628),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(597),o=n(s),a=i(587),r=n(a),l=i(610),u=n(l);t.default={components:{ElScrollbar:u.default},mixins:[o.default,r.default],componentName:"ElAutocompleteSuggestions",data:function(){return{parent:this.$parent,dropdownWidth:""}},props:{suggestions:Array,options:{default:function(){return{forceAbsolute:!0,gpuAcceleration:!1}}}},methods:{select:function(e){this.dispatch("ElAutocomplete","item-click",e)}},updated:function(){var e=this;this.$nextTick(function(t){e.updatePopper()})},mounted:function(){this.popperElm=this.$el,this.referenceElm=this.$parent.$refs.input.$refs.input},created:function(){var e=this;this.$on("visible",function(t,i){e.dropdownWidth=i+"px",e.showPopper=t})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-autocomplete-suggestion",class:{"is-loading":e.parent.loading},style:{width:e.dropdownWidth}},[i("el-scrollbar",{attrs:{tag:"ul","wrap-class":"el-autocomplete-suggestion__wrap","view-class":"el-autocomplete-suggestion__list"}},[e.parent.loading?i("li",[i("i",{staticClass:"el-icon-loading"})]):e._l(e.suggestions,function(t,n){return[e.parent.customItem?i(e.parent.customItem,{tag:"component",class:{highlighted:e.parent.highlightedIndex===n},attrs:{item:t,index:n},on:{click:function(i){e.select(t)}}}):i("li",{class:{highlighted:e.parent.highlightedIndex===n},on:{click:function(i){e.select(t)}}},[e._v("\n          "+e._s(t.value)+"\n        ")])]})],2)],1)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],staticClass:"el-autocomplete"},[i("el-input",{ref:"input",attrs:{value:e.value,disabled:e.disabled,placeholder:e.placeholder,name:e.name,size:e.size,icon:e.icon,"on-icon-click":e.onIconClick},on:{change:e.handleChange,focus:e.handleFocus,blur:e.handleBlur},nativeOn:{keydown:[function(t){e._k(t.keyCode,"up",38)||(t.preventDefault(),e.highlight(e.highlightedIndex-1))},function(t){e._k(t.keyCode,"down",40)||(t.preventDefault(),e.highlight(e.highlightedIndex+1))},function(t){e._k(t.keyCode,"enter",13)||(t.stopPropagation(),e.handleKeyEnter(t))}]}},[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e()],2),i("el-autocomplete-suggestions",{ref:"suggestions",class:[e.popperClass?e.popperClass:""],attrs:{suggestions:e.suggestions}})],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(631),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(632),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(616),o=n(s),a=i(587),r=n(a),l=i(633),u=n(l),c=i(637),d=n(c);t.default={name:"ElDropdown",componentName:"ElDropdown",mixins:[r.default],directives:{Clickoutside:o.default},components:{ElButton:u.default,ElButtonGroup:d.default},props:{trigger:{type:String,default:"hover"},menuAlign:{type:String,default:"end"},type:String,size:String,splitButton:Boolean,hideOnClick:{type:Boolean,default:!0}},data:function(){return{timeout:null,visible:!1}},mounted:function(){this.$on("menu-item-click",this.handleMenuItemClick),this.initEvent()},watch:{visible:function(e){this.broadcast("ElDropdownMenu","visible",e)}},methods:{show:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!0},250)},hide:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.visible=!1},150)},handleClick:function(){this.visible=!this.visible},initEvent:function(){var e=this.trigger,t=this.show,i=this.hide,n=this.handleClick,s=this.splitButton,o=s?this.$refs.trigger.$el:this.$slots.default[0].elm;if("hover"===e){o.addEventListener("mouseenter",t),o.addEventListener("mouseleave",i);var a=this.$slots.dropdown[0].elm;a.addEventListener("mouseenter",t),a.addEventListener("mouseleave",i)}else"click"===e&&o.addEventListener("click",n)},handleMenuItemClick:function(e,t){this.hideOnClick&&(this.visible=!1),this.$emit("command",e,t)}},render:function(e){var t=this,i=this.hide,n=this.splitButton,s=this.type,o=this.size,a=function(e){t.$emit("click")},r=n?e("el-button-group",null,[e("el-button",{attrs:{type:s,size:o},nativeOn:{click:a}},[this.$slots.default]),e("el-button",{ref:"trigger",attrs:{type:s,size:o},class:"el-dropdown__caret-button"},[e("i",{class:"el-dropdown__icon el-icon-caret-bottom"},[])])]):this.$slots.default;return e("div",{class:"el-dropdown",directives:[{name:"clickoutside",value:i}]},[r,this.$slots.dropdown])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(634),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(635),i(636),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElButton",props:{type:{type:String,default:"default"},size:String,icon:{type:String,default:""},nativeType:{type:String,default:"button"},loading:Boolean,disabled:Boolean,plain:Boolean,autofocus:Boolean},methods:{handleClick:function(e){this.$emit("click",e)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("button",{staticClass:"el-button",class:[e.type?"el-button--"+e.type:"",e.size?"el-button--"+e.size:"",{"is-disabled":e.disabled,"is-loading":e.loading,"is-plain":e.plain}],attrs:{disabled:e.disabled,autofocus:e.autofocus,type:e.nativeType},on:{click:e.handleClick}},[e.loading?i("i",{staticClass:"el-icon-loading"}):e._e(),e.icon&&!e.loading?i("i",{class:"el-icon-"+e.icon}):e._e(),e.$slots.default?i("span",[e._t("default")],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(638),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(639),i(640),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElButtonGroup"}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-button-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(642),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(643),i(644),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(597),o=n(s);t.default={name:"ElDropdownMenu",componentName:"ElDropdownMenu",mixins:[o.default],created:function(){var e=this;this.$on("updatePopper",this.updatePopper),this.$on("visible",function(t){e.showPopper=t})},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{"$parent.menuAlign":{immediate:!0,handler:function(e){this.currentPlacement="bottom-"+e}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-dropdown-menu"},[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(646),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(647),i(648),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={name:"ElDropdownItem",mixins:[o.default],props:{command:String,disabled:Boolean,divided:Boolean},methods:{handleClick:function(e){this.dispatch("ElDropdown","menu-item-click",[this.command,this])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-dropdown-menu__item",class:{"is-disabled":e.disabled,"el-dropdown-menu__item--divided":e.divided},on:{click:e.handleClick}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(650),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(651),i(652),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={name:"ElMenu",componentName:"ElMenu",mixins:[o.default],props:{mode:{type:String,default:"vertical"},defaultActive:{type:String,default:""},defaultOpeneds:Array,theme:{type:String,default:"light"},uniqueOpened:Boolean,router:Boolean,menuTrigger:{type:String,default:"hover"}},data:function(){return{activedIndex:this.defaultActive,openedMenus:this.defaultOpeneds?this.defaultOpeneds.slice(0):[],items:{},submenus:{}}},watch:{defaultActive:function(e){var t=this.items[e];t?(this.activedIndex=t.index,this.initOpenedMenu()):this.activedIndex=""},defaultOpeneds:function(e){this.openedMenus=e}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},openMenu:function(e,t){var i=this.openedMenus;i.indexOf(e)===-1&&(this.uniqueOpened&&(this.openedMenus=i.filter(function(e){return t.indexOf(e)!==-1})),this.openedMenus.push(e))},closeMenu:function(e,t){this.openedMenus.splice(this.openedMenus.indexOf(e),1)},handleSubmenuClick:function(e){var t=e.index,i=e.indexPath,n=this.openedMenus.indexOf(t)!==-1;n?(this.closeMenu(t,i),this.$emit("close",t,i)):(this.openMenu(t,i),this.$emit("open",t,i))},handleItemClick:function(e){var t=e.index,i=e.indexPath;this.activedIndex=e.index,this.$emit("select",t,i,e),"horizontal"===this.mode&&(this.openedMenus=[]),this.router&&this.routeToItem(e)},initOpenedMenu:function(){var e=this,t=this.activedIndex,i=this.items[t];if(i&&"horizontal"!==this.mode){var n=i.indexPath;n.forEach(function(t){var i=e.submenus[t];i&&e.openMenu(t,i.indexPath)})}},routeToItem:function(e){var t=e.route||e.index;try{this.$router.push(t)}catch(e){console.error(e)}}},mounted:function(){this.initOpenedMenu(),this.$on("item-click",this.handleItemClick),this.$on("submenu-click",this.handleSubmenuClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-menu",class:{"el-menu--horizontal":"horizontal"===e.mode,
-"el-menu--dark":"dark"===e.theme}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(654),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(655),i(658),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(656),o=n(s),a=i(587),r=n(a),l=i(657),u=n(l);t.default={name:"ElSubmenu",componentName:"ElSubmenu",mixins:[o.default,r.default],components:{CollapseTransition:u.default},props:{index:{type:String,required:!0}},data:function(){return{timeout:null,items:{},submenus:{}}},computed:{opened:function(){return this.rootMenu.openedMenus.indexOf(this.index)>-1},active:{cache:!1,get:function(){var e=!1,t=this.submenus,i=this.items;return Object.keys(i).forEach(function(t){i[t].active&&(e=!0)}),Object.keys(t).forEach(function(i){t[i].active&&(e=!0)}),e}}},methods:{addItem:function(e){this.$set(this.items,e.index,e)},removeItem:function(e){delete this.items[e.index]},addSubmenu:function(e){this.$set(this.submenus,e.index,e)},removeSubmenu:function(e){delete this.submenus[e.index]},handleClick:function(){this.dispatch("ElMenu","submenu-click",this)},handleMouseenter:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.openMenu(e.index,e.indexPath)},300)},handleMouseleave:function(){var e=this;clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.rootMenu.closeMenu(e.index,e.indexPath)},300)},initEvents:function(){var e=this.rootMenu,t=this.handleMouseenter,i=this.handleMouseleave,n=this.handleClick,s=void 0;"horizontal"===e.mode&&"hover"===e.menuTrigger?(s=this.$el,s.addEventListener("mouseenter",t),s.addEventListener("mouseleave",i)):(s=this.$refs["submenu-title"],s.addEventListener("click",n))}},created:function(){this.parentMenu.addSubmenu(this),this.rootMenu.addSubmenu(this)},beforeDestroy:function(){this.parentMenu.removeSubmenu(this),this.rootMenu.removeSubmenu(this)},mounted:function(){this.initEvents()}}},function(e,t){"use strict";t.__esModule=!0,t.default={computed:{indexPath:function(){for(var e=[this.index],t=this.$parent;"ElMenu"!==t.$options.componentName;)t.index&&e.unshift(t.index),t=t.$parent;return e},rootMenu:function(){for(var e=this.$parent;e&&"ElMenu"!==e.$options.componentName;)e=e.$parent;return e},parentMenu:function(){for(var e=this.$parent;e&&["ElMenu","ElSubmenu"].indexOf(e.$options.componentName)===-1;)e=e.$parent;return e},paddingStyle:function(){if("vertical"!==this.rootMenu.mode)return{};for(var e=20,t=this.$parent;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return{paddingLeft:e+"px"}}}}},function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var s=i(71),o=function(){function e(){n(this,e)}return e.prototype.beforeEnter=function(e){(0,s.addClass)(e,"collapse-transition"),e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.style.height="0",e.style.paddingTop=0,e.style.paddingBottom=0},e.prototype.enter=function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height=e.scrollHeight+"px",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom):(e.style.height="",e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom),e.style.overflow="hidden"},e.prototype.afterEnter=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow},e.prototype.beforeLeave=function(e){e.dataset||(e.dataset={}),e.dataset.oldPaddingTop=e.style.paddingTop,e.dataset.oldPaddingBottom=e.style.paddingBottom,e.dataset.oldOverflow=e.style.overflow,e.style.height=e.scrollHeight+"px",e.style.overflow="hidden"},e.prototype.leave=function(e){0!==e.scrollHeight&&((0,s.addClass)(e,"collapse-transition"),e.style.height=0,e.style.paddingTop=0,e.style.paddingBottom=0)},e.prototype.afterLeave=function(e){(0,s.removeClass)(e,"collapse-transition"),e.style.height="",e.style.overflow=e.dataset.oldOverflow,e.style.paddingTop=e.dataset.oldPaddingTop,e.style.paddingBottom=e.dataset.oldPaddingBottom},e}();t.default={functional:!0,render:function(e,t){var i=t.children,n={on:new o};return e("transition",n,i)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{class:{"el-submenu":!0,"is-active":e.active,"is-opened":e.opened}},[i("div",{ref:"submenu-title",staticClass:"el-submenu__title",style:e.paddingStyle},[e._t("title"),i("i",{class:{"el-submenu__icon-arrow":!0,"el-icon-arrow-down":"vertical"===e.rootMenu.mode,"el-icon-caret-bottom":"horizontal"===e.rootMenu.mode}})],2),"horizontal"===e.rootMenu.mode?[i("transition",{attrs:{name:"el-zoom-in-top"}},[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu"},[e._t("default")],2)])]:i("collapse-transition",[i("ul",{directives:[{name:"show",rawName:"v-show",value:e.opened,expression:"opened"}],staticClass:"el-menu"},[e._t("default")],2)])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(660),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(661),i(662),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(656),o=n(s),a=i(587),r=n(a);t.default={name:"ElMenuItem",componentName:"ElMenuItem",mixins:[o.default,r.default],props:{index:{type:String,required:!0},route:{type:Object,required:!1},disabled:{type:Boolean,required:!1}},computed:{active:function(){return this.index===this.rootMenu.activedIndex}},methods:{handleClick:function(){this.dispatch("ElMenu","item-click",this),this.$emit("click",this)}},created:function(){this.parentMenu.addItem(this),this.rootMenu.addItem(this)},beforeDestroy:function(){this.parentMenu.removeItem(this),this.rootMenu.removeItem(this)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item",class:{"is-active":e.active,"is-disabled":e.disabled},style:e.paddingStyle,on:{click:e.handleClick}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(664),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(665),i(666),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElMenuItemGroup",componentName:"ElMenuItemGroup",props:{title:{type:String}},data:function(){return{paddingLeft:20}},computed:{levelPadding:function(){for(var e=10,t=this.$parent;t&&"ElMenu"!==t.$options.componentName;)"ElSubmenu"===t.$options.componentName&&(e+=20),t=t.$parent;return 10===e&&(e=20),e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("li",{staticClass:"el-menu-item-group"},[i("div",{staticClass:"el-menu-item-group__title",style:{paddingLeft:e.levelPadding+"px"}},[e.$slots.title?e._t("title"):[e._v(e._s(e.title))]],2),i("ul",[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(668),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(669),i(670),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(589),o=n(s),a=i(71);t.default={name:"ElInputNumber",directives:{repeatClick:{bind:function(e,t,i){var n=null,s=void 0,o=function(){return i.context[t.expression].apply()},r=function(){new Date-s<100&&o(),clearInterval(n),n=null};(0,a.on)(e,"mousedown",function(){s=new Date,(0,a.once)(document,"mouseup",r),clearInterval(n),n=setInterval(o,100)})}}},components:{ElInput:o.default},props:{step:{type:Number,default:1},max:{type:Number,default:1/0},min:{type:Number,default:-(1/0)},value:{default:0},disabled:Boolean,size:String,controls:{type:Boolean,default:!0}},data:function(){return{currentValue:0}},watch:{value:{immediate:!0,handler:function(e){var t=Number(e);isNaN(t)||(t>=this.max&&(t=this.max),t<=this.min&&(t=this.min),this.currentValue=t,this.$emit("input",t))}}},computed:{minDisabled:function(){return this._decrease(this.value,this.step)<this.min},maxDisabled:function(){return this._increase(this.value,this.step)>this.max},precision:function(){var e=this.value,t=this.step,i=this.getPrecision;return Math.max(i(e),i(t))}},methods:{toPrecision:function(e,t){return void 0===t&&(t=this.precision),parseFloat(parseFloat(Number(e).toFixed(t)))},getPrecision:function(e){var t=e.toString(),i=t.indexOf("."),n=0;return i!==-1&&(n=t.length-i-1),n},_increase:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e+i*t)/i)},_decrease:function(e,t){if("number"!=typeof e)return this.currentValue;var i=Math.pow(10,this.precision);return this.toPrecision((i*e-i*t)/i)},increase:function(){if(!this.disabled&&!this.maxDisabled){var e=this.value||0,t=this._increase(e,this.step);t>this.max||this.setCurrentValue(t)}},decrease:function(){if(!this.disabled&&!this.minDisabled){var e=this.value||0,t=this._decrease(e,this.step);t<this.min||this.setCurrentValue(t)}},handleBlur:function(){this.$refs.input.setCurrentValue(this.currentValue)},setCurrentValue:function(e){var t=this.currentValue;e>=this.max&&(e=this.max),e<=this.min&&(e=this.min),t!==e&&(this.$emit("change",e,t),this.$emit("input",e),this.currentValue=e)},handleInput:function(e){var t=Number(e);isNaN(t)||this.setCurrentValue(t)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-input-number",class:[e.size?"el-input-number--"+e.size:"",{"is-disabled":e.disabled},{"is-without-controls":!e.controls}]},[e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.decrease,expression:"decrease"}],staticClass:"el-input-number__decrease",class:{"is-disabled":e.minDisabled}},[i("i",{staticClass:"el-icon-minus"})]):e._e(),e.controls?i("span",{directives:[{name:"repeat-click",rawName:"v-repeat-click",value:e.increase,expression:"increase"}],staticClass:"el-input-number__increase",class:{"is-disabled":e.maxDisabled}},[i("i",{staticClass:"el-icon-plus"})]):e._e(),i("el-input",{ref:"input",attrs:{value:e.currentValue,disabled:e.disabled,size:e.size,max:e.max,min:e.min},on:{blur:e.handleBlur,input:e.handleInput},nativeOn:{keydown:[function(t){e._k(t.keyCode,"up",38)||(t.preventDefault(),e.increase(t))},function(t){e._k(t.keyCode,"down",40)||(t.preventDefault(),e.decrease(t))}]}},[e.$slots.prepend?i("template",{slot:"prepend"},[e._t("prepend")],2):e._e(),e.$slots.append?i("template",{slot:"append"},[e._t("append")],2):e._e()],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(672),o=n(s);o.default.install=function(e){e.component("el-radio",o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(673),i(674),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={name:"ElRadio",mixins:[o.default],componentName:"ElRadio",props:{value:{},label:{},disabled:Boolean,name:String},data:function(){return{focus:!1}},computed:{isGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return this._radioGroup=e,!0;e=e.$parent}return!1},model:{get:function(){return this.isGroup?this._radioGroup.value:this.value},set:function(e){this.isGroup?this.dispatch("ElRadioGroup","input",[e]):this.$emit("input",e)}},isDisabled:function(){return this.isGroup?this._radioGroup.disabled||this.disabled:this.disabled}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio"},[i("span",{staticClass:"el-radio__input",class:{"is-disabled":e.isDisabled,"is-checked":e.model===e.label,"is-focus":e.focus}},[i("span",{staticClass:"el-radio__inner"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-radio__original",attrs:{type:"radio",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:e._q(e.model,e.label)},on:{focus:function(t){e.focus=!0},blur:function(t){e.focus=!1},change:function(t){e.model=e.label}}})]),i("span",{staticClass:"el-radio__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(676),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(677),i(678),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={name:"ElRadioGroup",componentName:"ElRadioGroup",mixins:[o.default],props:{value:{},size:String,fill:String,textColor:String,disabled:Boolean},watch:{value:function(e){this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",[this.value])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-radio-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(680),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(681),i(682),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElRadioButton",props:{label:{},disabled:Boolean,name:String},computed:{value:{get:function(){return this._radioGroup.value},set:function(e){this._radioGroup.$emit("input",e)}},_radioGroup:function(){for(var e=this.$parent;e;){if("ElRadioGroup"===e.$options.componentName)return e;e=e.$parent}return!1},activeStyle:function(){return{backgroundColor:this._radioGroup.fill||"",borderColor:this._radioGroup.fill||"",boxShadow:this._radioGroup.fill?"-1px 0 0 0 "+this._radioGroup.fill:"",color:this._radioGroup.textColor||""}},size:function(){return this._radioGroup.size},isDisabled:function(){return this.disabled||this._radioGroup.disabled}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-radio-button",class:[e.size?"el-radio-button--"+e.size:"",{"is-active":e.value===e.label},{"is-disabled":e.isDisabled}]},[i("input",{directives:[{name:"model",rawName:"v-model",value:e.value,expression:"value"}],staticClass:"el-radio-button__orig-radio",attrs:{type:"radio",name:e.name,disabled:e.isDisabled},domProps:{value:e.label,checked:e._q(e.value,e.label)},on:{change:function(t){e.value=e.label}}}),i("span",{staticClass:"el-radio-button__inner",style:e.value===e.label?e.activeStyle:null},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(684),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(685),i(686),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={name:"ElCheckbox",mixins:[o.default],componentName:"ElCheckbox",data:function(){return{selfModel:!1,focus:!1}},computed:{model:{get:function(){return this.isGroup?this.store:void 0!==this.value?this.value:this.selfModel},set:function(e){if(this.isGroup){var t=!1;void 0!==this._checkboxGroup.min&&e.length<this._checkboxGroup.min&&(t=!0),void 0!==this._checkboxGroup.max&&e.length>this._checkboxGroup.max&&(t=!0),t===!1&&this.dispatch("ElCheckboxGroup","input",[e])}else void 0!==this.value?this.$emit("input",e):this.selfModel=e}},isChecked:function(){return"[object Boolean]"==={}.toString.call(this.model)?this.model:Array.isArray(this.model)?this.model.indexOf(this.label)>-1:null!==this.model&&void 0!==this.model?this.model===this.trueLabel:void 0},isGroup:function(){for(var e=this.$parent;e;){if("ElCheckboxGroup"===e.$options.componentName)return this._checkboxGroup=e,!0;e=e.$parent}return!1},store:function(){return this._checkboxGroup?this._checkboxGroup.value:this.value}},props:{value:{},label:{},indeterminate:Boolean,disabled:Boolean,checked:Boolean,name:String,trueLabel:[String,Number],falseLabel:[String,Number]},methods:{addToStore:function(){Array.isArray(this.model)&&this.model.indexOf(this.label)===-1?this.model.push(this.label):this.model=this.trueLabel||!0},handleChange:function(e){var t=this;this.$emit("change",e),this.isGroup&&this.$nextTick(function(e){t.dispatch("ElCheckboxGroup","change",[t._checkboxGroup.value])})}},created:function(){this.checked&&this.addToStore()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-checkbox"},[i("span",{staticClass:"el-checkbox__input",class:{"is-disabled":e.disabled,"is-checked":e.isChecked,"is-indeterminate":e.indeterminate,"is-focus":e.focus}},[i("span",{staticClass:"el-checkbox__inner"}),e.trueLabel||e.falseLabel?i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",name:e.name,disabled:e.disabled,"true-value":e.trueLabel,"false-value":e.falseLabel},domProps:{checked:Array.isArray(e.model)?e._i(e.model,null)>-1:e._q(e.model,e.trueLabel)},on:{change:[function(t){var i=e.model,n=t.target,s=n.checked?e.trueLabel:e.falseLabel;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}}):i("input",{directives:[{name:"model",rawName:"v-model",value:e.model,expression:"model"}],staticClass:"el-checkbox__original",attrs:{type:"checkbox",disabled:e.disabled,name:e.name},domProps:{value:e.label,checked:Array.isArray(e.model)?e._i(e.model,e.label)>-1:e.model},on:{change:[function(t){var i=e.model,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=e.label,a=e._i(i,o);s?a<0&&(e.model=i.concat(o)):a>-1&&(e.model=i.slice(0,a).concat(i.slice(a+1)))}else e.model=s},e.handleChange],focus:function(t){e.focus=!0},blur:function(t){e.focus=!1}}})]),e.$slots.default||e.label?i("span",{staticClass:"el-checkbox__label"},[e._t("default"),e.$slots.default?e._e():[e._v(e._s(e.label))]],2):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(688),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(689),i(690),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={name:"ElCheckboxGroup",componentName:"ElCheckboxGroup",mixins:[o.default],props:{value:{},min:Number,max:Number},watch:{value:function(e){this.dispatch("ElFormItem","el.form.change",[e])}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-checkbox-group"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(692),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(693),i(694),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSwitch",props:{value:{type:Boolean,default:!0},disabled:{type:Boolean,default:!1},width:{type:Number,default:0},onIconClass:{type:String,default:""},offIconClass:{type:String,default:""},onText:{type:String,default:"ON"},offText:{type:String,default:"OFF"},onColor:{type:String,default:""},offColor:{type:String,default:""},name:{type:String,default:""}},data:function(){return{coreWidth:this.width}},computed:{hasText:function(){return this.onText||this.offText},_value:{get:function(){return this.value},set:function(e){this.$emit("input",e)}},transform:function(){return this.value?"translate("+(this.coreWidth-20)+"px, 2px)":"translate(2px, 2px)"}},watch:{value:function(){(this.onColor||this.offColor)&&this.setBackgroundColor()}},methods:{handleChange:function(e){this.$emit("change",e.currentTarget.checked)},setBackgroundColor:function(){var e=this.value?this.onColor:this.offColor;this.$refs.core.style.borderColor=e,this.$refs.core.style.backgroundColor=e}},mounted:function(){0===this.width&&(this.coreWidth=this.hasText?58:46),(this.onColor||this.offColor)&&this.setBackgroundColor()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("label",{staticClass:"el-switch",class:{"is-disabled":e.disabled,"el-switch--wide":e.hasText}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.disabled,expression:"disabled"}],staticClass:"el-switch__mask"}),i("input",{directives:[{name:"model",rawName:"v-model",value:e._value,expression:"_value"}],staticClass:"el-switch__input",attrs:{type:"checkbox",name:e.name,disabled:e.disabled},domProps:{checked:Array.isArray(e._value)?e._i(e._value,null)>-1:e._value},on:{change:[function(t){var i=e._value,n=t.target,s=!!n.checked;if(Array.isArray(i)){var o=null,a=e._i(i,o);s?a<0&&(e._value=i.concat(o)):a>-1&&(e._value=i.slice(0,a).concat(i.slice(a+1)))}else e._value=s},e.handleChange]}}),i("span",{ref:"core",staticClass:"el-switch__core",style:{width:e.coreWidth+"px"}},[i("span",{staticClass:"el-switch__button",style:{transform:e.transform}})]),i("transition",{attrs:{name:"label-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.value,expression:"value"}],staticClass:"el-switch__label el-switch__label--left",style:{width:e.coreWidth+"px"}},[e.onIconClass?i("i",{class:[e.onIconClass]}):e._e(),!e.onIconClass&&e.onText?i("span",[e._v(e._s(e.onText))]):e._e()])]),i("transition",{attrs:{name:"label-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.value,expression:"!value"}],staticClass:"el-switch__label el-switch__label--right",style:{width:e.coreWidth+"px"}},[e.offIconClass?i("i",{class:[e.offIconClass]}):e._e(),!e.offIconClass&&e.offText?i("span",[e._v(e._s(e.offText))]):e._e()])])],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(696),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(697),i(698),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s);t.default={mixins:[o.default],name:"ElOptionGroup",componentName:"ElOptionGroup",props:{label:String,disabled:{type:Boolean,default:!1}},data:function(){return{visible:!0}},watch:{disabled:function(e){this.broadcast("ElOption","handleGroupDisabled",e)}},methods:{queryChange:function(){this.visible=this.$children&&Array.isArray(this.$children)&&this.$children.some(function(e){return e.visible===!0})}},created:function(){this.$on("queryChange",this.queryChange)},mounted:function(){this.disabled&&this.broadcast("ElOption","handleGroupDisabled",this.disabled)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("ul",{staticClass:"el-select-group__wrap"},[i("li",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-select-group__title"},[e._v(e._s(e.label))]),i("li",[i("ul",{staticClass:"el-select-group"},[e._t("default")],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(700),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(701),i(714),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(683),o=n(s),a=i(31),r=n(a),l=i(615),u=n(l),c=i(612),d=i(588),h=n(d),f=i(702),p=n(f),m=i(704),v=n(m),g=i(705),y=n(g),b=i(709),_=n(b),C=i(703),x=1;t.default={name:"ElTable",mixins:[h.default],props:{data:{type:Array,default:function(){return[]}},width:[String,Number],height:[String,Number],maxHeight:[String,Number],fit:{type:Boolean,default:!0},stripe:Boolean,border:Boolean,rowKey:[String,Function],context:{},showHeader:{type:Boolean,default:!0},rowClassName:[String,Function],rowStyle:[Object,Function],highlightCurrentRow:Boolean,currentRowKey:[String,Number],emptyText:String,expandRowKeys:Array,defaultExpandAll:Boolean,defaultSort:Object,tooltipEffect:String},components:{TableHeader:_.default,TableBody:y.default,ElCheckbox:o.default},methods:{toggleRowSelection:function(e,t){this.store.toggleRowSelection(e,t),this.store.updateAllSelected()},clearSelection:function(){this.store.clearSelection()},handleMouseLeave:function(){this.store.commit("setHoverRow",null),this.hoverState&&(this.hoverState=null)},updateScrollY:function(){this.layout.updateScrollY()},bindEvents:function(){var e=this,t=this.$refs.headerWrapper,i=this.$refs;this.bodyWrapper.addEventListener("scroll",function(){t&&(t.scrollLeft=this.scrollLeft),i.fixedBodyWrapper&&(i.fixedBodyWrapper.scrollTop=this.scrollTop),i.rightFixedBodyWrapper&&(i.rightFixedBodyWrapper.scrollTop=this.scrollTop)}),t&&(0,C.mousewheel)(t,(0,r.default)(16,function(t){var i=t.deltaX;i>0?e.bodyWrapper.scrollLeft+=10:e.bodyWrapper.scrollLeft-=10})),this.fit&&(this.windowResizeListener=(0,r.default)(50,function(){e.$ready&&e.doLayout()}),(0,c.addResizeListener)(this.$el,this.windowResizeListener))},doLayout:function(){var e=this;this.store.updateColumns(),this.layout.update(),this.updateScrollY(),this.$nextTick(function(){e.height?e.layout.setHeight(e.height):e.maxHeight?e.layout.setMaxHeight(e.maxHeight):e.shouldUpdateHeight&&e.layout.updateHeight()})}},created:function(){var e=this;this.tableId="el-table_"+x+"_",this.debouncedLayout=(0,u.default)(50,function(){return e.doLayout()})},computed:{bodyWrapper:function(){return this.$refs.bodyWrapper},shouldUpdateHeight:function(){return"number"==typeof this.height||this.fixedColumns.length>0||this.rightFixedColumns.length>0},selection:function(){return this.store.selection},columns:function(){return this.store.states.columns},tableData:function(){return this.store.states.data},fixedColumns:function(){return this.store.states.fixedColumns},rightFixedColumns:function(){return this.store.states.rightFixedColumns},bodyHeight:function(){var e={};return this.height?e={height:this.layout.bodyHeight?this.layout.bodyHeight+"px":""}:this.maxHeight&&(e={"max-height":(this.showHeader?this.maxHeight-this.layout.headerHeight:this.maxHeight)+"px"}),e},bodyWidth:function e(){var t=this.layout,e=t.bodyWidth,i=t.scrollY,n=t.gutterWidth;return e?e-(i?n:0)+"px":""},fixedBodyHeight:function(){var e={};if(this.height)e={height:this.layout.fixedBodyHeight?this.layout.fixedBodyHeight+"px":""};else if(this.maxHeight){var t=this.layout.scrollX?this.maxHeight-this.layout.gutterWidth:this.maxHeight;this.showHeader&&(t-=this.layout.headerHeight),e={"max-height":t+"px"}}return e},fixedHeight:function(){var e={};return e=this.maxHeight?{bottom:this.layout.scrollX&&this.data.length?this.layout.gutterWidth+"px":""}:{height:this.layout.viewportHeight?this.layout.viewportHeight+"px":""}}},watch:{height:function(e){this.layout.setHeight(e)},currentRowKey:function(e){this.store.setCurrentRowKey(e)},data:{immediate:!0,handler:function(e){this.store.commit("setData",e)}},expandRowKeys:function(e){this.store.setExpandRowKeys(e)}},destroyed:function(){this.windowResizeListener&&(0,c.removeResizeListener)(this.$el,this.windowResizeListener)},mounted:function(){var e=this;this.bindEvents(),this.doLayout(),this.store.states.columns.forEach(function(t){t.filteredValue&&t.filteredValue.length&&e.store.commit("filterChange",{column:t,values:t.filteredValue,silent:!0})}),this.$ready=!0},data:function(){var e=new p.default(this,{rowKey:this.rowKey,defaultExpandAll:this.defaultExpandAll}),t=new v.default({store:e,table:this,fit:this.fit,showHeader:this.showHeader});return{store:e,layout:t,renderExpanded:null,resizeProxyVisible:!1}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(615),r=n(a),l=i(703),u=function(e,t){var i=t.sortingColumn;return i&&"string"!=typeof i.sortable?(0,l.orderBy)(e,t.sortProp,t.sortOrder,i.sortMethod):e},c=function(e,t){var i={};return(e||[]).forEach(function(e,n){i[(0,l.getRowIdentity)(e,t)]={row:e,index:n}}),i},d=function(e,t,i){var n=!1,s=e.selection,o=s.indexOf(t);return"undefined"==typeof i?o===-1?(s.push(t),n=!0):(s.splice(o,1),n=!0):i&&o===-1?(s.push(t),n=!0):!i&&o>-1&&(s.splice(o,1),n=!0),n},h=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(!e)throw new Error("Table is required.");this.table=e,this.states={rowKey:null,_columns:[],originColumns:[],columns:[],fixedColumns:[],rightFixedColumns:[],isComplex:!1,_data:null,filteredData:null,data:null,sortingColumn:null,sortProp:null,sortOrder:null,isAllSelected:!1,selection:[],reserveSelection:!1,selectable:null,currentRow:null,hoverRow:null,filters:{},expandRows:[],defaultExpandAll:!1};for(var i in t)t.hasOwnProperty(i)&&this.states.hasOwnProperty(i)&&(this.states[i]=t[i])};h.prototype.mutations={setData:function(e,t){var i=this,n=e._data!==t;e._data=t,e.data=u(t||[],e),this.updateCurrentRow(),e.reserveSelection?!function(){var t=e.rowKey;t?!function(){var n=e.selection,s=c(n,t);e.data.forEach(function(e){var i=(0,l.getRowIdentity)(e,t),o=s[i];o&&(n[o.index]=e)}),i.updateAllSelected()}():console.warn("WARN: rowKey is required when reserve-selection is enabled.")}():(n?this.clearSelection():this.cleanSelection(),this.updateAllSelected());var s=e.defaultExpandAll;s&&(this.states.expandRows=(e.data||[]).slice(0)),o.default.nextTick(function(){return i.table.updateScrollY()})},changeSortCondition:function(e){var t=this;e.data=u(e.filteredData||e._data||[],e),this.table.$emit("sort-change",{column:this.states.sortingColumn,prop:this.states.sortProp,order:this.states.sortOrder}),o.default.nextTick(function(){return t.table.updateScrollY()})},filterChange:function(e,t){var i=this,n=t.column,s=t.values,a=t.silent;s&&!Array.isArray(s)&&(s=[s]);var r=n.property,c={};r&&(e.filters[n.id]=s,c[n.columnKey||n.id]=s);var d=e._data;Object.keys(e.filters).forEach(function(t){var n=e.filters[t];if(n&&0!==n.length){var s=(0,l.getColumnById)(i.states,t);s&&s.filterMethod&&(d=d.filter(function(e){return n.some(function(t){return s.filterMethod.call(null,t,e)})}))}}),e.filteredData=d,e.data=u(d,e),a||this.table.$emit("filter-change",c),o.default.nextTick(function(){return i.table.updateScrollY()})},insertColumn:function(e,t,i,n){var s=e._columns;n&&(s=n.children,s||(s=n.children=[])),"undefined"!=typeof i?s.splice(i,0,t):s.push(t),"selection"===t.type&&(e.selectable=t.selectable,e.reserveSelection=t.reserveSelection),this.updateColumns(),this.scheduleLayout()},removeColumn:function(e,t){var i=e._columns;i&&i.splice(i.indexOf(t),1),this.updateColumns(),
-this.scheduleLayout()},setHoverRow:function(e,t){e.hoverRow=t},setCurrentRow:function(e,t){var i=e.currentRow;e.currentRow=t,i!==t&&this.table.$emit("current-change",t,i)},rowSelectedChanged:function(e,t){var i=d(e,t),n=e.selection;if(i){var s=this.table;s.$emit("selection-change",n),s.$emit("select",n,t)}this.updateAllSelected()},toggleRowExpanded:function(e,t,i){var n=e.expandRows;if("undefined"!=typeof i){var s=n.indexOf(t);i?s===-1&&n.push(t):s!==-1&&n.splice(s,1)}else{var o=n.indexOf(t);o===-1?n.push(t):n.splice(o,1)}this.table.$emit("expand",t,n.indexOf(t)!==-1)},toggleAllSelection:(0,r.default)(10,function(e){var t=e.data||[],i=!e.isAllSelected,n=this.states.selection,s=!1;t.forEach(function(t,n){e.selectable?e.selectable.call(null,t,n)&&d(e,t,i)&&(s=!0):d(e,t,i)&&(s=!0)});var o=this.table;s&&o.$emit("selection-change",n),o.$emit("select-all",n),e.isAllSelected=i})};var f=function e(t){var i=[];return t.forEach(function(t){t.children?i.push.apply(i,e(t.children)):i.push(t)}),i};h.prototype.updateColumns=function(){var e=this.states,t=e._columns||[];e.fixedColumns=t.filter(function(e){return e.fixed===!0||"left"===e.fixed}),e.rightFixedColumns=t.filter(function(e){return"right"===e.fixed}),e.fixedColumns.length>0&&t[0]&&"selection"===t[0].type&&!t[0].fixed&&(t[0].fixed=!0,e.fixedColumns.unshift(t[0])),e.originColumns=[].concat(e.fixedColumns).concat(t.filter(function(e){return!e.fixed})).concat(e.rightFixedColumns),e.columns=f(e.originColumns),e.isComplex=e.fixedColumns.length>0||e.rightFixedColumns.length>0},h.prototype.isSelected=function(e){return(this.states.selection||[]).indexOf(e)>-1},h.prototype.clearSelection=function(){var e=this.states;e.isAllSelected=!1;var t=e.selection;e.selection=[],t.length>0&&this.table.$emit("selection-change",e.selection)},h.prototype.setExpandRowKeys=function(e){var t=[],i=this.states.data,n=this.states.rowKey;if(!n)throw new Error("[Table] prop row-key should not be empty.");var s=c(i,n);e.forEach(function(e){var i=s[e];i&&t.push(i.row)}),this.states.expandRows=t},h.prototype.toggleRowSelection=function(e,t){var i=d(this.states,e,t);i&&this.table.$emit("selection-change",this.states.selection)},h.prototype.cleanSelection=function(){var e=this.states.selection||[],t=this.states.data,i=this.states.rowKey,n=void 0;if(i){n=[];var s=c(e,i),o=c(t,i);for(var a in s)s.hasOwnProperty(a)&&!o[a]&&n.push(s[a].row)}else n=e.filter(function(e){return t.indexOf(e)===-1});n.forEach(function(t){e.splice(e.indexOf(t),1)}),n.length&&this.table.$emit("selection-change",e)},h.prototype.updateAllSelected=function(){var e=this.states,t=e.selection,i=e.rowKey,n=e.selectable,s=e.data;if(!s||0===s.length)return void(e.isAllSelected=!1);var o=void 0;i&&(o=c(e.selection,i));for(var a=function(e){return o?!!o[(0,l.getRowIdentity)(e,i)]:t.indexOf(e)!==-1},r=!0,u=0,d=0,h=s.length;d<h;d++){var f=s[d];if(n){var p=n.call(null,f,d);if(p){if(!a(f)){r=!1;break}u++}}else{if(!a(f)){r=!1;break}u++}}0===u&&(r=!1),e.isAllSelected=r},h.prototype.scheduleLayout=function(){this.table.debouncedLayout()},h.prototype.setCurrentRowKey=function(e){var t=this.states,i=t.rowKey;if(!i)throw new Error("[Table] row-key should not be empty.");var n=t.data||[],s=c(n,i),o=s[e];o&&(t.currentRow=o.row)},h.prototype.updateCurrentRow=function(){var e=this.states,t=this.table,i=e.data||[],n=e.currentRow;i.indexOf(n)===-1&&(e.currentRow=null,e.currentRow!==n&&t.$emit("current-change",null,n))},h.prototype.commit=function(e){var t=this.mutations;if(!t[e])throw new Error("Action not found: "+e);for(var i=arguments.length,n=Array(i>1?i-1:0),s=1;s<i;s++)n[s-1]=arguments[s];t[e].apply(this,[this.states].concat(n))},t.default=h},function(e,t){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},n=(t.getCell=function(e){for(var t=e.target;t&&"HTML"!==t.tagName.toUpperCase();){if("TD"===t.tagName.toUpperCase())return t;t=t.parentNode}return null},t.getValueByPath=function(e,t){t=t||"";for(var i=t.split("."),n=e,s=null,o=0,a=i.length;o<a;o++){var r=i[o];if(!n)break;if(o===a-1){s=n[r];break}n=n[r]}return s}),s=function(e){return null!==e&&"object"===("undefined"==typeof e?"undefined":i(e))},o=(t.orderBy=function(e,t,i,o){if("string"==typeof i&&(i="descending"===i?-1:1),!t)return e;var a=i&&i<0?-1:1;return e.slice().sort(o?function(e,t){return o(e,t)?a:-a}:function(e,i){return"$key"!==t&&(s(e)&&"$value"in e&&(e=e.$value),s(i)&&"$value"in i&&(i=i.$value)),e=s(e)?n(e,t):e,i=s(i)?n(i,t):i,e===i?0:e>i?a:-a})},t.getColumnById=function(e,t){var i=null;return e.columns.forEach(function(e){e.id===t&&(i=e)}),i}),a=(t.getColumnByCell=function(e,t){var i=(t.className||"").match(/el-table_[^\s]+/gm);return i?o(e,i[0]):null},"undefined"!=typeof navigator&&navigator.userAgent.toLowerCase().indexOf("firefox")>-1);t.mousewheel=function(e,t){e&&e.addEventListener&&e.addEventListener(a?"DOMMouseScroll":"mousewheel",t)},t.getRowIdentity=function(e,t){if(!e)throw new Error("row is required when get row identity");return"string"==typeof t?e[t]:"function"==typeof t?t.call(null,e):void 0}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=i(600),a=n(o),r=function(){function e(t){s(this,e),this.table=null,this.store=null,this.columns=null,this.fit=!0,this.showHeader=!0,this.height=null,this.scrollX=!1,this.scrollY=!1,this.bodyWidth=null,this.fixedWidth=null,this.rightFixedWidth=null,this.tableHeight=null,this.headerHeight=44,this.viewportHeight=null,this.bodyHeight=null,this.fixedBodyHeight=null,this.gutterWidth=(0,a.default)();for(var i in t)t.hasOwnProperty(i)&&(this[i]=t[i]);if(!this.table)throw new Error("table is required for Table Layout");if(!this.store)throw new Error("store is required for Table Layout")}return e.prototype.updateScrollY=function(){var e=this.height;if("string"==typeof e||"number"==typeof e){var t=this.table.bodyWrapper;if(this.table.$el&&t){var i=t.querySelector(".el-table__body");this.scrollY=i.offsetHeight>t.offsetHeight}}},e.prototype.setHeight=function(e){var t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:"height",i=this.table.$el;"string"==typeof e&&/^\d+$/.test(e)&&(e=Number(e)),this.height=e,i&&("number"==typeof e?(i.style[t]=e+"px",this.updateHeight()):"string"==typeof e&&(""===e&&(i.style[t]=""),this.updateHeight()))},e.prototype.setMaxHeight=function(e){return this.setHeight(e,"max-height")},e.prototype.updateHeight=function(){var e=this.tableHeight=this.table.$el.clientHeight,t=!this.table.data||0===this.table.data.length,i=this.table.$refs.headerWrapper;if(!this.showHeader||i){if(this.showHeader){var n=this.headerHeight=i.offsetHeight,s=e-n;null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=s),this.fixedBodyHeight=this.scrollX?s-this.gutterWidth:s}else this.headerHeight=0,null===this.height||isNaN(this.height)&&"string"!=typeof this.height||(this.bodyHeight=e),this.fixedBodyHeight=this.scrollX?e-this.gutterWidth:e;this.viewportHeight=this.scrollX?e-(t?0:this.gutterWidth):e}},e.prototype.update=function(){var e=this.fit,t=this.table.columns,i=this.table.$el.clientWidth,n=0,s=[];t.forEach(function(e){e.isColumnGroup?s.push.apply(s,e.columns):s.push(e)});var o=s.filter(function(e){return"number"!=typeof e.width});if(o.length>0&&e){if(s.forEach(function(e){n+=e.width||e.minWidth||80}),n<i-this.gutterWidth){this.scrollX=!1;var a=i-this.gutterWidth-n;1===o.length?o[0].realWidth=(o[0].minWidth||80)+a:!function(){var e=o.reduce(function(e,t){return e+(t.minWidth||80)},0),t=a/e,i=0;o.forEach(function(e,n){if(0!==n){var s=Math.floor((e.minWidth||80)*t);i+=s,e.realWidth=(e.minWidth||80)+s}}),o[0].realWidth=(o[0].minWidth||80)+a-i}()}else this.scrollX=!0,o.forEach(function(e){e.realWidth=e.minWidth});this.bodyWidth=Math.max(n,i)}else s.forEach(function(e){e.width||e.minWidth?e.realWidth=e.width||e.minWidth:e.realWidth=80,n+=e.realWidth}),this.scrollX=n>i,this.bodyWidth=n;var r=this.store.states.fixedColumns;if(r.length>0){var l=0;r.forEach(function(e){l+=e.realWidth}),this.fixedWidth=l}var u=this.store.states.rightFixedColumns;if(u.length>0){var c=0;u.forEach(function(e){c+=e.realWidth}),this.rightFixedWidth=c}},e}();t.default=r},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(703),o=i(71),a=i(683),r=n(a),l=i(706),u=n(l),c=i(615),d=n(c);t.default={components:{ElCheckbox:r.default,ElTooltip:u.default},props:{store:{required:!0},context:{},layout:{required:!0},rowClassName:[String,Function],rowStyle:[Object,Function],fixed:String,highlight:Boolean},render:function(e){var t=this,i=this.columns.map(function(e,i){return t.isColumnHidden(i)});return e("table",{class:"el-table__body",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])})]),e("tbody",null,[this._l(this.data,function(n,s){return[e("tr",{style:t.rowStyle?t.getRowStyle(n,s):null,key:t.table.rowKey?t.getKeyOfRow(n,s):s,on:{dblclick:function(e){return t.handleDoubleClick(e,n)},click:function(e){return t.handleClick(e,n)},contextmenu:function(e){return t.handleContextMenu(e,n)},mouseenter:function(e){return t.handleMouseEnter(s)},mouseleave:function(e){return t.handleMouseLeave()}},class:[t.getRowClass(n,s)]},[t._l(t.columns,function(o,a){return e("td",{class:[o.id,o.align,o.className||"",i[a]?"is-hidden":""],on:{mouseenter:function(e){return t.handleCellMouseEnter(e,n)},mouseleave:t.handleCellMouseLeave}},[o.renderCell.call(t._renderProxy,e,{row:n,column:o,$index:s,store:t.store,_self:t.context||t.table.$vnode.context},i[a])])}),!t.fixed&&t.layout.scrollY&&t.layout.gutterWidth?e("td",{class:"gutter"},[]):""]),t.store.states.expandRows.indexOf(n)>-1?e("tr",null,[e("td",{attrs:{colspan:t.columns.length},class:"el-table__expanded-cell"},[t.table.renderExpanded?t.table.renderExpanded(e,{row:n,$index:s,store:t.store}):""])]):""]}).concat(e("el-tooltip",{attrs:{effect:this.table.tooltipEffect,placement:"top",content:this.tooltipContent},ref:"tooltip"},[]))])])},watch:{"store.states.hoverRow":function(e,t){if(this.store.states.isComplex){var i=this.$el;if(i){var n=i.querySelectorAll("tbody > tr"),s=n[t],o=n[e];s&&s.classList.remove("hover-row"),o&&o.classList.add("hover-row")}}},"store.states.currentRow":function(e,t){if(this.highlight){var i=this.$el;if(i){var n=this.store.states.data,s=i.querySelectorAll("tbody > tr"),o=s[n.indexOf(t)],a=s[n.indexOf(e)];o?o.classList.remove("current-row"):s&&[].forEach.call(s,function(e){return e.classList.remove("current-row")}),a&&a.classList.add("current-row")}}}},computed:{table:function(){return this.$parent},data:function(){return this.store.states.data},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},data:function(){return{tooltipContent:""}},created:function(){this.activateTooltip=(0,d.default)(50,function(e){return e.handleShowPopper()})},methods:{getKeyOfRow:function(e,t){var i=this.table.rowKey;return i?(0,s.getRowIdentity)(e,i):t},isColumnHidden:function(e){return this.fixed===!0||"left"===this.fixed?e>=this.leftFixedCount:"right"===this.fixed?e<this.columnsCount-this.rightFixedCount:e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount},getRowStyle:function(e,t){var i=this.rowStyle;return"function"==typeof i?i.call(null,e,t):i},getRowClass:function(e,t){var i=[],n=this.rowClassName;return"string"==typeof n?i.push(n):"function"==typeof n&&i.push(n.call(null,e,t)||""),i.join(" ")},handleCellMouseEnter:function(e,t){var i=this.table,n=(0,s.getCell)(e);if(n){var a=(0,s.getColumnByCell)(i,n),r=i.hoverState={cell:n,column:a,row:t};i.$emit("cell-mouse-enter",r.row,r.column,r.cell,e)}var l=e.target.querySelector(".cell");if((0,o.hasClass)(l,"el-tooltip")&&l.scrollWidth>l.offsetWidth){var u=this.$refs.tooltip;this.tooltipContent=n.innerText,u.referenceElm=n,u.$refs.popper.style.display="none",u.doDestroy(),u.setExpectedState(!0),this.activateTooltip(u)}},handleCellMouseLeave:function(e){var t=this.$refs.tooltip;t&&(t.setExpectedState(!1),t.handleClosePopper());var i=(0,s.getCell)(e);if(i){var n=this.table.hoverState;this.table.$emit("cell-mouse-leave",n.row,n.column,n.cell,e)}},handleMouseEnter:function(e){this.store.commit("setHoverRow",e)},handleMouseLeave:function(){this.store.commit("setHoverRow",null)},handleContextMenu:function(e,t){this.handleEvent(e,t,"contextmenu")},handleDoubleClick:function(e,t){this.handleEvent(e,t,"dblclick")},handleClick:function(e,t){this.store.commit("setCurrentRow",t),this.handleEvent(e,t,"click")},handleEvent:function(e,t,i){var n=this.table,o=(0,s.getCell)(e),a=void 0;o&&(a=(0,s.getColumnByCell)(n,o),a&&n.$emit("cell-"+i,t,a,o,e)),n.$emit("row-"+i,t,e,a)},handleExpandClick:function(e){this.store.commit("toggleRowExpanded",e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(707),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(597),o=n(s),a=i(615),r=n(a),l=i(708),u=i(2),c=n(u);t.default={name:"ElTooltip",mixins:[o.default],props:{openDelay:{type:Number,default:0},disabled:Boolean,manual:Boolean,effect:{type:String,default:"dark"},popperClass:String,content:String,visibleArrow:{default:!0},transition:{type:String,default:"fade-in-linear"},popperOptions:{default:function(){return{boundariesPadding:10,gpuAcceleration:!1}}},enterable:{type:Boolean,default:!0}},beforeCreate:function(){var e=this;this.$isServer||(this.popperVM=new c.default({data:{node:""},render:function(e){return this.node}}).$mount(),this.debounceClose=(0,r.default)(200,function(){return e.handleClosePopper()}))},render:function(e){var t=this;if(this.popperVM&&(this.popperVM.node=e("transition",{attrs:{name:this.transition},on:{afterLeave:this.doDestroy}},[e("div",{on:{mouseleave:function(){t.setExpectedState(!1),t.debounceClose()},mouseenter:function(){t.setExpectedState(!0)}},ref:"popper",directives:[{name:"show",value:!this.disabled&&this.showPopper}],class:["el-tooltip__popper","is-"+this.effect,this.popperClass]},[this.$slots.content||this.content])])),!this.$slots.default||!this.$slots.default.length)return this.$slots.default;var i=(0,l.getFirstComponentChild)(this.$slots.default);if(!i)return i;var n=i.data=i.data||{},s=i.data.on=i.data.on||{};return s.mouseenter=this.addEventHandle(s.mouseenter,function(){t.setExpectedState(!0),t.handleShowPopper()}),s.mouseleave=this.addEventHandle(s.mouseleave,function(){t.setExpectedState(!1),t.debounceClose()}),n.staticClass=this.concatClass(n.staticClass,"el-tooltip"),i},mounted:function(){this.referenceElm=this.$el},methods:{addEventHandle:function(e,t){return e?Array.isArray(e)?e.concat(t):[e,t]:t},concatClass:function(e,t){return e&&e.indexOf(t)>-1?e:e?t?e+" "+t:e:t||""},handleShowPopper:function(){var e=this;this.expectedState&&!this.manual&&(clearTimeout(this.timeout),this.timeout=setTimeout(function(){e.showPopper=!0},this.openDelay))},handleClosePopper:function(){this.enterable&&this.expectedState||this.manual||(clearTimeout(this.timeout),this.showPopper=!1)},setExpectedState:function(e){this.expectedState=e}}}},function(e,t,i){"use strict";function n(e){return"object"===("undefined"==typeof e?"undefined":o(e))&&(0,a.hasOwn)(e,"componentOptions")}function s(e){return e&&e.filter(function(e){return e&&e.tag})[0]}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.isVNode=n,t.getFirstComponentChild=s;var a=i(19)},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(683),o=n(s),a=i(606),r=n(a),l=i(2),u=n(l),c=i(710),d=n(c),h=function e(t){var i=[];return t.forEach(function(t){t.children?(i.push(t),i.push.apply(i,e(t.children))):i.push(t)}),i},f=function(e){var t=1,i=function e(i,n){if(n&&(i.level=n.level+1,t<i.level&&(t=i.level)),i.children){var s=0;i.children.forEach(function(t){e(t,i),s+=t.colSpan}),i.colSpan=s}else i.colSpan=1};e.forEach(function(e){e.level=1,i(e)});for(var n=[],s=0;s<t;s++)n.push([]);var o=h(e);return o.forEach(function(e){e.children?e.rowSpan=1:e.rowSpan=t-e.level+1,n[e.level-1].push(e)}),n};t.default={name:"ElTableHeader",render:function(e){var t=this,i=this.store.states.originColumns,n=f(i,this.columns);return e("table",{class:"el-table__header",attrs:{cellspacing:"0",cellpadding:"0",border:"0"}},[e("colgroup",null,[this._l(this.columns,function(t){return e("col",{attrs:{name:t.id,width:t.realWidth||t.width}},[])}),!this.fixed&&this.layout.gutterWidth?e("col",{attrs:{name:"gutter",width:this.layout.scrollY?this.layout.gutterWidth:""}},[]):""]),e("thead",null,[this._l(n,function(i,n){return e("tr",null,[t._l(i,function(s,o){return e("th",{attrs:{colspan:s.colSpan,rowspan:s.rowSpan},on:{mousemove:function(e){return t.handleMouseMove(e,s)},mouseout:t.handleMouseOut,mousedown:function(e){return t.handleMouseDown(e,s)},click:function(e){return t.handleHeaderClick(e,s)}},class:[s.id,s.order,s.headerAlign,s.className||"",0===n&&t.isCellHidden(o,i)?"is-hidden":"",s.children?"":"is-leaf",s.labelClassName]},[e("div",{class:["cell",s.filteredValue&&s.filteredValue.length>0?"highlight":"",s.labelClassName]},[s.renderHeader?s.renderHeader.call(t._renderProxy,e,{column:s,$index:o,store:t.store,_self:t.$parent.$vnode.context}):s.label,s.sortable?e("span",{class:"caret-wrapper",on:{click:function(e){return t.handleSortClick(e,s)}}},[e("i",{class:"sort-caret ascending",on:{click:function(e){return t.handleSortClick(e,s,"ascending")}}},[]),e("i",{class:"sort-caret descending",on:{click:function(e){return t.handleSortClick(e,s,"descending")}}},[])]):"",s.filterable?e("span",{class:"el-table__column-filter-trigger",on:{click:function(e){return t.handleFilterClick(e,s)}}},[e("i",{class:["el-icon-arrow-down",s.filterOpened?"el-icon-arrow-up":""]},[])]):""])])}),!t.fixed&&t.layout.gutterWidth?e("th",{class:"gutter",style:{width:t.layout.scrollY?t.layout.gutterWidth+"px":"0"}},[]):""])})])])},props:{fixed:String,store:{required:!0},layout:{required:!0},border:Boolean,defaultSort:{type:Object,default:function(){return{prop:"",order:""}}}},components:{ElCheckbox:o.default,ElTag:r.default},computed:{isAllSelected:function(){return this.store.states.isAllSelected},columnsCount:function(){return this.store.states.columns.length},leftFixedCount:function(){return this.store.states.fixedColumns.length},rightFixedCount:function(){return this.store.states.rightFixedColumns.length},columns:function(){return this.store.states.columns}},created:function(){this.filterPanels={}},mounted:function(){var e=this;this.defaultSort.prop&&!function(){var t=e.store.states;t.sortProp=e.defaultSort.prop,t.sortOrder=e.defaultSort.order||"ascending",e.$nextTick(function(i){for(var n=0,s=e.columns.length;n<s;n++){var o=e.columns[n];if(o.property===t.sortProp){o.order=t.sortOrder,t.sortingColumn=o;break}}t.sortingColumn&&e.store.commit("changeSortCondition")})}()},beforeDestroy:function(){var e=this.filterPanels;for(var t in e)e.hasOwnProperty(t)&&e[t]&&e[t].$destroy(!0)},methods:{isCellHidden:function(e,t){if(this.fixed===!0||"left"===this.fixed)return e>=this.leftFixedCount;if("right"===this.fixed){for(var i=0,n=0;n<e;n++)i+=t[n].colSpan;return i<this.columnsCount-this.rightFixedCount}return e<this.leftFixedCount||e>=this.columnsCount-this.rightFixedCount},toggleAllSelection:function(){this.store.commit("toggleAllSelection")},handleFilterClick:function(e,t){e.stopPropagation();var i=e.target,n=i.parentNode,s=this.$parent,o=this.filterPanels[t.id];return o&&t.filterOpened?void(o.showPopper=!1):(o||(o=new u.default(d.default),this.filterPanels[t.id]=o,o.table=s,o.cell=n,o.column=t,!this.$isServer&&o.$mount(document.createElement("div"))),void setTimeout(function(){o.showPopper=!0},16))},handleHeaderClick:function(e,t){!t.filters&&t.sortable?this.handleSortClick(e,t):t.filters&&!t.sortable&&this.handleFilterClick(e,t),this.$parent.$emit("header-click",t,e)},handleMouseDown:function(e,t){var i=this;this.$isServer||t.children&&t.children.length>0||this.draggingColumn&&this.border&&!function(){i.dragging=!0,i.$parent.resizeProxyVisible=!0;var n=i.$parent,s=n.$el,o=s.getBoundingClientRect().left,a=i.$el.querySelector("th."+t.id),r=a.getBoundingClientRect(),l=r.left-o+30;a.classList.add("noclick"),i.dragState={startMouseLeft:e.clientX,startLeft:r.right-o,startColumnLeft:r.left-o,tableLeft:o};var u=n.$refs.resizeProxy;u.style.left=i.dragState.startLeft+"px",document.onselectstart=function(){return!1},document.ondragstart=function(){return!1};var c=function(e){var t=e.clientX-i.dragState.startMouseLeft,n=i.dragState.startLeft+t;u.style.left=Math.max(l,n)+"px"},d=function s(){if(i.dragging){var o=i.dragState,r=o.startColumnLeft,l=o.startLeft,d=parseInt(u.style.left,10),h=d-r;t.width=t.realWidth=h,n.$emit("header-dragend",t.width,l-r,t,e),i.store.scheduleLayout(),document.body.style.cursor="",i.dragging=!1,i.draggingColumn=null,i.dragState={},n.resizeProxyVisible=!1}document.removeEventListener("mousemove",c),document.removeEventListener("mouseup",s),document.onselectstart=null,document.ondragstart=null,setTimeout(function(){a.classList.remove("noclick")},0)};document.addEventListener("mousemove",c),document.addEventListener("mouseup",d)}()},handleMouseMove:function(e,t){if(!(t.children&&t.children.length>0)){for(var i=e.target;i&&"TH"!==i.tagName;)i=i.parentNode;if(t&&t.resizable&&!this.dragging&&this.border){var n=i.getBoundingClientRect(),s=document.body.style;n.width>12&&n.right-e.pageX<8?(s.cursor="col-resize",this.draggingColumn=t):this.dragging||(s.cursor="",this.draggingColumn=null)}}},handleMouseOut:function(){this.$isServer||(document.body.style.cursor="")},toggleOrder:function(e){return e?"ascending"===e?"descending":null:"ascending"},handleSortClick:function(e,t,i){e.stopPropagation();for(var n=i||this.toggleOrder(t.order),s=e.target;s&&"TH"!==s.tagName;)s=s.parentNode;if(s&&"TH"===s.tagName&&s.classList.contains("noclick"))return void s.classList.remove("noclick");if(t.sortable){var o=this.store.states,a=o.sortProp,r=void 0,l=o.sortingColumn;l!==t&&(l&&(l.order=null),o.sortingColumn=t,a=t.property),n?r=t.order=n:(r=t.order=null,o.sortingColumn=null,a=null),o.sortProp=a,o.sortOrder=r,this.store.commit("changeSortCondition")}}},data:function(){return{draggingColumn:null,dragging:!1,dragState:{}}}}},function(e,t,i){var n=i(13)(i(711),i(713),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(597),o=n(s),a=i(598),r=i(588),l=n(r),u=i(616),c=n(u),d=i(712),h=n(d),f=i(683),p=n(f),m=i(687),v=n(m);t.default={name:"ElTableFilterPanel",mixins:[o.default,l.default],directives:{Clickoutside:c.default},components:{ElCheckbox:p.default,ElCheckboxGroup:v.default},props:{placement:{type:String,default:"bottom-end"}},customRender:function(e){return e("div",{class:"el-table-filter"},[e("div",{class:"el-table-filter__content"},[]),e("div",{class:"el-table-filter__bottom"},[e("button",{on:{click:this.handleConfirm}},[this.t("el.table.confirmFilter")]),e("button",{on:{click:this.handleReset}},[this.t("el.table.resetFilter")])])])},methods:{isActive:function(e){return e.value===this.filterValue},handleOutsideClick:function(){this.showPopper=!1},handleConfirm:function(){this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleReset:function(){this.filteredValue=[],this.confirmFilter(this.filteredValue),this.handleOutsideClick()},handleSelect:function(e){this.filterValue=e,"undefined"!=typeof e&&null!==e?this.confirmFilter(this.filteredValue):this.confirmFilter([]),this.handleOutsideClick()},confirmFilter:function(e){this.table.store.commit("filterChange",{column:this.column,values:e})}},data:function(){return{table:null,cell:null,column:null}},computed:{filters:function(){return this.column&&this.column.filters},filterValue:{get:function(){return(this.column.filteredValue||[])[0]},set:function(e){this.filteredValue&&("undefined"!=typeof e&&null!==e?this.filteredValue.splice(0,1,e):this.filteredValue.splice(0,1))}},filteredValue:{get:function(){return this.column?this.column.filteredValue||[]:[]},set:function(e){this.column&&(this.column.filteredValue=e)}},multiple:function(){return!this.column||this.column.filterMultiple}},mounted:function(){var e=this;this.popperElm=this.$el,this.referenceElm=this.cell,this.table.bodyWrapper.addEventListener("scroll",function(){e.updatePopper()}),this.$watch("showPopper",function(t){e.column&&(e.column.filterOpened=t),t?h.default.open(e):h.default.close(e)})},watch:{showPopper:function(e){e===!0&&parseInt(this.popperJS._popper.style.zIndex,10)<a.PopupManager.zIndex&&(this.popperJS._popper.style.zIndex=a.PopupManager.nextZIndex())}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=[];!o.default.prototype.$isServer&&document.addEventListener("click",function(e){a.forEach(function(t){var i=e.target;t&&t.$el&&(i===t.$el||t.$el.contains(i)||t.handleOutsideClick&&t.handleOutsideClick(e))})}),t.default={open:function(e){e&&a.push(e)},close:function(e){var t=a.indexOf(e);t!==-1&&a.splice(e,1)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"}},[e.multiple?i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[i("div",{staticClass:"el-table-filter__content"},[i("el-checkbox-group",{directives:[{name:"model",rawName:"v-model",value:e.filteredValue,expression:"filteredValue"}],staticClass:"el-table-filter__checkbox-group",domProps:{value:e.filteredValue},on:{input:function(t){e.filteredValue=t}}},e._l(e.filters,function(t){return i("el-checkbox",{attrs:{label:t.value}},[e._v(e._s(t.text))])}))],1),i("div",{staticClass:"el-table-filter__bottom"},[i("button",{class:{"is-disabled":0===e.filteredValue.length},attrs:{disabled:0===e.filteredValue.length},on:{click:e.handleConfirm}},[e._v(e._s(e.t("el.table.confirmFilter")))]),i("button",{on:{click:e.handleReset}},[e._v(e._s(e.t("el.table.resetFilter")))])])]):i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-table-filter"},[i("ul",{staticClass:"el-table-filter__list"},[i("li",{staticClass:"el-table-filter__list-item",class:{"is-active":!e.filterValue},on:{click:function(t){e.handleSelect(null)}}},[e._v(e._s(e.t("el.table.clearFilter")))]),e._l(e.filters,function(t){return i("li",{staticClass:"el-table-filter__list-item",class:{"is-active":e.isActive(t)},attrs:{label:t.value},on:{click:function(i){e.handleSelect(t.value)}}},[e._v(e._s(t.text))])})],2)])])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-table",class:{"el-table--fit":e.fit,"el-table--striped":e.stripe,"el-table--border":e.border,"el-table--fluid-height":e.maxHeight,"el-table--enable-row-hover":!e.store.states.isComplex,"el-table--enable-row-transition":!0},on:{mouseleave:function(t){e.handleMouseLeave(t)}}},[i("div",{ref:"hiddenColumns",staticClass:"hidden-columns"},[e._t("default")],2),e.showHeader?i("div",{ref:"headerWrapper",staticClass:"el-table__header-wrapper"},[i("table-header",{style:{width:e.layout.bodyWidth?e.layout.bodyWidth+"px":""},attrs:{store:e.store,layout:e.layout,border:e.border,"default-sort":e.defaultSort}})],1):e._e(),i("div",{ref:"bodyWrapper",staticClass:"el-table__body-wrapper",style:[e.bodyHeight]},[i("table-body",{style:{width:e.bodyWidth},attrs:{context:e.context,store:e.store,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}}),e.data&&0!==e.data.length?e._e():i("div",{staticClass:"el-table__empty-block",style:{width:e.bodyWidth}},[i("span",{staticClass:"el-table__empty-text"},[e._t("empty",[e._v(e._s(e.emptyText||e.t("el.table.emptyText")))])],2)])],1),e.fixedColumns.length>0?i("div",{ref:"fixedWrapper",staticClass:"el-table__fixed",style:[{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"fixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"fixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.fixedWidth?e.layout.fixedWidth+"px":""},attrs:{fixed:"left",store:e.store,layout:e.layout,highlight:e.highlightCurrentRow,"row-class-name":e.rowClassName,"row-style":e.rowStyle}})],1)]):e._e(),e.rightFixedColumns.length>0?i("div",{ref:"rightFixedWrapper",staticClass:"el-table__fixed-right",style:[{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},{right:e.layout.scrollY?(e.border?e.layout.gutterWidth:e.layout.gutterWidth||1)+"px":""},e.fixedHeight]},[e.showHeader?i("div",{ref:"rightFixedHeaderWrapper",staticClass:"el-table__fixed-header-wrapper"},[i("table-header",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",border:e.border,store:e.store,layout:e.layout}})],1):e._e(),i("div",{ref:"rightFixedBodyWrapper",staticClass:"el-table__fixed-body-wrapper",style:[{top:e.layout.headerHeight+"px"},e.fixedBodyHeight]},[i("table-body",{style:{width:e.layout.rightFixedWidth?e.layout.rightFixedWidth+"px":""},attrs:{fixed:"right",store:e.store,layout:e.layout,"row-class-name":e.rowClassName,"row-style":e.rowStyle,highlight:e.highlightCurrentRow}})],1)]):e._e(),e.rightFixedColumns.length>0?i("div",{staticClass:"el-table__fixed-right-patch",style:{width:e.layout.scrollY?e.layout.gutterWidth+"px":"0",height:e.layout.headerHeight+"px"}}):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:e.resizeProxyVisible,expression:"resizeProxyVisible"}],ref:"resizeProxy",staticClass:"el-table__column-resize-proxy"})])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(716),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(null==e)throw new TypeError("Cannot destructure undefined")}t.__esModule=!0;var o=i(683),a=n(o),r=i(606),l=n(r),u=i(593),c=n(u),d=i(703),h=1,f={default:{order:""},selection:{width:48,minWidth:48,realWidth:48,order:"",className:"el-table-column--selection"},expand:{width:48,minWidth:48,realWidth:48,order:""},index:{width:48,minWidth:48,realWidth:48,order:""}},p={selection:{renderHeader:function(e){return e("el-checkbox",{nativeOn:{click:this.toggleAllSelection},domProps:{value:this.isAllSelected}},[])},renderCell:function(e,t){var i=t.row,n=t.column,s=t.store,o=t.$index;return e("el-checkbox",{domProps:{value:s.isSelected(i)},attrs:{disabled:!!n.selectable&&!n.selectable.call(null,i,o)},on:{input:function(){s.commit("rowSelectedChanged",i)}}},[])},sortable:!1,resizable:!1},index:{renderHeader:function(e,t){var i=t.column;return i.label||"#"},renderCell:function(e,t){var i=t.$index;return e("div",null,[i+1])},sortable:!1},expand:{renderHeader:function(e,t){
-return s(t),""},renderCell:function(e,t,i){var n=t.row,s=t.store,o=s.states.expandRows.indexOf(n)>-1;return e("div",{class:"el-table__expand-icon "+(o?"el-table__expand-icon--expanded":""),on:{click:function(){return i.handleExpandClick(n)}}},[e("i",{class:"el-icon el-icon-arrow-right"},[])])},sortable:!1,resizable:!1,className:"el-table__expand-column"}},m=function(e,t){var i={};(0,c.default)(i,f[e||"default"]);for(var n in t)if(t.hasOwnProperty(n)){var s=t[n];"undefined"!=typeof s&&(i[n]=s)}return i.minWidth||(i.minWidth=80),i.realWidth=i.width||i.minWidth,i},v=function(e,t){var i=t.row,n=t.column,s=n.property;return n&&n.formatter?n.formatter(i,n):s&&s.indexOf(".")===-1?i[s]:(0,d.getValueByPath)(i,s)};t.default={name:"ElTableColumn",props:{type:{type:String,default:"default"},label:String,className:String,labelClassName:String,property:String,prop:String,width:{},minWidth:{},renderHeader:Function,sortable:{type:[String,Boolean],default:!1},sortMethod:Function,resizable:{type:Boolean,default:!0},context:{},columnKey:String,align:String,headerAlign:String,showTooltipWhenOverflow:Boolean,showOverflowTooltip:Boolean,fixed:[Boolean,String],formatter:Function,selectable:Function,reserveSelection:Boolean,filterMethod:Function,filteredValue:Array,filters:Array,filterMultiple:{type:Boolean,default:!0}},data:function(){return{isSubColumn:!1,columns:[]}},beforeCreate:function(){this.row={},this.column={},this.$index=0},components:{ElCheckbox:a.default,ElTag:l.default},computed:{owner:function(){for(var e=this.$parent;e&&!e.tableId;)e=e.$parent;return e}},created:function(){var e=this;this.customRender=this.$options.render,this.$options.render=function(t){return t("div",e.$slots.default)},this.columnId=(this.$parent.tableId||this.$parent.columnId+"_")+"column_"+h++;var t=this.$parent,i=this.owner;this.isSubColumn=i!==t;var n=this.type,s=this.width;void 0!==s&&(s=parseInt(s,10),isNaN(s)&&(s=null));var o=this.minWidth;void 0!==o&&(o=parseInt(o,10),isNaN(o)&&(o=80));var a=!1,r=m(n,{id:this.columnId,columnKey:this.columnKey,label:this.label,className:this.className,labelClassName:this.labelClassName,property:this.prop||this.property,type:n,renderCell:null,renderHeader:this.renderHeader,minWidth:o,width:s,isColumnGroup:a,context:this.context,align:this.align?"is-"+this.align:null,headerAlign:this.headerAlign?"is-"+this.headerAlign:this.align?"is-"+this.align:null,sortable:""===this.sortable||this.sortable,sortMethod:this.sortMethod,resizable:this.resizable,showOverflowTooltip:this.showOverflowTooltip||this.showTooltipWhenOverflow,formatter:this.formatter,selectable:this.selectable,reserveSelection:this.reserveSelection,fixed:""===this.fixed||this.fixed,filterMethod:this.filterMethod,filters:this.filters,filterable:this.filters||this.filterMethod,filterMultiple:this.filterMultiple,filterOpened:!1,filteredValue:this.filteredValue||[]});(0,c.default)(r,p[n]||{}),this.columnConfig=r;var l=r.renderCell,u=this;return"expand"===n?(i.renderExpanded=function(e,t){return u.$scopedSlots.default?u.$scopedSlots.default(t):u.$slots.default},void(r.renderCell=function(e,t){return e("div",{class:"cell"},[l(e,t,this._renderProxy)])})):void(r.renderCell=function(e,t){return u.$vnode.data.inlineTemplate?l=function(){if(t._self=u.context||t._self,"[object Object]"===Object.prototype.toString.call(t._self))for(var e in t._self)t.hasOwnProperty(e)||(t[e]=t._self[e]);return t._staticTrees=u._staticTrees,t.$options.staticRenderFns=u.$options.staticRenderFns,u.customRender.call(t)}:u.$scopedSlots.default&&(l=function(){return u.$scopedSlots.default(t)}),l||(l=v),u.showOverflowTooltip||u.showTooltipWhenOverflow?e("div",{class:"cell el-tooltip"},[l(e,t)]):e("div",{class:"cell"},[l(e,t)])})},destroyed:function(){this.$parent&&this.owner.store.commit("removeColumn",this.columnConfig)},watch:{label:function(e){this.columnConfig&&(this.columnConfig.label=e)},prop:function(e){this.columnConfig&&(this.columnConfig.property=e)},property:function(e){this.columnConfig&&(this.columnConfig.property=e)},filters:function(e){this.columnConfig&&(this.columnConfig.filters=e)},filterMultiple:function(e){this.columnConfig&&(this.columnConfig.filterMultiple=e)},align:function(e){this.columnConfig&&(this.columnConfig.align=e?"is-"+e:null,this.headerAlign||(this.columnConfig.headerAlign=e?"is-"+e:null))},headerAlign:function(e){this.columnConfig&&(this.columnConfig.headerAlign="is-"+(e?e:this.align))},width:function(e){this.columnConfig&&(this.columnConfig.width=e,this.owner.store.scheduleLayout())},minWidth:function(e){this.columnConfig&&(this.columnConfig.minWidth=e,this.owner.store.scheduleLayout())},fixed:function(e){this.columnConfig&&(this.columnConfig.fixed=e,this.owner.store.scheduleLayout())}},mounted:function(){var e=this.owner,t=this.$parent,i=void 0;i=this.isSubColumn?[].indexOf.call(t.$el.children,this.$el):[].indexOf.call(t.$refs.hiddenColumns.children,this.$el),e.store.commit("insertColumn",this.columnConfig,i,this.isSubColumn?t.columnConfig:null)}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(718),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(719),o=n(s),a=i(723),r=n(a),l=i(741),u=n(l),c=function(e){return"daterange"===e||"datetimerange"===e?u.default:r.default};t.default={mixins:[o.default],name:"ElDatePicker",props:{type:{type:String,default:"date"}},created:function(){this.panel=c(this.type)}}},function(e,t,i){var n=i(13)(i(720),i(722),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(616),r=n(a),l=i(721),u=i(597),c=n(u),d=i(587),h=n(d),f=i(589),p=n(f),m={props:{appendToBody:c.default.props.appendToBody,offset:c.default.props.offset,boundariesPadding:c.default.props.boundariesPadding},methods:c.default.methods,data:c.default.data,beforeDestroy:c.default.beforeDestroy},v={date:"yyyy-MM-dd",month:"yyyy-MM",datetime:"yyyy-MM-dd HH:mm:ss",time:"HH:mm:ss",week:"yyyywWW",timerange:"HH:mm:ss",daterange:"yyyy-MM-dd",datetimerange:"yyyy-MM-dd HH:mm:ss",year:"yyyy"},g=["date","datetime","time","time-select","week","month","year","daterange","timerange","datetimerange"],y=function(e,t){return(0,l.formatDate)(e,t)},b=function(e,t){return(0,l.parseDate)(e,t)},_=function(e,t,i){if(Array.isArray(e)&&2===e.length){var n=e[0],s=e[1];if(n&&s)return(0,l.formatDate)(n,t)+i+(0,l.formatDate)(s,t)}return""},C=function(e,t,i){var n=e.split(i);if(2===n.length){var s=n[0],o=n[1];return[(0,l.parseDate)(s,t),(0,l.parseDate)(o,t)]}return[]},x={default:{formatter:function(e){return e?""+e:""},parser:function(e){return void 0===e||""===e?null:e}},week:{formatter:function(e,t){var i=(0,l.formatDate)(e,t),n=(0,l.getWeekNumber)(e);return i=/WW/.test(i)?i.replace(/WW/,n<10?"0"+n:n):i.replace(/W/,n)},parser:function(e){var t=(e||"").split("w");if(2===t.length){var i=Number(t[0]),n=Number(t[1]);if(!isNaN(i)&&!isNaN(n)&&n<54)return e}return null}},date:{formatter:y,parser:b},datetime:{formatter:y,parser:b},daterange:{formatter:_,parser:C},datetimerange:{formatter:_,parser:C},timerange:{formatter:_,parser:C},time:{formatter:y,parser:b},month:{formatter:y,parser:b},year:{formatter:y,parser:b},number:{formatter:function(e){return e?""+e:""},parser:function(e){var t=Number(e);return isNaN(e)?null:t}}},w={left:"bottom-start",center:"bottom-center",right:"bottom-end"};t.default={mixins:[h.default,m],props:{size:String,format:String,readonly:Boolean,placeholder:String,disabled:Boolean,clearable:{type:Boolean,default:!0},popperClass:String,editable:{type:Boolean,default:!0},align:{type:String,default:"left"},value:{},rangeSeparator:{default:" - "},pickerOptions:{}},components:{ElInput:p.default},directives:{Clickoutside:r.default},data:function(){return{pickerVisible:!1,showClose:!1,currentValue:""}},watch:{pickerVisible:function(e){e||this.dispatch("ElFormItem","el.form.blur"),this.readonly||this.disabled||(e?this.showPicker():this.hidePicker())},currentValue:function(e){e||(this.picker&&"function"==typeof this.picker.handleClear?this.picker.handleClear():this.$emit("input"))},value:{immediate:!0,handler:function(e){this.currentValue=(0,l.isDate)(e)?new Date(e):e}},displayValue:function(e){this.$emit("change",e),this.dispatch("ElFormItem","el.form.change")}},computed:{reference:function(){return this.$refs.reference.$el},refInput:function(){return this.reference?this.reference.querySelector("input"):{}},valueIsEmpty:function(){var e=this.currentValue;if(Array.isArray(e)){for(var t=0,i=e.length;t<i;t++)if(e[t])return!1}else if(e)return!1;return!0},triggerClass:function(){return this.type.indexOf("time")!==-1?"el-icon-time":"el-icon-date"},selectionMode:function(){return"week"===this.type?"week":"month"===this.type?"month":"year"===this.type?"year":"day"},haveTrigger:function(){return"undefined"!=typeof this.showTrigger?this.showTrigger:g.indexOf(this.type)!==-1},displayValue:{get:function(){var e=this.currentValue;if(e){var t=(x[this.type]||x.default).formatter,i=v[this.type];return t(e,this.format||i,this.rangeSeparator)}},set:function(e){if(e){var t=this.type,i=(x[t]||x.default).parser,n=i(e,this.format||v[t],this.rangeSeparator);n&&this.picker&&(this.picker.value=n)}else this.$emit("input",e),this.picker.value=e;this.$forceUpdate()}}},created:function(){this.popperOptions={boundariesPadding:0,gpuAcceleration:!1},this.placement=w[this.align]||w.left},methods:{handleMouseEnterIcon:function(){this.readonly||this.disabled||!this.valueIsEmpty&&this.clearable&&(this.showClose=!0)},handleClickIcon:function(){this.readonly||this.disabled||(this.showClose?(this.currentValue="",this.showClose=!1):this.pickerVisible=!this.pickerVisible)},dateChanged:function(e,t){if(Array.isArray(e)){var i=e.length;if(!t)return!0;for(;i--;)if(!(0,l.equalDate)(e[i],t[i]))return!0}else if(!(0,l.equalDate)(e,t))return!0;return!1},handleClose:function(){this.pickerVisible=!1},handleFocus:function(){var e=this.type;g.indexOf(e)===-1||this.pickerVisible||(this.pickerVisible=!0),this.$emit("focus",this)},handleBlur:function(){this.$emit("blur",this)},handleKeydown:function(e){var t=e.keyCode;9===t&&(this.pickerVisible=!1)},hidePicker:function(){this.picker&&(this.picker.resetView&&this.picker.resetView(),this.pickerVisible=this.picker.visible=!1,this.destroyPopper())},showPicker:function(){var e=this;this.$isServer||(this.picker?this.pickerVisible=this.picker.visible=!0:!function(){e.panel.defaultValue=e.currentValue,e.picker=new o.default(e.panel).$mount(),e.picker.popperClass=e.popperClass,e.popperElm=e.picker.$el,e.picker.width=e.reference.getBoundingClientRect().width,e.picker.showTime="datetime"===e.type||"datetimerange"===e.type,e.picker.selectionMode=e.selectionMode,e.format&&(e.picker.format=e.format);var t=function(){var t=e.pickerOptions;t&&t.selectableRange&&!function(){var i=t.selectableRange,n=x.datetimerange.parser,s=v.timerange;i=Array.isArray(i)?i:[i],e.picker.selectableRange=i.map(function(t){return n(t,s,e.rangeSeparator)})}();for(var i in t)t.hasOwnProperty(i)&&"selectableRange"!==i&&(e.picker[i]=t[i])};t(),e.$watch("pickerOptions",function(){return t()},{deep:!0}),e.$el.appendChild(e.picker.$el),e.pickerVisible=e.picker.visible=!0,e.picker.resetView&&e.picker.resetView(),e.picker.$on("dodestroy",e.doDestroy),e.picker.$on("pick",function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",i=arguments.length>1&&void 0!==arguments[1]&&arguments[1];e.$emit("input",t),e.pickerVisible=e.picker.visible=i,e.picker.resetView&&e.picker.resetView()}),e.picker.$on("select-range",function(t,i){e.refInput.setSelectionRange(t,i),e.refInput.focus()})}(),this.updatePopper(),this.currentValue instanceof Date?this.picker.date=new Date(this.currentValue.getTime()):this.picker.value=this.currentValue,this.picker.resetView&&this.picker.resetView(),this.$nextTick(function(){e.picker.ajustScrollTop&&e.picker.ajustScrollTop()}))}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.limitRange=t.getRangeHours=t.nextMonth=t.prevMonth=t.getWeekNumber=t.getStartDateOfMonth=t.DAY_DURATION=t.getFirstDayOfMonth=t.getDayCountOfMonth=t.parseDate=t.formatDate=t.isDate=t.toDate=t.equalDate=void 0;var s=i(78),o=n(s),a=function(e,t){for(var i=[],n=e;n<=t;n++)i.push(n);return i},r=(t.equalDate=function(e,t){return e===t||new Date(e).getTime()===new Date(t).getTime()},t.toDate=function(e){return l(e)?new Date(e):null}),l=t.isDate=function(e){return null!==e&&void 0!==e&&!isNaN(new Date(e).getTime())},u=(t.formatDate=function(e,t){return e=r(e),e?o.default.format(e,t||"yyyy-MM-dd"):""},t.parseDate=function(e,t){return o.default.parse(e,t||"yyyy-MM-dd")},t.getDayCountOfMonth=function(e,t){return 3===t||5===t||8===t||10===t?30:1===t?e%4===0&&e%100!==0||e%400===0?29:28:31}),c=(t.getFirstDayOfMonth=function(e){var t=new Date(e.getTime());return t.setDate(1),t.getDay()},t.DAY_DURATION=864e5);t.getStartDateOfMonth=function(e,t){var i=new Date(e,t,1),n=i.getDay();return 0===n?i.setTime(i.getTime()-7*c):i.setTime(i.getTime()-c*n),i},t.getWeekNumber=function(e){var t=new Date(e.getTime());t.setHours(0,0,0,0),t.setDate(t.getDate()+3-(t.getDay()+6)%7);var i=new Date(t.getFullYear(),0,4);return 1+Math.round(((t.getTime()-i.getTime())/864e5-3+(i.getDay()+6)%7)/7)},t.prevMonth=function(e){var t=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=0===i?t-1:t,o=0===i?11:i-1,a=u(s,o);return a<n&&e.setDate(a),e.setMonth(o),e.setFullYear(s),new Date(e.getTime())},t.nextMonth=function(e){var t=e.getFullYear(),i=e.getMonth(),n=e.getDate(),s=11===i?t+1:t,o=11===i?0:i+1,a=u(s,o);return a<n&&e.setDate(a),e.setMonth(o),e.setFullYear(s),new Date(e.getTime())},t.getRangeHours=function(e){var t=[],i=[];if((e||[]).forEach(function(e){var t=e.map(function(e){return e.getHours()});i=i.concat(a(t[0],t[1]))}),i.length)for(var n=0;n<24;n++)t[n]=i.indexOf(n)===-1;else for(var s=0;s<24;s++)t[s]=!1;return t},t.limitRange=function(e,t){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:"yyyy-MM-dd HH:mm:ss";if(!t||!t.length)return e;var n=t.length;e=o.default.parse(o.default.format(e,i),i);for(var s=0;s<n;s++){var a=t[s];if(e>=a[0]&&e<=a[1])return e}var r=t[0][0],l=t[0][0];return t.forEach(function(e){l=new Date(Math.min(e[0],l)),r=new Date(Math.max(e[1],r))}),e<l?l:r}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("el-input",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClose,expression:"handleClose"}],ref:"reference",staticClass:"el-date-editor",class:"el-date-editor--"+e.type,attrs:{readonly:!e.editable||e.readonly,disabled:e.disabled,size:e.size,placeholder:e.placeholder,value:e.displayValue,validateEvent:!1},on:{focus:e.handleFocus,blur:e.handleBlur},nativeOn:{keydown:function(t){e.handleKeydown(t)},change:function(t){e.displayValue=t.target.value}}},[e.haveTrigger?i("i",{staticClass:"el-input__icon",class:[e.showClose?"el-icon-close":e.triggerClass],on:{click:e.handleClickIcon,mouseenter:e.handleMouseEnterIcon,mouseleave:function(t){e.showClose=!1}},slot:"icon"}):e._e()])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(724),i(740),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(721),o=i(588),a=n(o),r=i(589),l=n(r),u=i(725),c=n(u),d=i(731),h=n(d),f=i(734),p=n(f),m=i(737),v=n(m);t.default={mixins:[a.default],watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var i=t.$refs.input.$el;i&&(t.pickerWidth=i.getBoundingClientRect().width+10)})},value:function(e){if(e&&(e=new Date(e),!isNaN(e))){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(e)))return;this.date=e,this.year=e.getFullYear(),this.month=e.getMonth(),this.$emit("pick",e,!0)}},timePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.timepicker.ajustScrollTop()})},selectionMode:function(e){"month"===e?"year"===this.currentView&&"month"===this.currentView||(this.currentView="month"):"week"===e&&(this.week=(0,s.getWeekNumber)(this.date))},date:function(e){this.year=e.getFullYear(),this.month=e.getMonth()}},methods:{handleClear:function(){this.date=new Date,this.$emit("pick")},resetDate:function(){this.date=new Date(this.date)},showMonthPicker:function(){this.currentView="month"},showYearPicker:function(){this.currentView="year"},prevMonth:function(){this.month--,this.month<0&&(this.month=11,this.year--)},nextMonth:function(){this.month++,this.month>11&&(this.month=0,this.year++)},nextYear:function(){"year"===this.currentView?this.$refs.yearTable.nextTenYear():(this.year++,this.date.setFullYear(this.year),this.resetDate())},prevYear:function(){"year"===this.currentView?this.$refs.yearTable.prevTenYear():(this.year--,this.date.setFullYear(this.year),this.resetDate())},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},handleTimePick:function(e,t,i){if(e){var n=new Date(this.date.getTime()),s=e.getHours(),o=e.getMinutes(),a=e.getSeconds();n.setHours(s),n.setMinutes(o),n.setSeconds(a),this.date=new Date(n.getTime())}i||(this.timePickerVisible=t)},handleMonthPick:function(e){this.month=e;var t=this.selectionMode;if("month"!==t)this.date.setMonth(e),this.currentView="date",this.resetDate();else{this.date.setMonth(e),this.year&&this.date.setFullYear(this.year),this.resetDate();var i=new Date(this.date.getFullYear(),e,1);this.$emit("pick",i)}},handleDatePick:function(e){"day"===this.selectionMode?(this.showTime||this.$emit("pick",new Date(e.getTime())),this.date.setFullYear(e.getFullYear()),this.date.setMonth(e.getMonth(),e.getDate())):"week"===this.selectionMode&&(this.week=e.week,this.$emit("pick",e.date)),this.resetDate()},handleYearPick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.year=e,t&&(this.date.setFullYear(e),"year"===this.selectionMode?this.$emit("pick",new Date(e)):this.currentView="month",this.resetDate())},changeToNow:function(){this.date.setTime(+new Date),this.$emit("pick",new Date(this.date.getTime())),this.resetDate()},confirm:function(){this.$emit("pick",this.date)},resetView:function(){"month"===this.selectionMode?this.currentView="month":"year"===this.selectionMode?this.currentView="year":this.currentView="date","week"!==this.selectionMode&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())}},components:{TimePicker:c.default,YearTable:h.default,MonthTable:p.default,DateTable:v.default,ElInput:l.default},mounted:function(){this.date&&!this.year&&(this.year=this.date.getFullYear(),this.month=this.date.getMonth())},data:function(){return{popperClass:"",pickerWidth:0,date:new Date,value:"",showTime:!1,selectionMode:"day",shortcuts:"",visible:!1,currentView:"date",disabledDate:"",firstDayOfWeek:7,year:null,month:null,week:null,showWeekNumber:!1,timePickerVisible:!1,width:0}},computed:{footerVisible:function(){return this.showTime},visibleTime:{get:function(){return(0,s.formatDate)(this.date,"HH:mm:ss")},set:function(e){if(e){var t=(0,s.parseDate)(e,"HH:mm:ss");t&&(t.setFullYear(this.date.getFullYear()),t.setMonth(this.date.getMonth()),t.setDate(this.date.getDate()),this.date=t,this.$refs.timepicker.value=t,this.timePickerVisible=!1)}}},visibleDate:{get:function(){return(0,s.formatDate)(this.date)},set:function(e){var t=(0,s.parseDate)(e,"yyyy-MM-dd");t&&(t.setHours(this.date.getHours()),t.setMinutes(this.date.getMinutes()),t.setSeconds(this.date.getSeconds()),this.date=t,this.resetView())}},yearLabel:function(){var e=this.year;if(!e)return"";var t=this.t("el.datepicker.year");if("year"===this.currentView){var i=10*Math.floor(e/10);return t?i+" "+t+" - "+(i+9)+" "+t:i+" - "+(i+9)}return this.year+" "+t}}}},function(e,t,i){var n=i(13)(i(726),i(730),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(721),o=i(588),a=n(o);t.default={mixins:[a.default],components:{TimeSpinner:i(727)},props:{pickerWidth:{},date:{default:function(){return new Date}},visible:Boolean},watch:{visible:function(e){this.currentVisible=e},pickerWidth:function(e){this.width=e},value:function(e){var t=this,i=void 0;e instanceof Date?i=(0,s.limitRange)(e,this.selectableRange):e||(i=new Date),this.handleChange({hours:i.getHours(),minutes:i.getMinutes(),seconds:i.getSeconds()}),this.$nextTick(function(e){return t.ajustScrollTop()})},selectableRange:function(e){this.$refs.spinner.selectableRange=e}},data:function(){return{popperClass:"",format:"HH:mm:ss",value:"",hours:0,minutes:0,seconds:0,selectableRange:[],currentDate:this.$options.defaultValue||this.date||new Date,currentVisible:this.visible||!1,width:this.pickerWidth||0}},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1}},methods:{handleClear:function(){this.$emit("pick")},handleCancel:function(){this.$emit("pick")},handleChange:function(e){void 0!==e.hours&&(this.currentDate.setHours(e.hours),this.hours=this.currentDate.getHours()),void 0!==e.minutes&&(this.currentDate.setMinutes(e.minutes),this.minutes=this.currentDate.getMinutes()),void 0!==e.seconds&&(this.currentDate.setSeconds(e.seconds),this.seconds=this.currentDate.getSeconds()),this.handleConfirm(!0)},setSelectionRange:function(e,t){this.$emit("select-range",e,t)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments[1];if(!t){var i=new Date((0,s.limitRange)(this.currentDate,this.selectableRange,"HH:mm:ss"));this.$emit("pick",i,e,t)}},ajustScrollTop:function(){return this.$refs.spinner.ajustScrollTop()}},created:function(){this.hours=this.currentDate.getHours(),this.minutes=this.currentDate.getMinutes(),this.seconds=this.currentDate.getSeconds()},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)})}}},function(e,t,i){var n=i(13)(i(728),i(729),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(721),o=i(610),a=n(o);t.default={components:{ElScrollbar:a.default},props:{hours:{type:Number,default:0},minutes:{type:Number,default:0},seconds:{type:Number,default:0},showSeconds:{type:Boolean,default:!0}},watch:{hoursPrivate:function(e,t){e>=0&&e<=23||(this.hoursPrivate=t),this.ajustElTop("hour",e),this.$emit("change",{hours:e})},minutesPrivate:function(e,t){e>=0&&e<=59||(this.minutesPrivate=t),this.ajustElTop("minute",e),this.$emit("change",{minutes:e})},secondsPrivate:function(e,t){e>=0&&e<=59||(this.secondsPrivate=t),this.ajustElTop("second",e),this.$emit("change",{seconds:e})}},computed:{hoursList:function(){return(0,s.getRangeHours)(this.selectableRange)},hourEl:function(){return this.$refs.hour.wrap},minuteEl:function(){return this.$refs.minute.wrap},secondEl:function(){return this.$refs.second.wrap}},data:function(){return{hoursPrivate:0,minutesPrivate:0,secondsPrivate:0,selectableRange:[]}},mounted:function(){var e=this;this.$nextTick(function(){e.bindScrollEvent()})},methods:{handleClick:function(e,t,i){t.disabled||(this[e+"Private"]=t.value>=0?t.value:t,this.emitSelectRange(e))},emitSelectRange:function(e){"hours"===e?this.$emit("select-range",0,2):"minutes"===e?this.$emit("select-range",3,5):"seconds"===e&&this.$emit("select-range",6,8)},bindScrollEvent:function(){var e=this,t=function(t){e[t+"El"].onscroll=function(i){return e.handleScroll(t,i)}};t("hour"),t("minute"),t("second")},handleScroll:function(e){var t={};t[e+"s"]=Math.min(Math.floor((this[e+"El"].scrollTop-80)/32+3),59),this.$emit("change",t)},ajustScrollTop:function(){this.ajustElTop("hour",this.hours),this.ajustElTop("minute",this.minutes),this.ajustElTop("second",this.seconds)},ajustElTop:function(e,t){this[e+"El"].scrollTop=Math.max(0,32*(t-2.5)+80)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-time-spinner",class:{"has-seconds":e.showSeconds}},[i("el-scrollbar",{ref:"hour",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("hours")}}},e._l(e.hoursList,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.hours,disabled:t},attrs:{"track-by":"hour"},domProps:{textContent:e._s(n)},on:{click:function(i){e.handleClick("hours",{value:n,disabled:t},!0)}}})})),i("el-scrollbar",{ref:"minute",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("minutes")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.minutes},domProps:{textContent:e._s(n)},on:{click:function(t){e.handleClick("minutes",n,!0)}}})})),i("el-scrollbar",{directives:[{name:"show",rawName:"v-show",value:e.showSeconds,expression:"showSeconds"}],ref:"second",staticClass:"el-time-spinner__wrapper",attrs:{"wrap-style":"max-height: inherit;","view-class":"el-time-spinner__list",noresize:"",tag:"ul"},nativeOn:{mouseenter:function(t){e.emitSelectRange("seconds")}}},e._l(60,function(t,n){return i("li",{staticClass:"el-time-spinner__item",class:{active:n===e.seconds},domProps:{textContent:e._s(n)},on:{click:function(t){e.handleClick("seconds",n,!0)}}})}))],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.currentVisible,expression:"currentVisible"}],staticClass:"el-time-panel",class:e.popperClass,style:{width:e.width+"px"}},[i("div",{staticClass:"el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"spinner",attrs:{"show-seconds":e.showSeconds,hours:e.hours,minutes:e.minutes,seconds:e.seconds},on:{change:e.handleChange,"select-range":e.setSelectionRange}})],1),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:e.handleCancel}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button"},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(732),i(733),null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71);t.default={props:{disabledDate:{},date:{},year:{}},computed:{startYear:function(){return 10*Math.floor(this.year/10)}},methods:{getCellStyle:function(e){var t={},i=new Date(this.date);return i.setFullYear(e),t.disabled="function"==typeof this.disabledDate&&this.disabledDate(i),t.current=Number(this.year)===e,t},nextTenYear:function(){this.$emit("pick",Number(this.year)+10,!1)},prevTenYear:function(){this.$emit("pick",Number(this.year)-10,!1)},handleYearTableClick:function(e){var t=e.target;if("A"===t.tagName){if((0,n.hasClass)(t.parentNode,"disabled"))return;var i=t.textContent||t.innerText;this.$emit("pick",i)}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-year-table",on:{click:e.handleYearTableClick}},[i("tbody",[i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+1))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+2))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+3))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+4))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+5))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+6))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+7))])])]),i("tr",[i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+8))])]),i("td",{staticClass:"available",class:e.getCellStyle(e.startYear+9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.startYear+9))])]),i("td"),i("td")])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(735),i(736),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(588),o=n(s),a=i(71);t.default={props:{disabledDate:{},date:{},month:{type:Number}},mixins:[o.default],methods:{getCellStyle:function(e){var t={},i=new Date(this.date);return i.setMonth(e),t.disabled="function"==typeof this.disabledDate&&this.disabledDate(i),t.current=this.month===e,t},handleMonthTableClick:function(e){var t=e.target;if("A"===t.tagName&&!(0,a.hasClass)(t.parentNode,"disabled")){var i=t.parentNode.cellIndex,n=t.parentNode.parentNode.rowIndex,s=4*n+i;this.$emit("pick",s)}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-month-table",on:{click:e.handleMonthTableClick}},[i("tbody",[i("tr",[i("td",{class:e.getCellStyle(0)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jan")))])]),i("td",{class:e.getCellStyle(1)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.feb")))])]),i("td",{class:e.getCellStyle(2)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.mar")))])]),i("td",{class:e.getCellStyle(3)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.apr")))])])]),i("tr",[i("td",{class:e.getCellStyle(4)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.may")))])]),i("td",{class:e.getCellStyle(5)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jun")))])]),i("td",{class:e.getCellStyle(6)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.jul")))])]),i("td",{class:e.getCellStyle(7)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.aug")))])])]),i("tr",[i("td",{class:e.getCellStyle(8)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.sep")))])]),i("td",{class:e.getCellStyle(9)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.oct")))])]),i("td",{class:e.getCellStyle(10)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.nov")))])]),i("td",{class:e.getCellStyle(11)},[i("a",{staticClass:"cell"},[e._v(e._s(e.t("el.datepicker.months.dec")))])])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(738),i(739),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(721),o=i(71),a=i(588),r=n(a),l=["sun","mon","tue","wed","thu","fri","sat"],u=function(e){var t=new Date(e);return t.setHours(0,0,0,0),t.getTime()};t.default={mixins:[r.default],props:{firstDayOfWeek:{default:7,type:Number,validator:function(e){return e>=1&&e<=7}},date:{},year:{},month:{},week:{},selectionMode:{default:"day"},showWeekNumber:{type:Boolean,default:!1},disabledDate:{},minDate:{},maxDate:{},rangeState:{default:function(){return{endDate:null,selecting:!1,row:null,column:null}}}},computed:{offsetDay:function(){var e=this.firstDayOfWeek;return e>3?7-e:-e},WEEKS:function(){var e=this.firstDayOfWeek;return l.concat(l).slice(e,e+7)},monthDate:function(){return this.date.getDate()},startDate:function(){return(0,s.getStartDateOfMonth)(this.year,this.month);
-},rows:function e(){var t=new Date(this.year,this.month,1),i=(0,s.getFirstDayOfMonth)(t),n=(0,s.getDayCountOfMonth)(t.getFullYear(),t.getMonth()),o=(0,s.getDayCountOfMonth)(t.getFullYear(),0===t.getMonth()?11:t.getMonth()-1);i=0===i?7:i;for(var a=this.offsetDay,e=this.tableRows,r=1,l=void 0,c=this.startDate,d=this.disabledDate,h=u(new Date),f=0;f<6;f++){var p=e[f];this.showWeekNumber&&(p[0]||(p[0]={type:"week",text:(0,s.getWeekNumber)(new Date(c.getTime()+s.DAY_DURATION*(7*f+1)))}));for(var m=0;m<7;m++){var v=p[this.showWeekNumber?m+1:m];v||(v={row:f,column:m,type:"normal",inRange:!1,start:!1,end:!1}),v.type="normal";var g=7*f+m,y=c.getTime()+s.DAY_DURATION*(g-a);v.inRange=y>=u(this.minDate)&&y<=u(this.maxDate),v.start=this.minDate&&y===u(this.minDate),v.end=this.maxDate&&y===u(this.maxDate);var b=y===h;b&&(v.type="today"),f>=0&&f<=1?m+7*f>=i+a?(v.text=r++,2===r&&(l=7*f+m)):(v.text=o-(i+a-m%7)+1+7*f,v.type="prev-month"):r<=n?(v.text=r++,2===r&&(l=7*f+m)):(v.text=r++-n,v.type="next-month"),v.disabled="function"==typeof d&&d(new Date(y)),this.$set(p,this.showWeekNumber?m+1:m,v)}if("week"===this.selectionMode){var _=this.showWeekNumber?1:0,C=this.showWeekNumber?7:6,x=this.isWeekActive(p[_+1]);p[_].inRange=x,p[_].start=x,p[C].inRange=x,p[C].end=x}}return e.firstDayPosition=l,e}},watch:{"rangeState.endDate":function(e){this.markRange(e)},minDate:function(e,t){e&&!t?(this.rangeState.selecting=!0,this.markRange(e)):e?this.markRange():(this.rangeState.selecting=!1,this.markRange(e))},maxDate:function(e,t){e&&!t&&(this.rangeState.selecting=!1,this.markRange(e),this.$emit("pick",{minDate:this.minDate,maxDate:this.maxDate}))}},data:function(){return{tableRows:[[],[],[],[],[],[]]}},methods:{getCellClasses:function(e){var t=this.selectionMode,i=this.monthDate,n=[];return"normal"!==e.type&&"today"!==e.type||e.disabled?n.push(e.type):(n.push("available"),"today"===e.type&&n.push("today")),"day"!==t||"normal"!==e.type&&"today"!==e.type||Number(this.year)!==this.date.getFullYear()||this.month!==this.date.getMonth()||i!==Number(e.text)||n.push("current"),!e.inRange||"normal"!==e.type&&"today"!==e.type&&"week"!==this.selectionMode||(n.push("in-range"),e.start&&n.push("start-date"),e.end&&n.push("end-date")),e.disabled&&n.push("disabled"),n.join(" ")},getDateOfCell:function(e,t){var i=this.startDate;return new Date(i.getTime()+(7*e+(t-(this.showWeekNumber?1:0))-this.offsetDay)*s.DAY_DURATION)},getCellByDate:function(e){var t=this.startDate,i=this.rows,n=(e-t)/s.DAY_DURATION,o=i[Math.floor(n/7)];return this.showWeekNumber?o[n%7+1]:o[n%7]},isWeekActive:function(e){if("week"!==this.selectionMode)return!1;var t=new Date(this.year,this.month,1),i=t.getFullYear(),n=t.getMonth();return"prev-month"===e.type&&(t.setMonth(0===n?11:n-1),t.setFullYear(0===n?i-1:i)),"next-month"===e.type&&(t.setMonth(11===n?0:n+1),t.setFullYear(11===n?i+1:i)),t.setDate(parseInt(e.text,10)),(0,s.getWeekNumber)(t)===this.week},markRange:function(e){var t=this.startDate;e||(e=this.maxDate);for(var i=this.rows,n=this.minDate,o=0,a=i.length;o<a;o++)for(var r=i[o],l=0,c=r.length;l<c;l++)if(!this.showWeekNumber||0!==l){var d=r[l],h=7*o+l+(this.showWeekNumber?-1:0),f=t.getTime()+s.DAY_DURATION*(h-this.offsetDay);d.inRange=n&&f>=u(n)&&f<=u(e),d.start=n&&f===u(n.getTime()),d.end=e&&f===u(e.getTime())}},handleMouseMove:function(e){if(this.rangeState.selecting){this.$emit("changerange",{minDate:this.minDate,maxDate:this.maxDate,rangeState:this.rangeState});var t=e.target;if("TD"===t.tagName){var i=t.cellIndex,n=t.parentNode.rowIndex-1,s=this.rangeState,o=s.row,a=s.column;o===n&&a===i||(this.rangeState.row=n,this.rangeState.column=i,this.rangeState.endDate=this.getDateOfCell(n,i))}}},handleClick:function(e){var t=e.target;if("TD"===t.tagName&&!(0,o.hasClass)(t,"disabled")&&!(0,o.hasClass)(t,"week")){var i=this.selectionMode;"week"===i&&(t=t.parentNode.cells[1]);var n=Number(this.year),a=Number(this.month),r=t.cellIndex,l=t.parentNode.rowIndex,u=this.rows[l-1][r],c=u.text,d=t.className,h=new Date(n,a,1);if(d.indexOf("prev")!==-1?(0===a?(n-=1,a=11):a-=1,h.setFullYear(n),h.setMonth(a)):d.indexOf("next")!==-1&&(11===a?(n+=1,a=0):a+=1,h.setFullYear(n),h.setMonth(a)),h.setDate(parseInt(c,10)),"range"===this.selectionMode){if(this.minDate&&this.maxDate){var f=new Date(h.getTime()),p=null;this.$emit("pick",{minDate:f,maxDate:p},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}else if(this.minDate&&!this.maxDate)if(h>=this.minDate){var m=new Date(h.getTime());this.rangeState.selecting=!1,this.$emit("pick",{minDate:this.minDate,maxDate:m})}else{var v=new Date(h.getTime());this.$emit("pick",{minDate:v,maxDate:this.maxDate},!1)}else if(!this.minDate){var g=new Date(h.getTime());this.$emit("pick",{minDate:g,maxDate:this.maxDate},!1),this.rangeState.selecting=!0,this.markRange(this.minDate)}}else if("day"===i)this.$emit("pick",h);else if("week"===i){var y=(0,s.getWeekNumber)(h),b=h.getFullYear()+"w"+y;this.$emit("pick",{year:h.getFullYear(),week:y,value:b,date:h})}}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("table",{staticClass:"el-date-table",class:{"is-week-mode":"week"===e.selectionMode},attrs:{cellspacing:"0",cellpadding:"0"},on:{click:e.handleClick,mousemove:e.handleMouseMove}},[i("tbody",[i("tr",[e.showWeekNumber?i("th",[e._v(e._s(e.t("el.datepicker.week")))]):e._e(),e._l(e.WEEKS,function(t){return i("th",[e._v(e._s(e.t("el.datepicker.weeks."+t)))])})],2),e._l(e.rows,function(t){return i("tr",{staticClass:"el-date-table__row",class:{current:e.isWeekActive(t[1])}},e._l(t,function(t){return i("td",{class:e.getCellClasses(t),domProps:{textContent:e._s("today"===t.type?e.t("el.datepicker.today"):t.text)}})}))})],2)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-picker",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass],style:{width:e.width+"px"}},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-picker__time-header"},[i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{attrs:{placeholder:e.t("el.datepicker.selectDate"),value:e.visibleDate,size:"small"},nativeOn:{change:function(t){e.visibleDate=t.target.value}}})],1),i("span",{staticClass:"el-date-picker__editor-wrap"},[i("el-input",{ref:"input",attrs:{placeholder:e.t("el.datepicker.selectTime"),value:e.visibleTime,size:"small"},on:{focus:function(t){e.timePickerVisible=!e.timePickerVisible}},nativeOn:{change:function(t){e.visibleTime=t.target.value}}}),i("time-picker",{ref:"timepicker",attrs:{date:e.date,"picker-width":e.pickerWidth,visible:e.timePickerVisible},on:{pick:e.handleTimePick}})],1)]):e._e(),i("div",{directives:[{name:"show",rawName:"v-show",value:"time"!==e.currentView,expression:"currentView !== 'time'"}],staticClass:"el-date-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("span",{staticClass:"el-date-picker__header-label",on:{click:e.showYearPicker}},[e._v(e._s(e.yearLabel))]),i("span",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-date-picker__header-label",class:{active:"month"===e.currentView},on:{click:e.showMonthPicker}},[e._v(e._s(e.t("el.datepicker.month"+(e.month+1))))]),i("button",{staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],staticClass:"el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}})]),i("div",{staticClass:"el-picker-panel__content"},[i("date-table",{directives:[{name:"show",rawName:"v-show",value:"date"===e.currentView,expression:"currentView === 'date'"}],attrs:{year:e.year,month:e.month,date:e.date,week:e.week,"selection-mode":e.selectionMode,"first-day-of-week":e.firstDayOfWeek,"disabled-date":e.disabledDate},on:{pick:e.handleDatePick}}),i("year-table",{directives:[{name:"show",rawName:"v-show",value:"year"===e.currentView,expression:"currentView === 'year'"}],ref:"yearTable",attrs:{year:e.year,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleYearPick}}),i("month-table",{directives:[{name:"show",rawName:"v-show",value:"month"===e.currentView,expression:"currentView === 'month'"}],attrs:{month:e.month,date:e.date,"disabled-date":e.disabledDate},on:{pick:e.handleMonthPick}})],1)])],2),i("div",{directives:[{name:"show",rawName:"v-show",value:e.footerVisible&&"date"===e.currentView,expression:"footerVisible && currentView === 'date'"}],staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",attrs:{href:"JavaScript:"},on:{click:e.changeToNow}},[e._v(e._s(e.t("el.datepicker.now")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button"},on:{click:e.confirm}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(742),i(743),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(721),o=i(588),a=n(o),r=i(725),l=n(r),u=i(737),c=n(u),d=i(589),h=n(d);t.default={mixins:[a.default],computed:{btnDisabled:function(){return!(this.minDate&&this.maxDate&&!this.selecting)},leftLabel:function(){return this.date.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.date.getMonth()+1))},rightLabel:function(){return this.rightDate.getFullYear()+" "+this.t("el.datepicker.year")+" "+this.t("el.datepicker.month"+(this.rightDate.getMonth()+1))},leftYear:function(){return this.date.getFullYear()},leftMonth:function(){return this.date.getMonth()},rightYear:function(){return this.rightDate.getFullYear()},rightMonth:function(){return this.rightDate.getMonth()},minVisibleDate:function(){return this.minDate?(0,s.formatDate)(this.minDate):""},maxVisibleDate:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate):""},minVisibleTime:function(){return this.minDate?(0,s.formatDate)(this.minDate,"HH:mm:ss"):""},maxVisibleTime:function(){return this.maxDate||this.minDate?(0,s.formatDate)(this.maxDate||this.minDate,"HH:mm:ss"):""},rightDate:function(){var e=new Date(this.date),t=e.getMonth();return e.setDate(1),11===t?(e.setFullYear(e.getFullYear()+1),e.setMonth(0)):e.setMonth(t+1),e}},data:function(){return{popperClass:"",minPickerWidth:0,maxPickerWidth:0,date:new Date,minDate:"",maxDate:"",rangeState:{endDate:null,selecting:!1,row:null,column:null},showTime:!1,shortcuts:"",value:"",visible:"",disabledDate:"",firstDayOfWeek:7,minTimePickerVisible:!1,maxTimePickerVisible:!1,width:0}},watch:{showTime:function(e){var t=this;e&&this.$nextTick(function(e){var i=t.$refs.minInput.$el,n=t.$refs.maxInput.$el;i&&(t.minPickerWidth=i.getBoundingClientRect().width+10),n&&(t.maxPickerWidth=n.getBoundingClientRect().width+10)})},minDate:function(){var e=this;this.$nextTick(function(){if(e.maxDate&&e.maxDate<e.minDate){var t="HH:mm:ss";e.$refs.maxTimePicker.selectableRange=[[(0,s.parseDate)((0,s.formatDate)(e.minDate,t),t),(0,s.parseDate)("23:59:59",t)]]}})},minTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.minTimePicker.ajustScrollTop()})},maxTimePickerVisible:function(e){var t=this;e&&this.$nextTick(function(){return t.$refs.maxTimePicker.ajustScrollTop()})},value:function(e){e?Array.isArray(e)&&(this.minDate=e[0]?(0,s.toDate)(e[0]):null,this.maxDate=e[1]?(0,s.toDate)(e[1]):null,this.minDate&&(this.date=new Date(this.minDate)),this.handleConfirm(!0)):(this.minDate=null,this.maxDate=null)}},methods:{handleClear:function(){this.minDate=null,this.maxDate=null,this.handleConfirm(!1)},handleDateInput:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"yyyy-MM-dd");if(n){if("function"==typeof this.disabledDate&&this.disabledDate(new Date(n)))return;var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setFullYear(n.getFullYear()),o.setMonth(n.getMonth(),n.getDate()))}},handleChangeRange:function(e){this.minDate=e.minDate,this.maxDate=e.maxDate,this.rangeState=e.rangeState},handleDateChange:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"yyyy-MM-dd");if(n){var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setFullYear(n.getFullYear()),o.setMonth(n.getMonth(),n.getDate())),"min"===t?o<this.maxDate&&(this.minDate=new Date(o.getTime())):o>this.minDate&&(this.maxDate=new Date(o.getTime()),this.minDate&&this.minDate>this.maxDate&&(this.minDate=null))}},handleTimeChange:function(e,t){var i=e.target.value,n=(0,s.parseDate)(i,"HH:mm:ss");if(n){var o=new Date("min"===t?this.minDate:this.maxDate);o&&(o.setHours(n.getHours()),o.setMinutes(n.getMinutes()),o.setSeconds(n.getSeconds())),"min"===t?o<this.maxDate&&(this.minDate=new Date(o.getTime())):o>this.minDate&&(this.maxDate=new Date(o.getTime())),this.$refs[t+"TimePicker"].value=o,this[t+"TimePickerVisible"]=!1}},handleRangePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.maxDate===e.maxDate&&this.minDate===e.minDate||(this.onPick&&this.onPick(e),this.maxDate=e.maxDate,this.minDate=e.minDate,t&&!this.showTime&&this.handleConfirm())},changeToToday:function(){this.date=new Date},handleShortcutClick:function(e){e.onClick&&e.onClick(this)},resetView:function(){this.minTimePickerVisible=!1,this.maxTimePickerVisible=!1},setTime:function(e,t){var i=new Date(e.getTime()),n=t.getHours(),s=t.getMinutes(),o=t.getSeconds();return i.setHours(n),i.setMinutes(s),i.setSeconds(o),new Date(i.getTime())},handleMinTimePick:function(e,t,i){this.minDate=this.minDate||new Date,e&&(this.minDate=this.setTime(this.minDate,e)),i||(this.minTimePickerVisible=t)},handleMaxTimePick:function(e,t,i){if(!this.maxDate){var n=new Date;n>=this.minDate&&(this.maxDate=new Date)}this.maxDate&&e&&(this.maxDate=this.setTime(this.maxDate,e)),i||(this.maxTimePickerVisible=t)},prevMonth:function(){this.date=(0,s.prevMonth)(this.date)},nextMonth:function(){this.date=(0,s.nextMonth)(this.date)},nextYear:function(){var e=this.date;e.setFullYear(e.getFullYear()+1),this.resetDate()},prevYear:function(){var e=this.date;e.setFullYear(e.getFullYear()-1),this.resetDate()},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0];this.$emit("pick",[this.minDate,this.maxDate],e)},resetDate:function(){this.date=new Date(this.date)}},components:{TimePicker:l.default,DateTable:c.default,ElInput:h.default}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel el-date-range-picker",class:[{"has-sidebar":e.$slots.sidebar||e.shortcuts,"has-time":e.showTime},e.popperClass],style:{width:e.width+"px"}},[i("div",{staticClass:"el-picker-panel__body-wrapper"},[e._t("sidebar"),e.shortcuts?i("div",{staticClass:"el-picker-panel__sidebar"},e._l(e.shortcuts,function(t){return i("button",{staticClass:"el-picker-panel__shortcut",attrs:{type:"button"},on:{click:function(i){e.handleShortcutClick(t)}}},[e._v(e._s(t.text))])})):e._e(),i("div",{staticClass:"el-picker-panel__body"},[e.showTime?i("div",{staticClass:"el-date-range-picker__time-header"},[i("span",{staticClass:"el-date-range-picker__editors-wrap"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"minInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startDate"),value:e.minVisibleDate},nativeOn:{input:function(t){e.handleDateInput(t,"min")},change:function(t){e.handleDateChange(t,"min")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.startTime"),value:e.minVisibleTime},on:{focus:function(t){e.minTimePickerVisible=!e.minTimePickerVisible}},nativeOn:{change:function(t){e.handleTimeChange(t,"min")}}}),i("time-picker",{ref:"minTimePicker",attrs:{"picker-width":e.minPickerWidth,date:e.minDate,visible:e.minTimePickerVisible},on:{pick:e.handleMinTimePick}})],1)]),i("span",{staticClass:"el-icon-arrow-right"}),i("span",{staticClass:"el-date-range-picker__editors-wrap is-right"},[i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endDate"),value:e.maxVisibleDate,readonly:!e.minDate},nativeOn:{input:function(t){e.handleDateInput(t,"max")},change:function(t){e.handleDateChange(t,"max")}}})],1),i("span",{staticClass:"el-date-range-picker__time-picker-wrap"},[i("el-input",{ref:"maxInput",staticClass:"el-date-range-picker__editor",attrs:{size:"small",placeholder:e.t("el.datepicker.endTime"),value:e.maxVisibleTime,readonly:!e.minDate},on:{focus:function(t){e.minDate&&(e.maxTimePickerVisible=!e.maxTimePickerVisible)}},nativeOn:{change:function(t){e.handleTimeChange(t,"max")}}}),i("time-picker",{ref:"maxTimePicker",attrs:{"picker-width":e.maxPickerWidth,date:e.maxDate,visible:e.maxTimePickerVisible},on:{pick:e.handleMaxTimePick}})],1)])]):e._e(),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-left"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-left",attrs:{type:"button"},on:{click:e.prevYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-left",attrs:{type:"button"},on:{click:e.prevMonth}}),i("div",[e._v(e._s(e.leftLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.date,year:e.leftYear,month:e.leftMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1),i("div",{staticClass:"el-picker-panel__content el-date-range-picker__content is-right"},[i("div",{staticClass:"el-date-range-picker__header"},[i("button",{staticClass:"el-picker-panel__icon-btn el-icon-d-arrow-right",attrs:{type:"button"},on:{click:e.nextYear}}),i("button",{staticClass:"el-picker-panel__icon-btn el-icon-arrow-right",attrs:{type:"button"},on:{click:e.nextMonth}}),i("div",[e._v(e._s(e.rightLabel))])]),i("date-table",{attrs:{"selection-mode":"range",date:e.rightDate,year:e.rightYear,month:e.rightMonth,"min-date":e.minDate,"max-date":e.maxDate,"range-state":e.rangeState,"disabled-date":e.disabledDate,"first-day-of-week":e.firstDayOfWeek},on:{changerange:e.handleChangeRange,pick:e.handleRangePick}})],1)])],2),e.showTime?i("div",{staticClass:"el-picker-panel__footer"},[i("a",{staticClass:"el-picker-panel__link-btn",on:{click:e.handleClear}},[e._v(e._s(e.t("el.datepicker.clear")))]),i("button",{staticClass:"el-picker-panel__btn",attrs:{type:"button",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])]):e._e()])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(745),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(719),o=n(s),a=i(746),r=n(a);t.default={mixins:[o.default],name:"ElTimeSelect",beforeCreate:function(){this.type="time-select",this.panel=r.default}}},function(e,t,i){var n=i(13)(i(747),i(748),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(610),o=n(s),a=function(e){var t=e.split(":");if(t.length>=2){var i=parseInt(t[0],10),n=parseInt(t[1],10);return{hours:i,minutes:n}}return null},r=function(e,t){var i=a(e),n=a(t),s=i.minutes+60*i.hours,o=n.minutes+60*n.hours;return s===o?0:s>o?1:-1},l=function(e){return(e.hours<10?"0"+e.hours:e.hours)+":"+(e.minutes<10?"0"+e.minutes:e.minutes)},u=function(e,t){var i=a(e),n=a(t),s={hours:i.hours,minutes:i.minutes};return s.minutes+=n.minutes,s.hours+=n.hours,s.hours+=Math.floor(s.minutes/60),s.minutes=s.minutes%60,l(s)};t.default={components:{ElScrollbar:o.default},watch:{value:function(e){e&&(this.minTime&&r(e,this.minTime)<0?this.$emit("pick"):this.maxTime&&r(e,this.maxTime)>0&&this.$emit("pick"))}},methods:{handleClick:function(e){e.disabled||this.$emit("pick",e.value)},handleClear:function(){this.$emit("pick")}},data:function(){return{popperClass:"",start:"09:00",end:"18:00",step:"00:30",value:"",visible:!1,minTime:"",maxTime:"",width:0}},computed:{items:function(){var e=this.start,t=this.end,i=this.step,n=[];if(e&&t&&i)for(var s=e;r(s,t)<=0;)n.push({value:s,disabled:r(s,this.minTime||"-1:-1")<=0||r(s,this.maxTime||"100:100")>=0}),s=u(s,i);return n}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-picker-panel time-select",class:e.popperClass,style:{width:e.width+"px"}},[i("el-scrollbar",{attrs:{noresize:"","wrap-class":"el-picker-panel__content"}},e._l(e.items,function(t){return i("div",{staticClass:"time-select-item",class:{selected:e.value===t.value,disabled:t.disabled},attrs:{disabled:t.disabled},on:{click:function(i){e.handleClick(t)}}},[e._v(e._s(t.value))])}))],1)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(750),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(719),o=n(s),a=i(725),r=n(a),l=i(751),u=n(l);t.default={mixins:[o.default],name:"ElTimePicker",props:{isRange:Boolean},data:function(){return{type:""}},created:function(){this.type=this.isRange?"timerange":"time",this.panel=this.isRange?u.default:r.default}}},function(e,t,i){var n=i(13)(i(752),i(753),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(721),o=i(588),a=n(o),r=i(727),l=n(r),u=(0,s.parseDate)("00:00:00","HH:mm:ss"),c=(0,s.parseDate)("23:59:59","HH:mm:ss"),d=function(e,t){var i=3600*e.getHours()+60*e.getMinutes()+e.getSeconds(),n=3600*t.getHours()+60*t.getMinutes()+t.getSeconds();return i>n},h=function e(t){t=Array.isArray(t)?t:[t];var i=t[0]||new Date,n=new Date;n.setHours(n.getHours()+1);var s=t[1]||n;return i>s?e():{minTime:i,maxTime:s}};t.default={mixins:[a.default],components:{TimeSpinner:l.default},computed:{showSeconds:function(){return(this.format||"").indexOf("ss")!==-1}},props:["value"],data:function(){var e=h(this.$options.defaultValue);return{popperClass:"",minTime:e.minTime,maxTime:e.maxTime,btnDisabled:d(e.minTime,e.maxTime),maxHours:e.maxTime.getHours(),maxMinutes:e.maxTime.getMinutes(),maxSeconds:e.maxTime.getSeconds(),minHours:e.minTime.getHours(),minMinutes:e.minTime.getMinutes(),minSeconds:e.minTime.getSeconds(),format:"HH:mm:ss",visible:!1,width:0}},watch:{value:function(e){var t=this;this.panelCreated(),this.$nextTick(function(e){return t.ajustScrollTop()})}},methods:{panelCreated:function(){var e=h(this.value);e.minTime===this.minTime&&e.maxTime===this.maxTime||(this.handleMinChange({hours:e.minTime.getHours(),minutes:e.minTime.getMinutes(),seconds:e.minTime.getSeconds()}),this.handleMaxChange({hours:e.maxTime.getHours(),minutes:e.maxTime.getMinutes(),seconds:e.maxTime.getSeconds()}))},handleClear:function(){this.handleCancel()},handleCancel:function(){this.$emit("pick")},handleChange:function(){this.minTime>this.maxTime||(u.setFullYear(this.minTime.getFullYear()),u.setMonth(this.minTime.getMonth(),this.minTime.getDate()),c.setFullYear(this.maxTime.getFullYear()),c.setMonth(this.maxTime.getMonth(),this.maxTime.getDate()),this.$refs.minSpinner.selectableRange=[[u,this.maxTime]],this.$refs.maxSpinner.selectableRange=[[this.minTime,c]],this.handleConfirm(!0))},handleMaxChange:function(e){void 0!==e.hours&&(this.maxTime.setHours(e.hours),this.maxHours=this.maxTime.getHours()),void 0!==e.minutes&&(this.maxTime.setMinutes(e.minutes),this.maxMinutes=this.maxTime.getMinutes()),void 0!==e.seconds&&(this.maxTime.setSeconds(e.seconds),this.maxSeconds=this.maxTime.getSeconds()),this.handleChange()},handleMinChange:function(e){void 0!==e.hours&&(this.minTime.setHours(e.hours),this.minHours=this.minTime.getHours()),void 0!==e.minutes&&(this.minTime.setMinutes(e.minutes),this.minMinutes=this.minTime.getMinutes()),void 0!==e.seconds&&(this.minTime.setSeconds(e.seconds),this.minSeconds=this.minTime.getSeconds()),this.handleChange()},setMinSelectionRange:function(e,t){this.$emit("select-range",e,t)},setMaxSelectionRange:function(e,t){this.$emit("select-range",e+11,t+11)},handleConfirm:function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.$refs.minSpinner.selectableRange,n=this.$refs.maxSpinner.selectableRange;this.minTime=(0,s.limitRange)(this.minTime,i),this.maxTime=(0,s.limitRange)(this.maxTime,n),t||this.$emit("pick",[this.minTime,this.maxTime],e,t)},ajustScrollTop:function(){this.$refs.minSpinner.ajustScrollTop(),this.$refs.maxSpinner.ajustScrollTop()}},mounted:function(){var e=this;this.$nextTick(function(){return e.handleConfirm(!0,!0)})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"before-enter":e.panelCreated,"after-leave":function(t){e.$emit("dodestroy")}}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-time-range-picker el-picker-panel",class:e.popperClass,style:{width:e.width+"px"}},[i("div",{staticClass:"el-time-range-picker__content"},[i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[e._v(e._s(e.t("el.datepicker.startTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"minSpinner",attrs:{"show-seconds":e.showSeconds,hours:e.minHours,minutes:e.minMinutes,seconds:e.minSeconds},on:{change:e.handleMinChange,"select-range":e.setMinSelectionRange}})],1)]),i("div",{staticClass:"el-time-range-picker__cell"},[i("div",{staticClass:"el-time-range-picker__header"},[e._v(e._s(e.t("el.datepicker.endTime")))]),i("div",{staticClass:"el-time-range-picker__body el-time-panel__content",class:{"has-seconds":e.showSeconds}},[i("time-spinner",{ref:"maxSpinner",attrs:{"show-seconds":e.showSeconds,hours:e.maxHours,minutes:e.maxMinutes,seconds:e.maxSeconds},on:{change:e.handleMaxChange,"select-range":e.setMaxSelectionRange}})],1)])]),i("div",{staticClass:"el-time-panel__footer"},[i("button",{staticClass:"el-time-panel__btn cancel",attrs:{type:"button"},on:{click:function(t){e.handleCancel()}}},[e._v(e._s(e.t("el.datepicker.cancel")))]),i("button",{staticClass:"el-time-panel__btn confirm",attrs:{type:"button",disabled:e.btnDisabled},on:{click:function(t){e.handleConfirm()}}},[e._v(e._s(e.t("el.datepicker.confirm")))])])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(755),o=n(s),a=i(758),r=n(a),l=i(2),u=n(l);u.default.directive("popover",r.default),o.default.install=function(e){e.directive("popover",r.default),e.component(o.default.name,o.default)},o.default.directive=r.default,t.default=o.default},function(e,t,i){var n=i(13)(i(756),i(757),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(597),o=n(s),a=i(71);t.default={name:"ElPopover",mixins:[o.default],props:{trigger:{type:String,default:"click",validator:function(e){return["click","focus","hover","manual"].indexOf(e)>-1}},title:String,disabled:Boolean,content:String,reference:{},popperClass:String,width:{},visibleArrow:{default:!0},transition:{type:String,default:"fade-in-linear"}},watch:{showPopper:function(e,t){e?this.$emit("show"):this.$emit("hide")}},mounted:function(){var e=this.reference||this.$refs.reference,t=this.popper||this.$refs.popper;if(!e&&this.$slots.reference&&this.$slots.reference[0]&&(e=this.referenceElm=this.$slots.reference[0].elm),"click"===this.trigger)(0,a.on)(e,"click",this.doToggle),(0,a.on)(document,"click",this.handleDocumentClick);else if("hover"===this.trigger)(0,a.on)(e,"mouseenter",this.handleMouseEnter),(0,a.on)(t,"mouseenter",this.handleMouseEnter),(0,a.on)(e,"mouseleave",this.handleMouseLeave),(0,a.on)(t,"mouseleave",this.handleMouseLeave);else if("focus"===this.trigger){var i=!1;if([].slice.call(e.children).length)for(var n=e.childNodes,s=n.length,o=0;o<s;o++)if("INPUT"===n[o].nodeName||"TEXTAREA"===n[o].nodeName){(0,a.on)(n[o],"focus",this.doShow),(0,a.on)(n[o],"blur",this.doClose),i=!0;break}if(i)return;"INPUT"===e.nodeName||"TEXTAREA"===e.nodeName?((0,a.on)(e,"focus",this.doShow),(0,a.on)(e,"blur",this.doClose)):((0,a.on)(e,"mousedown",this.doShow),(0,a.on)(e,"mouseup",this.doClose))}},methods:{doToggle:function(){this.showPopper=!this.showPopper},doShow:function(){this.showPopper=!0},doClose:function(){this.showPopper=!1},handleMouseEnter:function(){this.showPopper=!0,clearTimeout(this._timer)},handleMouseLeave:function(){var e=this;this._timer=setTimeout(function(){e.showPopper=!1},200)},handleDocumentClick:function(e){var t=this.reference||this.$refs.reference,i=this.popper||this.$refs.popper;!t&&this.$slots.reference&&this.$slots.reference[0]&&(t=this.referenceElm=this.$slots.reference[0].elm),this.$el&&t&&!this.$el.contains(e.target)&&!t.contains(e.target)&&i&&!i.contains(e.target)&&(this.showPopper=!1)}},destroyed:function(){var e=this.reference;(0,a.off)(e,"click",this.doToggle),(0,a.off)(e,"mouseup",this.doClose),(0,a.off)(e,"mousedown",this.doShow),(0,a.off)(e,"focus",this.doShow),(0,a.off)(e,"blur",this.doClose),(0,a.off)(e,"mouseleave",this.handleMouseLeave),(0,a.off)(e,"mouseenter",this.handleMouseEnter),(0,a.off)(document,"click",this.handleDocumentClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",[i("transition",{attrs:{name:e.transition},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:!e.disabled&&e.showPopper,expression:"!disabled && showPopper"}],ref:"popper",staticClass:"el-popover",class:[e.popperClass],style:{width:e.width+"px"}},[e.title?i("div",{staticClass:"el-popover__title",domProps:{textContent:e._s(e.title)}}):e._e(),e._t("default",[e._v(e._s(e.content))])],2)]),e._t("reference")],2)},staticRenderFns:[]
-}},function(e,t){"use strict";t.__esModule=!0,t.default={bind:function(e,t,i){i.context.$refs[t.arg].$refs.reference=e}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(760),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.MessageBox=void 0;var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},o=i(2),a=n(o),r=i(761),l=n(r),u=i(593),c=n(u),d={title:void 0,message:"",type:"",showInput:!1,showClose:!0,modalFade:!0,lockScroll:!0,closeOnClickModal:!0,closeOnPressEscape:!0,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,confirmButtonPosition:"right",confirmButtonHighlight:!1,cancelButtonHighlight:!1,confirmButtonText:"",cancelButtonText:"",confirmButtonClass:"",cancelButtonClass:"",customClass:"",beforeClose:null},h=a.default.extend(l.default),f=void 0,p=void 0,m=[],v=function(e){if(f){var t=f.callback;if("function"==typeof t&&(p.showInput?t(p.inputValue,e):t(e)),f.resolve){var i=f.options.$type;"confirm"===i||"prompt"===i?"confirm"===e?p.showInput?f.resolve({value:p.inputValue,action:e}):f.resolve(e):"cancel"===e&&f.reject&&f.reject(e):f.resolve(e)}}},g=function(){p=new h({el:document.createElement("div")}),p.callback=v},y=function e(){p||g(),p.action="",p.value&&!p.closeTimer||m.length>0&&!function(){f=m.shift();var t=f.options;for(var i in t)t.hasOwnProperty(i)&&(p[i]=t[i]);void 0===t.callback&&(p.callback=v);var n=p.callback;p.callback=function(t,i){n(t,i),e()},["modal","showClose","closeOnClickModal","closeOnPressEscape"].forEach(function(e){void 0===p[e]&&(p[e]=!0)}),document.body.appendChild(p.$el),a.default.nextTick(function(){p.value=!0})}()},b=function e(t,i){if(!a.default.prototype.$isServer)return"string"==typeof t?(t={message:t},arguments[1]&&(t.title=arguments[1]),arguments[2]&&(t.type=arguments[2])):t.callback&&!i&&(i=t.callback),"undefined"!=typeof Promise?new Promise(function(n,s){m.push({options:(0,c.default)({},d,e.defaults,t),callback:i,resolve:n,reject:s}),y()}):(m.push({options:(0,c.default)({},d,e.defaults,t),callback:i}),void y())};b.setDefaults=function(e){b.defaults=e},b.alert=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,$type:"alert",closeOnPressEscape:!1,closeOnClickModal:!1},i))},b.confirm=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,$type:"confirm",showCancelButton:!0},i))},b.prompt=function(e,t,i){return"object"===("undefined"==typeof t?"undefined":s(t))&&(i=t,t=""),b((0,c.default)({title:t,message:e,showCancelButton:!0,showInput:!0,$type:"prompt"},i))},b.close=function(){p.value=!1,m=[],f=null},t.default=b,t.MessageBox=b},function(e,t,i){var n=i(13)(i(762),i(763),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(598),o=n(s),a=i(588),r=n(a),l=i(589),u=n(l),c=i(633),d=n(c),h=i(71),f=i(15),p={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={mixins:[o.default,r.default],props:{modal:{default:!0},lockScroll:{default:!0},showClose:{type:Boolean,default:!0},closeOnClickModal:{default:!0},closeOnPressEscape:{default:!0}},components:{ElInput:u.default,ElButton:d.default},computed:{typeClass:function(){return this.type&&p[this.type]?"el-icon-"+p[this.type]:""},confirmButtonClasses:function(){return"el-button--primary "+this.confirmButtonClass},cancelButtonClasses:function(){return""+this.cancelButtonClass}},methods:{getSafeClose:function(){var e=this,t=this.uid;return function(){e.$nextTick(function(){t===e.uid&&e.doClose()})}},doClose:function(){var e=this;this.value&&(this.value=!1,this._closing=!0,this.onClose&&this.onClose(),this.lockScroll&&setTimeout(function(){e.modal&&"hidden"!==e.bodyOverflow&&(document.body.style.overflow=e.bodyOverflow,document.body.style.paddingRight=e.bodyPaddingRight),e.bodyOverflow=null,e.bodyPaddingRight=null},200),this.opened=!1,this.transition||this.doAfterClose(),this.action&&this.callback(this.action,this))},handleWrapperClick:function(){this.closeOnClickModal&&(this.action="",this.doClose())},handleAction:function(e){("prompt"!==this.$type||"confirm"!==e||this.validate())&&(this.action=e,"function"==typeof this.beforeClose?(this.close=this.getSafeClose(),this.beforeClose(e,this,this.close)):this.doClose())},validate:function(){if("prompt"===this.$type){var e=this.inputPattern;if(e&&!e.test(this.inputValue||""))return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;var t=this.inputValidator;if("function"==typeof t){var i=t(this.inputValue);if(i===!1)return this.editorErrorMessage=this.inputErrorMessage||(0,f.t)("el.messagebox.error"),(0,h.addClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!1;if("string"==typeof i)return this.editorErrorMessage=i,!1}}return this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid"),!0}},watch:{inputValue:{immediate:!0,handler:function(e){var t=this;this.$nextTick(function(i){"prompt"===t.$type&&null!==e&&t.validate()})}},value:function(e){var t=this;e&&this.uid++,"alert"!==this.$type&&"confirm"!==this.$type||this.$nextTick(function(){t.$refs.confirm.$el.focus()}),"prompt"===this.$type&&(e?setTimeout(function(){t.$refs.input&&t.$refs.input.$el&&t.$refs.input.$el.querySelector("input").focus()},500):(this.editorErrorMessage="",(0,h.removeClass)(this.$refs.input.$el.querySelector("input"),"invalid")))}},data:function(){return{uid:1,title:void 0,message:"",type:"",customClass:"",showInput:!1,inputValue:null,inputPlaceholder:"",inputPattern:null,inputValidator:null,inputErrorMessage:"",showConfirmButton:!0,showCancelButton:!1,action:"",confirmButtonText:"",cancelButtonText:"",confirmButtonLoading:!1,cancelButtonLoading:!1,confirmButtonClass:"",confirmButtonDisabled:!1,cancelButtonClass:"",editorErrorMessage:null,callback:null}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"msgbox-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.value,expression:"value"}],staticClass:"el-message-box__wrapper",on:{click:function(t){t.target===t.currentTarget&&e.handleWrapperClick(t)}}},[i("div",{staticClass:"el-message-box",class:e.customClass},[void 0!==e.title?i("div",{staticClass:"el-message-box__header"},[i("div",{staticClass:"el-message-box__title"},[e._v(e._s(e.title||e.t("el.messagebox.title")))]),e.showClose?i("i",{staticClass:"el-message-box__close el-icon-close",on:{click:function(t){e.handleAction("cancel")}}}):e._e()]):e._e(),""!==e.message?i("div",{staticClass:"el-message-box__content"},[i("div",{staticClass:"el-message-box__status",class:[e.typeClass]}),i("div",{staticClass:"el-message-box__message",style:{"margin-left":e.typeClass?"50px":"0"}},[i("p",[e._v(e._s(e.message))])]),i("div",{directives:[{name:"show",rawName:"v-show",value:e.showInput,expression:"showInput"}],staticClass:"el-message-box__input"},[i("el-input",{directives:[{name:"model",rawName:"v-model",value:e.inputValue,expression:"inputValue"}],ref:"input",attrs:{placeholder:e.inputPlaceholder},domProps:{value:e.inputValue},on:{input:function(t){e.inputValue=t}},nativeOn:{keyup:function(t){e._k(t.keyCode,"enter",13)||e.handleAction("confirm")}}}),i("div",{staticClass:"el-message-box__errormsg",style:{visibility:e.editorErrorMessage?"visible":"hidden"}},[e._v(e._s(e.editorErrorMessage))])],1)]):e._e(),i("div",{staticClass:"el-message-box__btns"},[i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showCancelButton,expression:"showCancelButton"}],class:[e.cancelButtonClasses],attrs:{loading:e.cancelButtonLoading},nativeOn:{click:function(t){e.handleAction("cancel")}}},[e._v("\n          "+e._s(e.cancelButtonText||e.t("el.messagebox.cancel"))+"\n        ")]),i("el-button",{directives:[{name:"show",rawName:"v-show",value:e.showConfirmButton,expression:"showConfirmButton"}],ref:"confirm",class:[e.confirmButtonClasses],attrs:{loading:e.confirmButtonLoading},nativeOn:{click:function(t){e.handleAction("confirm")}}},[e._v("\n          "+e._s(e.confirmButtonText||e.t("el.messagebox.confirm"))+"\n        ")])],1)])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(765),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(766),i(767),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumb",props:{separator:{type:String,default:"/"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-breadcrumb"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(769),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(770),i(771),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBreadcrumbItem",props:{to:{},replace:Boolean},data:function(){return{separator:""}},mounted:function(){var e=this;this.separator=this.$parent.separator;var t=this;if(this.to){var i=this.$refs.link;i.addEventListener("click",function(i){var n=e.to;t.replace?t.$router.replace(n):t.$router.push(n)})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-breadcrumb__item"},[i("span",{ref:"link",staticClass:"el-breadcrumb__item__inner"},[e._t("default")],2),i("span",{staticClass:"el-breadcrumb__separator"},[e._v(e._s(e.separator))])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(773),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(774),i(775),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElForm",componentName:"ElForm",props:{model:Object,rules:Object,labelPosition:String,labelWidth:String,labelSuffix:{type:String,default:""},inline:Boolean,showMessage:{type:Boolean,default:!0}},watch:{rules:function(){this.validate()}},data:function(){return{fields:[]}},created:function(){var e=this;this.$on("el.form.addField",function(t){t&&e.fields.push(t)}),this.$on("el.form.removeField",function(t){t.prop&&e.fields.splice(e.fields.indexOf(t),1)})},methods:{resetFields:function(){this.fields.forEach(function(e){e.resetField()})},validate:function(e){var t=this,i=!0,n=0;0===this.fields.length&&e&&e(!0),this.fields.forEach(function(s,o){s.validate("",function(s){s&&(i=!1),"function"==typeof e&&++n===t.fields.length&&e(i)})})},validateField:function(e,t){var i=this.fields.filter(function(t){return t.prop===e})[0];if(!i)throw new Error("must call validateField with valid prop string!");i.validate("",t)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("form",{staticClass:"el-form",class:[e.labelPosition?"el-form--label-"+e.labelPosition:"",{"el-form--inline":e.inline}]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(777),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(778),i(804),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}function o(e,t){var i=e;t=t.replace(/\[(\w+)\]/g,".$1"),t=t.replace(/^\./,"");for(var n=t.split("."),s=0,o=n.length;s<o-1;++s){var a=n[s];if(!(a in i))throw new Error("please transfer a valid prop path to form item!");i=i[a]}return{o:i,k:n[s],v:i[n[s]]}}t.__esModule=!0;var a=i(779),r=n(a),l=i(587),u=n(l);t.default={name:"ElFormItem",componentName:"ElFormItem",mixins:[u.default],props:{label:String,labelWidth:String,prop:String,required:Boolean,rules:[Object,Array],error:String,validateStatus:String,showMessage:{type:Boolean,default:!0}},watch:{error:function(e){this.validateMessage=e,this.validateState=e?"error":""},validateStatus:function(e){this.validateState=e}},computed:{labelStyle:function(){var e={};if("top"===this.form.labelPosition)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.width=t),e},contentStyle:function(){var e={};if("top"===this.form.labelPosition||this.form.inline)return e;var t=this.labelWidth||this.form.labelWidth;return t&&(e.marginLeft=t),e},form:function(){for(var e=this.$parent;"ElForm"!==e.$options.componentName;)e=e.$parent;return e},fieldValue:{cache:!1,get:function(){var e=this.form.model;if(e&&this.prop){var t=this.prop;return t.indexOf(":")!==-1&&(t=t.replace(/:/,".")),o(e,t).v}}}},data:function(){return{validateState:"",validateMessage:"",validateDisabled:!1,validator:{},isRequired:!1}},methods:{validate:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:s,n=this.getFilteredRule(e);if(!n||0===n.length)return i(),!0;this.validateState="validating";var o={};o[this.prop]=n;var a=new r.default(o),l={};l[this.prop]=this.fieldValue,a.validate(l,{firstFields:!0},function(e,n){t.validateState=e?"error":"success",t.validateMessage=e?e[0].message:"",i(t.validateMessage)})},resetField:function(){this.validateState="",this.validateMessage="";var e=this.form.model,t=this.fieldValue,i=this.prop;i.indexOf(":")!==-1&&(i=i.replace(/:/,"."));var n=o(e,i);Array.isArray(t)?(this.validateDisabled=!0,n.o[n.k]=[].concat(this.initialValue)):(this.validateDisabled=!0,n.o[n.k]=this.initialValue)},getRules:function(){var e=this.form.rules,t=this.rules;return e=e?e[this.prop]:[],[].concat(t||e||[])},getFilteredRule:function(e){var t=this.getRules();return t.filter(function(t){return!t.trigger||t.trigger.indexOf(e)!==-1})},onFieldBlur:function(){this.validate("blur")},onFieldChange:function(){return this.validateDisabled?void(this.validateDisabled=!1):void this.validate("change")}},mounted:function(){var e=this;if(this.prop){this.dispatch("ElForm","el.form.addField",[this]);var t=this.fieldValue;Array.isArray(t)&&(t=[].concat(t)),Object.defineProperty(this,"initialValue",{value:t});var i=this.getRules();i.length&&(i.every(function(t){if(t.required)return e.isRequired=!0,!1}),this.$on("el.form.blur",this.onFieldBlur),this.$on("el.form.change",this.onFieldChange))}},beforeDestroy:function(){this.dispatch("ElForm","el.form.removeField",[this])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){this.rules=null,this._messages=c.messages,this.define(e)}Object.defineProperty(t,"__esModule",{value:!0});var o=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(780),l=i(781),u=n(l),c=i(803),d=i(783);s.prototype={messages:function(e){return e&&(this._messages=(0,r.deepMerge)((0,c.newMessages)(),e)),this._messages},define:function(e){if(!e)throw new Error("Cannot configure a schema with no rules");if("object"!==("undefined"==typeof e?"undefined":a(e))||Array.isArray(e))throw new Error("Rules must be an object");this.rules={};var t=void 0,i=void 0;for(t in e)e.hasOwnProperty(t)&&(i=e[t],this.rules[t]=Array.isArray(i)?i:[i])},validate:function(e){function t(e){function t(e){Array.isArray(e)?s=s.concat.apply(s,e):s.push(e)}var i=void 0,n=void 0,s=[],o={};for(i=0;i<e.length;i++)t(e[i]);if(s.length)for(i=0;i<s.length;i++)n=s[i].field,o[n]=o[n]||[],o[n].push(s[i]);else s=null,o=null;f(s,o)}var i=this,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{},l=arguments[2],u=e,h=n,f=l;if("function"==typeof h&&(f=h,h={}),!this.rules||0===Object.keys(this.rules).length)return void(f&&f());if(h.messages){var p=this.messages();p===c.messages&&(p=(0,c.newMessages)()),(0,r.deepMerge)(p,h.messages),h.messages=p}else h.messages=this.messages();h.error=d.error;var m=void 0,v=void 0,g={},y=h.keys||Object.keys(this.rules);y.forEach(function(t){m=i.rules[t],v=u[t],m.forEach(function(n){var s=n;"function"==typeof s.transform&&(u===e&&(u=o({},u)),v=u[t]=s.transform(v)),s="function"==typeof s?{validator:s}:o({},s),s.validator=i.getValidationMethod(s),s.field=t,s.fullField=s.fullField||t,s.type=i.getType(s),s.validator&&(g[t]=g[t]||[],g[t].push({rule:s,value:v,source:u,field:t}))})});var b={};(0,r.asyncMap)(g,h,function(e,t){function i(e,t){return o({},t,{fullField:l.fullField+"."+e})}function n(){var n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:[],a=n;if(Array.isArray(a)||(a=[a]),a.length&&(0,r.warning)("async-validator:",a),a.length&&l.message&&(a=[].concat(l.message)),a=a.map((0,r.complementError)(l)),(h.first||h.fieldFirst)&&a.length)return b[l.field]=1,t(a);if(u){if(l.required&&!e.value)return a=l.message?[].concat(l.message).map((0,r.complementError)(l)):[h.error(l,(0,r.format)(h.messages.required,l.field))],t(a);var c={};if(l.defaultField)for(var d in e.value)e.value.hasOwnProperty(d)&&(c[d]=l.defaultField);c=o({},c,e.rule.fields);for(var f in c)if(c.hasOwnProperty(f)){var p=Array.isArray(c[f])?c[f]:[c[f]];c[f]=p.map(i.bind(null,f))}var m=new s(c);m.messages(h.messages),e.rule.options&&(e.rule.options.messages=h.messages,e.rule.options.error=h.error),m.validate(e.value,e.rule.options||h,function(e){t(e&&e.length?a.concat(e):e)})}else t(a)}var l=e.rule,u=!("object"!==l.type&&"array"!==l.type||"object"!==a(l.fields)&&"object"!==a(l.defaultField));u=u&&(l.required||!l.required&&e.value),l.field=e.field,l.validator(l,e.value,n,e.source,h)},function(e){t(e)})},getType:function(e){if(void 0===e.type&&e.pattern instanceof RegExp&&(e.type="pattern"),"function"!=typeof e.validator&&e.type&&!u.default.hasOwnProperty(e.type))throw new Error((0,r.format)("Unknown rule type %s",e.type));return e.type||"string"},getValidationMethod:function(e){if("function"==typeof e.validator)return e.validator;var t=Object.keys(e),i=t.indexOf("message");return i!==-1&&t.splice(i,1),1===t.length&&"required"===t[0]?u.default.required:u.default[this.getType(e)]||!1}},s.register=function(e,t){if("function"!=typeof t)throw new Error("Cannot register a validator by type, validator is not a function");u.default[e]=t},s.messages=c.messages,t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e,t){t.every(function(e){return"string"==typeof e})&&g(e,t)}function s(){for(var e=arguments.length,t=Array(e),i=0;i<e;i++)t[i]=arguments[i];var n=1,s=t[0],o=t.length;if("function"==typeof s)return s.apply(null,t.slice(1));if("string"==typeof s){for(var a=String(s).replace(v,function(e){if("%%"===e)return"%";if(n>=o)return e;switch(e){case"%s":return String(t[n++]);case"%d":return Number(t[n++]);case"%j":try{return JSON.stringify(t[n++])}catch(e){return"[Circular]"}break;default:return e}}),r=t[n];n<o;r=t[++n])a+=" "+r;return a}return s}function o(e){return"string"===e||"url"===e||"hex"===e||"email"===e}function a(e,t){return void 0===e||null===e||(!("array"!==t||!Array.isArray(e)||e.length)||!(!o(t)||"string"!=typeof e||e))}function r(e){return 0===Object.keys(e).length}function l(e,t,i){function n(e){s.push.apply(s,e),o++,o===a&&i(s)}var s=[],o=0,a=e.length;e.forEach(function(e){t(e,n)})}function u(e,t,i){function n(a){if(a&&a.length)return void i(a);var r=s;s+=1,r<o?t(e[r],n):i([])}var s=0,o=e.length;n([])}function c(e){var t=[];return Object.keys(e).forEach(function(i){t.push.apply(t,e[i])}),t}function d(e,t,i,n){if(t.first){var s=c(e);return u(s,i,n)}var o=t.firstFields||[];o===!0&&(o=Object.keys(e));var a=Object.keys(e),r=a.length,d=0,h=[],f=function(e){h.push.apply(h,e),d++,d===r&&n(h)};a.forEach(function(t){var n=e[t];o.indexOf(t)!==-1?u(n,i,f):l(n,i,f)})}function h(e){return function(t){return t&&t.message?(t.field=t.field||e.fullField,t):{message:t,field:t.field||e.fullField}}}function f(e,t){if(t)for(var i in t)if(t.hasOwnProperty(i)){var n=t[i];"object"===("undefined"==typeof n?"undefined":m(n))&&"object"===m(e[i])?e[i]=p({},e[i],n):e[i]=n}return e}Object.defineProperty(t,"__esModule",{value:!0});var p=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var i=arguments[t];for(var n in i)Object.prototype.hasOwnProperty.call(i,n)&&(e[n]=i[n])}return e},m="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.warning=n,t.format=s,t.isEmptyValue=a,t.isEmptyObject=r,t.asyncMap=d,t.complementError=h,t.deepMerge=f;var v=/%[sdj%]/g,g=function(){}},function(e,t,i){"use strict";e.exports={string:i(782),method:i(790),number:i(791),boolean:i(792),regexp:i(793),integer:i(794),float:i(795),array:i(796),object:i(797),enum:i(798),pattern:i(799),email:i(800),url:i(800),date:i(801),hex:i(800),required:i(802)}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s,"string"),(0,r.isEmptyValue)(t,"string")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s),a.default.pattern(e,t,n,o,s),e.whitespace===!0&&a.default.whitespace(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),t.default={required:i(784),whitespace:i(785),type:i(786),range:i(787),enum:i(788),pattern:i(789)},e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s,o){!e.required||i.hasOwnProperty(e.field)&&!a.isEmptyValue(t,o)||n.push(a.format(s.messages.required,e.fullField))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(780),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){(/^\s+$/.test(t)||""===t)&&n.push(a.format(s.messages.whitespace,e.fullField))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(780),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function o(e,t,i,n,s){if(e.required&&void 0===t)return void(0,c.default)(e,t,i,n,s);var o=["integer","float","array","regexp","object","method","email","number","date","url","hex"],r=e.type;o.indexOf(r)>-1?h[r](t)||n.push(l.format(s.messages.types[r],e.fullField,e.type)):r&&("undefined"==typeof t?"undefined":a(t))!==e.type&&n.push(l.format(s.messages.types[r],e.fullField,e.type))}Object.defineProperty(t,"__esModule",{value:!0});var a="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},r=i(780),l=s(r),u=i(784),c=n(u),d={email:/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/,url:new RegExp("^(?!mailto:)(?:(?:http|https|ftp)://|//)(?:\\S+(?::\\S*)?@)?(?:(?:(?:[1-9]\\d?|1\\d\\d|2[01]\\d|22[0-3])(?:\\.(?:1?\\d{1,2}|2[0-4]\\d|25[0-5])){2}(?:\\.(?:[0-9]\\d?|1\\d\\d|2[0-4]\\d|25[0-4]))|(?:(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)(?:\\.(?:[a-z\\u00a1-\\uffff0-9]+-?)*[a-z\\u00a1-\\uffff0-9]+)*(?:\\.(?:[a-z\\u00a1-\\uffff]{2,})))|localhost)(?::\\d{2,5})?(?:(/|\\?|#)[^\\s]*)?$","i"),hex:/^#?([a-f0-9]{6}|[a-f0-9]{3})$/i},h={integer:function(e){return h.number(e)&&parseInt(e,10)===e},float:function(e){return h.number(e)&&!h.integer(e)},array:function(e){return Array.isArray(e)},regexp:function(e){if(e instanceof RegExp)return!0;try{return!!new RegExp(e)}catch(e){return!1}},date:function(e){return"function"==typeof e.getTime&&"function"==typeof e.getMonth&&"function"==typeof e.getYear},number:function(e){return!isNaN(e)&&"number"==typeof e},object:function(e){return"object"===("undefined"==typeof e?"undefined":a(e))&&!h.array(e)},method:function(e){return"function"==typeof e},email:function(e){return"string"==typeof e&&!!e.match(d.email)},url:function(e){return"string"==typeof e&&!!e.match(d.url)},hex:function(e){return"string"==typeof e&&!!e.match(d.hex)}};t.default=o,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){var o="number"==typeof e.len,r="number"==typeof e.min,l="number"==typeof e.max,u=t,c=null,d="number"==typeof t,h="string"==typeof t,f=Array.isArray(t);return d?c="number":h?c="string":f&&(c="array"),!!c&&((h||f)&&(u=t.length),void(o?u!==e.len&&n.push(a.format(s.messages[c].len,e.fullField,e.len)):r&&!l&&u<e.min?n.push(a.format(s.messages[c].min,e.fullField,e.min)):l&&!r&&u>e.max?n.push(a.format(s.messages[c].max,e.fullField,e.max)):r&&l&&(u<e.min||u>e.max)&&n.push(a.format(s.messages[c].range,e.fullField,e.min,e.max))))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(780),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e[r]=Array.isArray(e[r])?e[r]:[],e[r].indexOf(t)===-1&&n.push(a.format(s.messages[r],e.fullField,e[r].join(", ")))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(780),a=n(o),r="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i]);return t.default=e,t}function s(e,t,i,n,s){e.pattern instanceof RegExp&&(e.pattern.test(t)||n.push(a.format(s.messages.pattern.mismatch,e.fullField,t,e.pattern)))}Object.defineProperty(t,"__esModule",{value:!0});var o=i(780),a=n(o);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var a=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,o.isEmptyValue)(t)&&!e.required)return i();r.default.required(e,t,n,a,s),void 0!==t&&r.default.type(e,t,n,a,s)}i(a)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(780),a=i(783),r=n(a);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"array")&&!e.required)return i();a.default.required(e,t,n,o,s,"array"),(0,r.isEmptyValue)(t,"array")||(a.default.type(e,t,n,o,s),a.default.range(e,t,n,o,s))}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),void 0!==t&&a.default.type(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),t&&a.default[l](e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780),l="enum";t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t,"string")&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t,"string")||a.default.pattern(e,t,n,o,s)}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=e.type,l=[],u=e.required||!e.required&&n.hasOwnProperty(e.field);if(u){if((0,r.isEmptyValue)(t,o)&&!e.required)return i();a.default.required(e,t,n,l,s,o),(0,r.isEmptyValue)(t,o)||a.default.type(e,t,n,l,s)}i(l)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var o=[],l=e.required||!e.required&&n.hasOwnProperty(e.field);if(l){if((0,r.isEmptyValue)(t)&&!e.required)return i();a.default.required(e,t,n,o,s),(0,r.isEmptyValue)(t)||(a.default.type(e,t,n,o,s),t&&a.default.range(e,t.getTime(),n,o,s));
-}i(o)}Object.defineProperty(t,"__esModule",{value:!0});var o=i(783),a=n(o),r=i(780);t.default=s,e.exports=t.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t,i,n,s){var a=[],l=Array.isArray(t)?"array":"undefined"==typeof t?"undefined":o(t);r.default.required(e,t,n,a,s,l),i(a)}Object.defineProperty(t,"__esModule",{value:!0});var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(783),r=n(a);t.default=s,e.exports=t.default},function(e,t){"use strict";function i(){return{default:"Validation error on field %s",required:"%s is required",enum:"%s must be one of %s",whitespace:"%s cannot be empty",date:{format:"%s date %s is invalid for format %s",parse:"%s date could not be parsed, %s is invalid ",invalid:"%s date %s is invalid"},types:{string:"%s is not a %s",method:"%s is not a %s (function)",array:"%s is not an %s",object:"%s is not an %s",number:"%s is not a %s",date:"%s is not a %s",boolean:"%s is not a %s",integer:"%s is not an %s",float:"%s is not a %s",regexp:"%s is not a valid %s",email:"%s is not a valid %s",url:"%s is not a valid %s",hex:"%s is not a valid %s"},string:{len:"%s must be exactly %s characters",min:"%s must be at least %s characters",max:"%s cannot be longer than %s characters",range:"%s must be between %s and %s characters"},number:{len:"%s must equal %s",min:"%s cannot be less than %s",max:"%s cannot be greater than %s",range:"%s must be between %s and %s"},array:{len:"%s must be exactly %s in length",min:"%s cannot be less than %s in length",max:"%s cannot be greater than %s in length",range:"%s must be between %s and %s in length"},pattern:{mismatch:"%s value %s does not match pattern %s"},clone:function(){var e=JSON.parse(JSON.stringify(this));return e.clone=this.clone,e}}}Object.defineProperty(t,"__esModule",{value:!0}),t.newMessages=i;t.messages=i()},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-form-item",class:{"is-error":"error"===e.validateState,"is-validating":"validating"===e.validateState,"is-required":e.isRequired||e.required}},[e.label?i("label",{staticClass:"el-form-item__label",style:e.labelStyle,attrs:{for:e.prop}},[e._v("\n    "+e._s(e.label+e.form.labelSuffix)+"\n  ")]):e._e(),i("div",{staticClass:"el-form-item__content",style:e.contentStyle},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-top"}},["error"===e.validateState&&e.showMessage&&e.form.showMessage?i("div",{staticClass:"el-form-item__error"},[e._v(e._s(e.validateMessage))]):e._e()])],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(806),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(807),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(808),o=n(s);t.default={name:"ElTabs",components:{TabNav:o.default},props:{type:String,activeName:String,closable:Boolean,addable:Boolean,value:{},editable:Boolean},data:function(){return{currentName:this.value||this.activeName,panes:[]}},watch:{activeName:function(e){this.setCurrentName(e)},value:function(e){this.setCurrentName(e)},currentName:function(e){var t=this;this.$refs.nav&&this.$nextTick(function(e){t.$refs.nav.scrollToActiveTab()})}},methods:{handleTabClick:function(e,t,i){e.disabled||(this.setCurrentName(t),this.$emit("tab-click",e,i))},handleTabRemove:function(e,t){e.disabled||(t.stopPropagation(),this.$emit("edit",e.name,"remove"),this.$emit("tab-remove",e.name))},handleTabAdd:function(){this.$emit("edit",null,"add"),this.$emit("tab-add")},setCurrentName:function(e){this.currentName=e,this.$emit("input",e)},addPanes:function(e){var t=this.$slots.default.indexOf(e.$vnode);this.panes.splice(t,0,e)},removePanes:function(e){var t=this.panes,i=t.indexOf(e);i>-1&&t.splice(i,1)}},render:function(e){var t=this.type,i=this.handleTabClick,n=this.handleTabRemove,s=this.handleTabAdd,o=this.currentName,a=this.panes,r=this.editable,l=this.addable,u=r||l?e("span",{class:"el-tabs__new-tab",on:{click:s}},[e("i",{class:"el-icon-plus"},[])]):null,c={props:{currentName:o,onTabClick:i,onTabRemove:n,editable:r,type:t,panes:a},ref:"nav"};return e("div",{class:{"el-tabs":!0,"el-tabs--card":"card"===t,"el-tabs--border-card":"border-card"===t}},[e("div",{class:"el-tabs__header"},[u,e("tab-nav",c,[])]),e("div",{class:"el-tabs__content"},[this.$slots.default])])},created:function(){this.currentName||this.setCurrentName("0")}}},function(e,t,i){var n=i(13)(i(809),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(810),a=n(o),r=i(612);t.default={name:"TabNav",components:{TabBar:a.default},props:{panes:Array,currentName:String,editable:Boolean,onTabClick:{type:Function,default:s},onTabRemove:{type:Function,default:s},type:String},data:function(){return{scrollable:!1,navStyle:{transform:""}}},methods:{scrollPrev:function(){var e=this.$refs.navScroll.offsetWidth,t=this.getCurrentScrollOffset();if(t){var i=t>e?t-e:0;this.setOffset(i)}},scrollNext:function(){var e=this.$refs.nav.offsetWidth,t=this.$refs.navScroll.offsetWidth,i=this.getCurrentScrollOffset();if(!(e-i<=t)){var n=e-i>2*t?i+t:e-t;this.setOffset(n)}},scrollToActiveTab:function(){if(this.scrollable){var e=this.$refs.nav,t=this.$el.querySelector(".is-active"),i=this.$refs.navScroll,n=t.getBoundingClientRect(),s=i.getBoundingClientRect(),o=e.getBoundingClientRect(),a=this.getCurrentScrollOffset(),r=a;n.left<s.left&&(r=a-(s.left-n.left)),n.right>s.right&&(r=a+n.right-s.right),o.right<s.right&&(r=e.offsetWidth-s.width),this.setOffset(Math.max(r,0))}},getCurrentScrollOffset:function(){var e=this.navStyle;return e.transform?Number(e.transform.match(/translateX\(-(\d+(\.\d+)*)px\)/)[1]):0},setOffset:function(e){this.navStyle.transform="translateX(-"+e+"px)"},update:function(){var e=this.$refs.nav.offsetWidth,t=this.$refs.navScroll.offsetWidth,i=this.getCurrentScrollOffset();if(t<e){var n=this.getCurrentScrollOffset();this.scrollable=this.scrollable||{},this.scrollable.prev=n,this.scrollable.next=n+t<e,e-n<t&&this.setOffset(e-t)}else this.scrollable=!1,i>0&&this.setOffset(0)}},updated:function(){this.update()},render:function(e){var t=this.type,i=this.panes,n=this.editable,s=this.onTabClick,o=this.onTabRemove,a=this.navStyle,r=this.scrollable,l=this.scrollNext,u=this.scrollPrev,c=r?[e("span",{class:["el-tabs__nav-prev",r.prev?"":"is-disabled"],on:{click:u}},[e("i",{class:"el-icon-arrow-left"},[])]),e("span",{class:["el-tabs__nav-next",r.next?"":"is-disabled"],on:{click:l}},[e("i",{class:"el-icon-arrow-right"},[])])]:null,d=this._l(i,function(t,i){var a=t.name||t.index||i,r=t.isClosable||n;t.index=""+i;var l=r?e("span",{class:"el-icon-close",on:{click:function(e){o(t,e)}}},[]):null,u=t.$slots.label||t.label;return e("div",{class:{"el-tabs__item":!0,"is-active":t.active,"is-disabled":t.disabled,"is-closable":r},ref:"tabs",refInFor:!0,on:{click:function(e){s(t,a,e)}}},[u,l])});return e("div",{class:["el-tabs__nav-wrap",r?"is-scrollable":""]},[c,e("div",{class:["el-tabs__nav-scroll"],ref:"navScroll"},[e("div",{class:"el-tabs__nav",ref:"nav",style:a},[t?null:e("tab-bar",{attrs:{tabs:i}},[]),d])])])},mounted:function(){(0,r.addResizeListener)(this.$el,this.update)},beforeDestroy:function(){this.$el&&this.update&&(0,r.removeResizeListener)(this.$el,this.update)}}},function(e,t,i){var n=i(13)(i(811),i(812),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"TabBar",props:{tabs:Array},computed:{barStyle:{cache:!1,get:function(){var e=this;if(!this.$parent.$refs.tabs)return{};var t={},i=0,n=0;this.tabs.every(function(t,s){var o=e.$parent.$refs.tabs[s];return!!o&&(t.active?(n=o.clientWidth,!1):(i+=o.clientWidth,!0))});var s="translateX("+i+"px)";return t.width=n+"px",t.transform=s,t.msTransform=s,t.webkitTransform=s,t}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tabs__active-bar",style:e.barStyle})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(814),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(815),i(816),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElTabPane",componentName:"ElTabPane",props:{label:String,labelContent:Function,name:String,closable:Boolean,disabled:Boolean},data:function(){return{index:null}},computed:{isClosable:function(){return this.closable||this.$parent.closable},active:function(){return this.$parent.currentName===(this.name||this.index)}},mounted:function(){this.$parent.addPanes(this)},destroyed:function(){this.$el&&this.$el.parentNode&&this.$el.parentNode.removeChild(this.$el),this.$parent.removePanes(this)},watch:{label:function(){this.$parent.$forceUpdate()}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.active,expression:"active"}],staticClass:"el-tab-pane"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(818),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(819),i(826),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(820),o=n(s),a=i(15),r=i(587),l=n(r);t.default={name:"ElTree",mixins:[l.default],components:{ElTreeNode:i(823)},data:function(){return{store:null,root:null,currentNode:null}},props:{data:{type:Array},emptyText:{type:String,default:function(){return(0,a.t)("el.tree.emptyText")}},nodeKey:String,checkStrictly:Boolean,defaultExpandAll:Boolean,expandOnClickNode:{type:Boolean,default:!0},autoExpandParent:{type:Boolean,default:!0},defaultCheckedKeys:Array,defaultExpandedKeys:Array,renderContent:Function,showCheckbox:{type:Boolean,default:!1},props:{default:function(){return{children:"children",label:"label",icon:"icon"}}},lazy:{type:Boolean,default:!1},highlightCurrent:Boolean,currentNodeKey:[String,Number],load:Function,filterNodeMethod:Function,accordion:Boolean,indent:{type:Number,default:16}},computed:{children:{set:function(e){this.data=e},get:function(){return this.data}}},watch:{defaultCheckedKeys:function(e){this.store.defaultCheckedKeys=e,this.store.setDefaultCheckedKey(e)},defaultExpandedKeys:function(e){this.store.defaultExpandedKeys=e,this.store.setDefaultExpandedKeys(e)},currentNodeKey:function(e){this.store.setCurrentNodeKey(e),this.store.currentNodeKey=e},data:function(e){this.store.setData(e)}},methods:{filter:function(e){if(!this.filterNodeMethod)throw new Error("[Tree] filterNodeMethod is required when filter");this.store.filter(e)},getNodeKey:function(e,t){var i=this.nodeKey;return i&&e?e.data[i]:t},getCheckedNodes:function(e){return this.store.getCheckedNodes(e)},getCheckedKeys:function(e){return this.store.getCheckedKeys(e)},setCheckedNodes:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedNodes(e,t)},setCheckedKeys:function(e,t){if(!this.nodeKey)throw new Error("[Tree] nodeKey is required in setCheckedNodes");this.store.setCheckedKeys(e,t)},setChecked:function(e,t,i){this.store.setChecked(e,t,i)},handleNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.$emit("node-expand",e,t,i)}},created:function(){this.isTree=!0,this.store=new o.default({key:this.nodeKey,data:this.data,lazy:this.lazy,props:this.props,load:this.load,currentNodeKey:this.currentNodeKey,checkStrictly:this.checkStrictly,defaultCheckedKeys:this.defaultCheckedKeys,defaultExpandedKeys:this.defaultExpandedKeys,autoExpandParent:this.autoExpandParent,defaultExpandAll:this.defaultExpandAll,filterNodeMethod:this.filterNodeMethod}),this.root=this.store.root}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},a=i(821),r=n(a),l=i(822),u=function(){function e(t){var i=this;s(this,e),this.currentNode=null,this.currentNodeKey=null;for(var n in t)t.hasOwnProperty(n)&&(this[n]=t[n]);if(this.nodesMap={},this.root=new r.default({data:this.data,store:this}),this.lazy&&this.load){var o=this.load;o(this.root,function(e){i.root.doCreateChildren(e),i._initDefaultCheckedNodes()})}else this._initDefaultCheckedNodes()}return e.prototype.filter=function(e){var t=this.filterNodeMethod,i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;if(s.forEach(function(n){n.visible=t.call(n,e,n.data,n),i(n)}),!n.visible&&s.length){var o=!0;s.forEach(function(e){e.visible&&(o=!1)}),n.root?n.root.visible=o===!1:n.visible=o===!1}n.visible&&!n.isLeaf&&n.expand()};i(this)},e.prototype.setData=function(e){var t=e!==this.root.data;this.root.setData(e),t&&this._initDefaultCheckedNodes()},e.prototype.getNode=function(e){var t="object"!==("undefined"==typeof e?"undefined":o(e))?e:(0,l.getNodeKey)(this.key,e);return this.nodesMap[t]},e.prototype.insertBefore=function(e,t){var i=this.getNode(t);i.parent.insertBefore({data:e},i)},e.prototype.insertAfter=function(e,t){var i=this.getNode(t);i.parent.insertAfter({data:e},i)},e.prototype.remove=function(e){var t=this.getNode(e);t&&t.parent.removeChild(t)},e.prototype.append=function(e,t){var i=t?this.getNode(t):this.root;i&&i.insertChild({data:e})},e.prototype._initDefaultCheckedNodes=function(){var e=this,t=this.defaultCheckedKeys||[],i=this.nodesMap;t.forEach(function(t){var n=i[t];n&&n.setChecked(!0,!e.checkStrictly)})},e.prototype._initDefaultCheckedNode=function(e){var t=this.defaultCheckedKeys||[];t.indexOf(e.key)!==-1&&e.setChecked(!0,!this.checkStrictly)},e.prototype.setDefaultCheckedKey=function(e){e!==this.defaultCheckedKeys&&(this.defaultCheckedKeys=e,this._initDefaultCheckedNodes())},e.prototype.registerNode=function(e){var t=this.key;if(t&&e&&e.data){var i=e.key;i&&(this.nodesMap[e.key]=e)}},e.prototype.deregisterNode=function(e){var t=this.key;t&&e&&e.data&&delete this.nodesMap[e.key]},e.prototype.getCheckedNodes=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=[],i=function i(n){var s=n.root?n.root.childNodes:n.childNodes;s.forEach(function(n){(!e&&n.checked||e&&n.isLeaf&&n.checked)&&t.push(n.data),i(n)})};return i(this),t},e.prototype.getCheckedKeys=function(){var e=arguments.length>0&&void 0!==arguments[0]&&arguments[0],t=this.key,i=this._getAllNodes(),n=[];return i.forEach(function(i){(!e||e&&i.isLeaf)&&i.checked&&n.push((i.data||{})[t])}),n},e.prototype._getAllNodes=function(){var e=[],t=this.nodesMap;for(var i in t)t.hasOwnProperty(i)&&e.push(t[i]);return e},e.prototype._setCheckedKeys=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]&&arguments[1],n=arguments[2],s=this._getAllNodes();s.sort(function(e,t){return t.level-e.level});var o=Object.keys(n);s.forEach(function(n){var s=o.indexOf(n.data[e]+"")>-1;if(n.isLeaf)n.setChecked(s,!1);else{if(t.checkStrictly)n.setChecked(s,!1);else{for(var a=n.childNodes,r=!0,l=!0,u=0,c=a.length;u<c;u++){var d=a[u];(d.checked!==!0||d.indeterminate)&&(r=!1),(d.checked!==!1||d.indeterminate)&&(l=!1)}r?n.setChecked(!0,!t.checkStrictly):r||l?l&&n.setChecked(s,!t.checkStrictly):(s=!!s||"half",n.setChecked(s,!t.checkStrictly&&s===!0))}i&&!function(){n.setChecked(!1,!1);var e=function e(t){var i=t.childNodes;i.forEach(function(t){t.isLeaf||t.setChecked(!1,!1),e(t)})};e(n)}()}})},e.prototype.setCheckedNodes=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1],i=this.key,n={};e.forEach(function(e){n[(e||{})[i]]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setCheckedKeys=function(e){var t=arguments.length>1&&void 0!==arguments[1]&&arguments[1];this.defaultCheckedKeys=e;var i=this.key,n={};e.forEach(function(e){n[e]=!0}),this._setCheckedKeys(i,t,n)},e.prototype.setDefaultExpandedKeys=function(e){var t=this;e=e||[],this.defaultExpandedKeys=e,e.forEach(function(e){var i=t.getNode(e);i&&i.expand(null,t.autoExpandParent)})},e.prototype.setChecked=function(e,t,i){var n=this.getNode(e);n&&n.setChecked(!!t,i)},e.prototype.getCurrentNode=function(){return this.currentNode},e.prototype.setCurrentNode=function(e){this.currentNode=e},e.prototype.setCurrentNodeKey=function(e){var t=this.getNode(e);t&&(this.currentNode=t)},e}();t.default=u},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var o=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),a=i(593),r=n(a),l=i(822),u=function(e){for(var t=e.childNodes,i=!0,n=!0,s=0,o=t.length;s<o;s++){var a=t[s];(a.checked!==!0||a.indeterminate)&&(i=!1),(a.checked!==!1||a.indeterminate)&&(n=!1)}i?e.setChecked(!0):i||n?n&&e.setChecked(!1):e.setChecked("half")},c=function(e,t){var i=e.store.props,n=e.data||{},s=i[t];return"function"==typeof s?s(n,e):"string"==typeof s?n[s]:"undefined"==typeof s?"":void 0},d=0,h=function(){function e(t){s(this,e),this.id=d++,this.text=null,this.checked=!1,this.indeterminate=!1,this.data=null,this.expanded=!1,this.parent=null,this.visible=!0;for(var i in t)t.hasOwnProperty(i)&&(this[i]=t[i]);this.level=0,this.loaded=!1,this.childNodes=[],this.loading=!1,this.parent&&(this.level=this.parent.level+1);var n=this.store;if(!n)throw new Error("[Node]store is required!");n.registerNode(this);var o=n.props;if(o&&"undefined"!=typeof o.isLeaf){var a=c(this,"isLeaf");"boolean"==typeof a&&(this.isLeafByUser=a)}if(n.lazy!==!0&&this.data?(this.setData(this.data),n.defaultExpandAll&&(this.expanded=!0)):this.level>0&&n.lazy&&n.defaultExpandAll&&this.expand(),this.data){var r=n.defaultExpandedKeys,l=n.key;l&&r&&r.indexOf(this.key)!==-1&&this.expand(null,n.autoExpandParent),l&&n.currentNodeKey&&this.key===n.currentNodeKey&&(n.currentNode=this),n.lazy&&n._initDefaultCheckedNode(this),this.updateLeafState()}}return e.prototype.setData=function(e){Array.isArray(e)||(0,l.markNodeData)(this,e),this.data=e,this.childNodes=[];var t=void 0;t=0===this.level&&this.data instanceof Array?this.data:c(this,"children")||[];for(var i=0,n=t.length;i<n;i++)this.insertChild({data:t[i]})},e.prototype.insertChild=function(t,i){if(!t)throw new Error("insertChild error: child is required.");t instanceof e||((0,r.default)(t,{parent:this,store:this.store}),t=new e(t)),t.level=this.level+1,"undefined"==typeof i||i<0?this.childNodes.push(t):this.childNodes.splice(i,0,t),this.updateLeafState()},e.prototype.insertBefore=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t)),this.insertChild(e,i)},e.prototype.insertAfter=function(e,t){var i=void 0;t&&(i=this.childNodes.indexOf(t),i!==-1&&(i+=1)),this.insertChild(e,i)},e.prototype.removeChild=function(e){var t=this.childNodes.indexOf(e);t>-1&&(this.store&&this.store.deregisterNode(e),e.parent=null,this.childNodes.splice(t,1)),this.updateLeafState()},e.prototype.removeChildByData=function(e){var t=null;this.childNodes.forEach(function(i){i.data===e&&(t=i)}),t&&this.removeChild(t)},e.prototype.expand=function(e,t){var i=this,n=function(){if(t)for(var n=i.parent;n.level>0;)n.expanded=!0,n=n.parent;i.expanded=!0,e&&e()};this.shouldLoadData()?this.loadData(function(e){e instanceof Array&&n()}):n()},e.prototype.doCreateChildren=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};e.forEach(function(e){t.insertChild((0,r.default)({data:e},i))})},e.prototype.collapse=function(){this.expanded=!1},e.prototype.shouldLoadData=function(){return this.store.lazy===!0&&this.store.load&&!this.loaded},e.prototype.updateLeafState=function(){if(this.store.lazy===!0&&this.loaded!==!0&&"undefined"!=typeof this.isLeafByUser)return void(this.isLeaf=this.isLeafByUser);var e=this.childNodes;return!this.store.lazy||this.store.lazy===!0&&this.loaded===!0?void(this.isLeaf=!e||0===e.length):void(this.isLeaf=!1)},e.prototype.setChecked=function(e,t){var i=this;this.indeterminate="half"===e,this.checked=e===!0;var n=function(){if(t)for(var n=i.childNodes,s=0,o=n.length;s<o;s++){var a=n[s];a.setChecked(e!==!1,t)}};!this.store.checkStrictly&&this.shouldLoadData()?this.loadData(function(){n()},{checked:e!==!1}):n();var s=this.parent;s&&0!==s.level&&(this.store.checkStrictly||u(s))},e.prototype.getChildren=function(){var e=this.data;if(!e)return null;var t=this.store.props,i="children";return t&&(i=t.children||"children"),void 0===e[i]&&(e[i]=null),e[i]},e.prototype.updateChildren=function(){var e=this,t=this.getChildren()||[],i=this.childNodes.map(function(e){return e.data}),n={},s=[];t.forEach(function(e,t){e[l.NODE_KEY]?n[e[l.NODE_KEY]]={index:t,data:e}:s.push({index:t,data:e})}),i.forEach(function(t){n[t[l.NODE_KEY]]||e.removeChildByData(t)}),s.forEach(function(t){var i=t.index,n=t.data;e.insertChild({data:n},i)}),this.updateLeafState()},e.prototype.loadData=function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:{};if(this.store.lazy!==!0||!this.store.load||this.loaded||this.loading)e&&e.call(this);else{this.loading=!0;var n=function(n){t.loaded=!0,t.loading=!1,t.childNodes=[],t.doCreateChildren(n,i),t.updateLeafState(),e&&e.call(t,n)};this.store.load(this,n)}},o(e,[{key:"label",get:function(){return c(this,"label")}},{key:"icon",get:function(){return c(this,"icon")}},{key:"key",get:function(){var e=this.store.key;return this.data?this.data[e]:null}}]),e}();t.default=h},function(e,t){"use strict";t.__esModule=!0;var i=t.NODE_KEY="$treeNodeId";t.markNodeData=function(e,t){t[i]||Object.defineProperty(t,i,{value:e.id,enumerable:!1,configurable:!1,writable:!1})},t.getNodeKey=function(e,t){return e?t[e]:t[i]}},function(e,t,i){var n=i(13)(i(824),i(825),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(657),o=n(s),a=i(683),r=n(a),l=i(587),u=n(l);t.default={name:"ElTreeNode",componentName:"ElTreeNode",mixins:[u.default],props:{node:{default:function(){return{}}},props:{},renderContent:Function},components:{ElCheckbox:r.default,CollapseTransition:o.default,NodeContent:{props:{node:{required:!0}},render:function(e){var t=this.$parent,i=this.node,n=i.data,s=i.store;return t.renderContent?t.renderContent.call(t._renderProxy,e,{_self:t.tree.$vnode.context,node:i,data:n,store:s}):e("span",{class:"el-tree-node__label"},[this.node.label])}}},data:function(){return{tree:null,expanded:!1,childNodeRendered:!1,showCheckbox:!1,oldChecked:null,oldIndeterminate:null}},watch:{"node.indeterminate":function(e){this.handleSelectChange(this.node.checked,e)},"node.checked":function(e){this.handleSelectChange(e,this.node.indeterminate)},"node.expanded":function(e){this.expanded=e,e&&(this.childNodeRendered=!0)}},methods:{getNodeKey:function(e,t){var i=this.tree.nodeKey;return i&&e?e.data[i]:t},handleSelectChange:function(e,t){this.oldChecked!==e&&this.oldIndeterminate!==t&&this.tree.$emit("check-change",this.node.data,e,t),this.oldChecked=e,this.indeterminate=t},handleClick:function(){var e=this.tree.store;e.setCurrentNode(this.node),this.tree.$emit("current-change",e.currentNode?e.currentNode.data:null,e.currentNode),this.tree.currentNode=this,this.tree.expandOnClickNode&&this.handleExpandIconClick(),this.tree.$emit("node-click",this.node.data,this.node,this)},handleExpandIconClick:function(){this.node.isLeaf||(this.expanded?(this.tree.$emit("node-collapse",this.node.data,this.node,this),this.node.collapse()):(this.node.expand(),this.$emit("node-expand",this.node.data,this.node,this)))},handleUserClick:function(){this.node.indeterminate&&this.node.setChecked(this.node.checked,!this.tree.checkStrictly)},handleCheckChange:function(e){this.node.indeterminate||this.node.setChecked(e.target.checked,!this.tree.checkStrictly)},handleChildNodeExpand:function(e,t,i){this.broadcast("ElTreeNode","tree-node-expand",t),this.tree.$emit("node-expand",e,t,i)}},created:function(){var e=this,t=this.$parent;t.isTree?this.tree=t:this.tree=t.tree;var i=this.tree;i||console.warn("Can not find node's tree.");var n=i.props||{},s=n.children||"children";this.$watch("node.data."+s,function(){e.node.updateChildren()}),this.showCheckbox=i.showCheckbox,this.node.expanded&&(this.expanded=!0,this.childNodeRendered=!0),this.tree.accordion&&this.$on("tree-node-expand",function(t){e.node!==t&&e.node.collapse()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",value:e.node.visible,expression:"node.visible"}],staticClass:"el-tree-node",class:{"is-expanded":e.childNodeRendered&&e.expanded,"is-current":e.tree.store.currentNode===e.node,"is-hidden":!e.node.visible},on:{click:function(t){t.stopPropagation(),e.handleClick(t)}}},[i("div",{staticClass:"el-tree-node__content",style:{"padding-left":(e.node.level-1)*e.tree.indent+"px"}},[i("span",{staticClass:"el-tree-node__expand-icon",class:{"is-leaf":e.node.isLeaf,expanded:!e.node.isLeaf&&e.expanded},on:{click:function(t){t.stopPropagation(),e.handleExpandIconClick(t)}}}),e.showCheckbox?i("el-checkbox",{directives:[{name:"model",rawName:"v-model",value:e.node.checked,expression:"node.checked"}],attrs:{indeterminate:e.node.indeterminate},domProps:{value:e.node.checked},on:{change:e.handleCheckChange,input:function(t){e.node.checked=t}},nativeOn:{click:function(t){t.stopPropagation(),e.handleUserClick(t)}}}):e._e(),e.node.loading?i("span",{staticClass:"el-tree-node__loading-icon el-icon-loading"}):e._e(),i("node-content",{attrs:{node:e.node}})],1),i("collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.expanded,expression:"expanded"}],staticClass:"el-tree-node__children"},e._l(e.node.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{"render-content":e.renderContent,node:t},on:{"node-expand":e.handleChildNodeExpand}})}))])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-tree",class:{"el-tree--highlight-current":e.highlightCurrent}},[e._l(e.root.childNodes,function(t){return i("el-tree-node",{key:e.getNodeKey(t),attrs:{node:t,props:e.props,"render-content":e.renderContent},on:{"node-expand":e.handleNodeExpand}})}),e.root.childNodes&&0!==e.root.childNodes.length?e._e():i("div",{staticClass:"el-tree__empty-block"},[i("span",{staticClass:"el-tree__empty-text"},[e._v(e._s(e.emptyText))])])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(828),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(829),i(830),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"el-icon-circle-check",warning:"el-icon-warning",error:"el-icon-circle-cross"};t.default={name:"ElAlert",props:{title:{type:String,default:"",required:!0},description:{type:String,default:""},type:{type:String,default:"info"},closable:{type:Boolean,default:!0},closeText:{type:String,default:""},showIcon:{type:Boolean,default:!1}},data:function(){return{visible:!0}},methods:{close:function(){this.visible=!1,this.$emit("close")}},computed:{typeClass:function(){return"el-alert--"+this.type},iconClass:function(){return i[this.type]||"el-icon-information"},isBigIcon:function(){return this.description?"is-big":""},isBoldTitle:function(){return this.description?"is-bold":""}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-alert-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-alert",class:[e.typeClass]},[e.showIcon?i("i",{staticClass:"el-alert__icon",class:[e.iconClass,e.isBigIcon]}):e._e(),i("div",{staticClass:"el-alert__content"},[e.title?i("span",{staticClass:"el-alert__title",class:[e.isBoldTitle]},[e._v(e._s(e.title))]):e._e(),e._t("default",[e.description?i("p",{staticClass:"el-alert__description"},[e._v(e._s(e.description))]):e._e()]),i("i",{directives:[{name:"show",rawName:"v-show",value:e.closable,expression:"closable"}],staticClass:"el-alert__closebtn",class:{"is-customed":""!==e.closeText,"el-icon-close":""===e.closeText},on:{click:function(t){e.close()}}},[e._v(e._s(e.closeText))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(832),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(598),r=i(708),l=o.default.extend(i(833)),u=void 0,c=[],d=1,h=function e(t){if(!o.default.prototype.$isServer){t=t||{};var i=t.onClose,n="notification_"+d++;t.onClose=function(){e.close(n,i)},u=new l({data:t}),(0,r.isVNode)(t.message)&&(u.$slots.default=[t.message],t.message=""),u.id=n,u.vm=u.$mount(),document.body.appendChild(u.vm.$el),u.vm.visible=!0,u.dom=u.vm.$el,u.dom.style.zIndex=a.PopupManager.nextZIndex();for(var s=t.offset||0,h=s,f=0,p=c.length;f<p;f++)h+=c[f].$el.offsetHeight+16;return h+=16,u.top=h,c.push(u),u.vm}};["success","warning","info","error"].forEach(function(e){h[e]=function(t){return("string"==typeof t||(0,r.isVNode)(t))&&(t={message:t}),t.type=e,h(t)}}),h.close=function(e,t){for(var i=void 0,n=void 0,s=0,o=c.length;s<o;s++)if(e===c[s].id){"function"==typeof t&&t(c[s]),i=s,n=c[s].dom.offsetHeight,c.splice(s,1);break}if(o>1)for(s=i;s<o-1;s++)c[s].dom.style.top=parseInt(c[s].dom.style.top,10)-n-16+"px"},t.default=h},function(e,t,i){var n=i(13)(i(834),i(835),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i={success:"circle-check",info:"information",warning:"warning",error:"circle-cross"};t.default={data:function(){return{visible:!1,title:"",message:"",duration:4500,type:"",customClass:"",iconClass:"",onClose:null,onClick:null,closed:!1,top:null,timer:null}},computed:{typeClass:function(){return this.type&&i[this.type]?"el-icon-"+i[this.type]:""}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},click:function(){"function"==typeof this.onClick&&this.onClick()},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose()},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-notification-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-notification",class:e.customClass,
-style:{top:e.top?e.top+"px":"auto"},on:{mouseenter:function(t){e.clearTimer()},mouseleave:function(t){e.startTimer()},click:e.click}},[e.type||e.iconClass?i("i",{staticClass:"el-notification__icon",class:[e.typeClass,e.iconClass]}):e._e(),i("div",{staticClass:"el-notification__group",class:{"is-with-icon":e.typeClass||e.iconClass}},[i("h2",{staticClass:"el-notification__title",domProps:{textContent:e._s(e.title)}}),i("div",{staticClass:"el-notification__content"},[e._t("default",[e._v(e._s(e.message))])],2),i("div",{staticClass:"el-notification__closeBtn el-icon-close",on:{click:function(t){t.stopPropagation(),e.close(t)}}})])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(837),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(838),i(842),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(667),o=n(s),a=i(839),r=n(a),l=i(71),u=i(587),c=n(u);t.default={name:"ElSlider",mixins:[c.default],props:{min:{type:Number,default:0},max:{type:Number,default:100},step:{type:Number,default:1},value:{type:[Number,Array],default:0},showInput:{type:Boolean,default:!1},showInputControls:{type:Boolean,default:!0},showStops:{type:Boolean,default:!1},showTooltip:{type:Boolean,default:!0},formatTooltip:Function,disabled:{type:Boolean,default:!1},range:{type:Boolean,default:!1}},components:{ElInputNumber:o.default,SliderButton:r.default},data:function(){return{firstValue:null,secondValue:null,oldValue:null,dragging:!1}},watch:{value:function(e,t){this.dragging||Array.isArray(e)&&Array.isArray(t)&&e.every(function(e,i){return e===t[i]})||this.setValues()},dragging:function(e){e||this.setValues()},firstValue:function(e){this.range?this.$emit("input",[this.minValue,this.maxValue]):this.$emit("input",e)},secondValue:function(){this.range&&this.$emit("input",[this.minValue,this.maxValue])},min:function(){this.setValues()},max:function(){this.setValues()}},methods:{valueChanged:function(){var e=this;return this.range?![this.minValue,this.maxValue].every(function(t,i){return t===e.oldValue[i]}):this.value!==this.oldValue},setValues:function(){var e=this.value;this.range&&Array.isArray(e)?e[1]<this.min?this.$emit("input",[this.min,this.min]):e[0]>this.max?this.$emit("input",[this.max,this.max]):e[0]<this.min?this.$emit("input",[this.min,e[1]]):e[1]>this.max?this.$emit("input",[e[0],this.max]):(this.firstValue=e[0],this.secondValue=e[1],this.valueChanged()&&(this.$emit("change",[this.minValue,this.maxValue]),this.dispatch("ElFormItem","el.form.change",[this.minValue,this.maxValue]),this.oldValue=e.slice())):this.range||"number"!=typeof e||isNaN(e)||(e<this.min?this.$emit("input",this.min):e>this.max?this.$emit("input",this.max):(this.firstValue=e,this.valueChanged()&&(this.$emit("change",e),this.dispatch("ElFormItem","el.form.change",e),this.oldValue=e)))},setPosition:function(e){var t=this.min+e*(this.max-this.min)/100;if(!this.range)return void this.$refs.button1.setPosition(e);var i=void 0;i=Math.abs(this.minValue-t)<Math.abs(this.maxValue-t)?this.firstValue<this.secondValue?"button1":"button2":this.firstValue>this.secondValue?"button1":"button2",this.$refs[i].setPosition(e)},onSliderClick:function(e){if(!this.disabled&&!this.dragging){var t=this.$refs.slider.getBoundingClientRect().left;this.setPosition((e.clientX-t)/this.$sliderWidth*100)}}},computed:{$sliderWidth:function(){return parseInt((0,l.getStyle)(this.$refs.slider,"width"),10)},stops:function(){for(var e=this,t=(this.max-this.min)/this.step,i=100*this.step/(this.max-this.min),n=[],s=1;s<t;s++)n.push(s*i);return this.range?n.filter(function(t){return t<100*(e.minValue-e.min)/(e.max-e.min)||t>100*(e.maxValue-e.min)/(e.max-e.min)}):n.filter(function(t){return t>100*(e.firstValue-e.min)/(e.max-e.min)})},minValue:function(){return Math.min(this.firstValue,this.secondValue)},maxValue:function(){return Math.max(this.firstValue,this.secondValue)},barWidth:function(){return this.range?100*(this.maxValue-this.minValue)/(this.max-this.min)+"%":100*(this.firstValue-this.min)/(this.max-this.min)+"%"},barLeft:function(){return this.range?100*(this.minValue-this.min)/(this.max-this.min)+"%":"0%"},precision:function(){var e=[this.min,this.max,this.step].map(function(e){var t=(""+e).split(".")[1];return t?t.length:0});return Math.max.apply(null,e)}},mounted:function(){this.range?(Array.isArray(this.value)?(this.firstValue=Math.max(this.min,this.value[0]),this.secondValue=Math.min(this.max,this.value[1])):(this.firstValue=this.min,this.secondValue=this.max),this.oldValue=[this.firstValue,this.secondValue]):("number"!=typeof this.value||isNaN(this.value)?this.firstValue=this.min:this.firstValue=Math.min(this.max,Math.max(this.min,this.value)),this.oldValue=this.firstValue)}}},function(e,t,i){var n=i(13)(i(840),i(841),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(706),o=n(s);t.default={name:"ElSliderButton",components:{ElTooltip:o.default},props:{value:{type:Number,default:0}},data:function(){return{hovering:!1,dragging:!1,startX:0,currentX:0,startPosition:0,newPosition:null,oldValue:this.value}},computed:{disabled:function(){return this.$parent.disabled},max:function(){return this.$parent.max},min:function(){return this.$parent.min},step:function(){return this.$parent.step},showTooltip:function(){return this.$parent.showTooltip},precision:function(){return this.$parent.precision},currentPosition:function(){return(this.value-this.min)/(this.max-this.min)*100+"%"},enableFormat:function(){return this.$parent.formatTooltip instanceof Function},formatValue:function(){return this.enableFormat&&this.$parent.formatTooltip(this.value)||this.value}},watch:{dragging:function(e){this.$parent.dragging=e}},methods:{displayTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!0)},hideTooltip:function(){this.$refs.tooltip&&(this.$refs.tooltip.showPopper=!1)},handleMouseEnter:function(){this.hovering=!0,this.displayTooltip()},handleMouseLeave:function(){this.hovering=!1,this.hideTooltip()},onButtonDown:function(e){this.disabled||(e.preventDefault(),this.onDragStart(e),window.addEventListener("mousemove",this.onDragging),window.addEventListener("mouseup",this.onDragEnd),window.addEventListener("contextmenu",this.onDragEnd))},onDragStart:function(e){this.dragging=!0,this.startX=e.clientX,this.startPosition=parseFloat(this.currentPosition)},onDragging:function(e){if(this.dragging){this.displayTooltip(),this.currentX=e.clientX;var t=(this.currentX-this.startX)/this.$parent.$sliderWidth*100;this.newPosition=this.startPosition+t,this.setPosition(this.newPosition)}},onDragEnd:function(){var e=this;this.dragging&&(setTimeout(function(){e.dragging=!1,e.hideTooltip(),e.setPosition(e.newPosition)},0),window.removeEventListener("mousemove",this.onDragging),window.removeEventListener("mouseup",this.onDragEnd),window.removeEventListener("contextmenu",this.onDragEnd))},setPosition:function(e){e<0?e=0:e>100&&(e=100);var t=100/((this.max-this.min)/this.step),i=Math.round(e/t),n=i*t*(this.max-this.min)*.01+this.min;n=parseFloat(n.toFixed(this.precision)),this.$emit("input",n),this.$refs.tooltip&&this.$refs.tooltip.updatePopper(),this.dragging||this.value===this.oldValue||(this.oldValue=this.value)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{ref:"button",staticClass:"el-slider__button-wrapper",class:{hover:e.hovering,dragging:e.dragging},style:{left:e.currentPosition},on:{mouseenter:e.handleMouseEnter,mouseleave:e.handleMouseLeave,mousedown:e.onButtonDown}},[i("el-tooltip",{ref:"tooltip",attrs:{placement:"top",disabled:!e.showTooltip}},[i("span",{slot:"content"},[e._v(e._s(e.formatValue))]),i("div",{staticClass:"el-slider__button",class:{hover:e.hovering,dragging:e.dragging}})])],1)},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-slider"},[e.showInput&&!e.range?i("el-input-number",{directives:[{name:"model",rawName:"v-model",value:e.firstValue,expression:"firstValue"}],ref:"input",staticClass:"el-slider__input",attrs:{step:e.step,disabled:e.disabled,controls:e.showInputControls,min:e.min,max:e.max,size:"small"},domProps:{value:e.firstValue},on:{input:function(t){e.firstValue=t}}}):e._e(),i("div",{ref:"slider",staticClass:"el-slider__runway",class:{"show-input":e.showInput,disabled:e.disabled},on:{click:e.onSliderClick}},[i("div",{staticClass:"el-slider__bar",style:{width:e.barWidth,left:e.barLeft}}),i("slider-button",{directives:[{name:"model",rawName:"v-model",value:e.firstValue,expression:"firstValue"}],ref:"button1",domProps:{value:e.firstValue},on:{input:function(t){e.firstValue=t}}}),e.range?i("slider-button",{directives:[{name:"model",rawName:"v-model",value:e.secondValue,expression:"secondValue"}],ref:"button2",domProps:{value:e.secondValue},on:{input:function(t){e.secondValue=t}}}):e._e(),e._l(e.stops,function(t){return e.showStops?i("div",{staticClass:"el-slider__stop",style:{left:t+"%"}}):e._e()})],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(844),o=n(s),a=i(848),r=n(a);t.default={install:function(e){e.use(o.default),e.prototype.$loading=r.default},directive:o.default,service:r.default}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}var s=i(2),o=n(s),a=i(71),r=o.default.extend(i(845));t.install=function(e){if(!e.prototype.$isServer){var t=function(t,n){n.value?e.nextTick(function(){n.modifiers.fullscreen?(t.originalPosition=document.body.style.position,t.originalOverflow=document.body.style.overflow,(0,a.addClass)(t.mask,"is-fullscreen"),i(document.body,t,n)):((0,a.removeClass)(t.mask,"is-fullscreen"),n.modifiers.body?(t.originalPosition=document.body.style.position,["top","left"].forEach(function(e){var i="top"===e?"scrollTop":"scrollLeft";t.maskStyle[e]=t.getBoundingClientRect()[e]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(e){t.maskStyle[e]=t.getBoundingClientRect()[e]+"px"}),i(document.body,t,n)):(t.originalPosition=t.style.position,i(t,t,n)))}):t.domVisible&&(t.instance.$on("after-leave",function(e){t.domVisible=!1,n.modifiers.fullscreen&&"hidden"!==t.originalOverflow&&(document.body.style.overflow=t.originalOverflow),n.modifiers.fullscreen||n.modifiers.body?document.body.style.position=t.originalPosition:t.style.position=t.originalPosition}),t.instance.visible=!1)},i=function(t,i,n){i.domVisible||(Object.keys(i.maskStyle).forEach(function(e){i.mask.style[e]=i.maskStyle[e]}),"absolute"!==i.originalPosition&&(t.style.position="relative"),n.modifiers.fullscreen&&n.modifiers.lock&&(t.style.overflow="hidden"),i.domVisible=!0,t.appendChild(i.mask),e.nextTick(function(){i.instance.visible=!0}),i.domInserted=!0)};e.directive("loading",{bind:function(e,i){var n=new r({el:document.createElement("div"),data:{text:e.getAttribute("element-loading-text"),fullscreen:!!i.modifiers.fullscreen}});e.instance=n,e.mask=n.$el,e.maskStyle={},t(e,i)},update:function(e,i){e.instance.setText(e.getAttribute("element-loading-text")),i.oldValue!==i.value&&t(e,i)},unbind:function(e,t){e.domInserted&&(t.modifiers.fullscreen||t.modifiers.body?document.body.removeChild(e.mask):e.mask&&e.mask.parentNode&&e.mask.parentNode.removeChild(e.mask))}})}}},function(e,t,i){var n=i(13)(i(846),i(847),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={data:function(){return{text:null,fullscreen:!0,visible:!1,customClass:""}},methods:{handleAfterLeave:function(){this.$emit("after-leave")},setText:function(e){this.text=e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-loading-fade"},on:{"after-leave":e.handleAfterLeave}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-loading-mask",class:[e.customClass,{"is-fullscreen":e.fullscreen}]},[i("div",{staticClass:"el-loading-spinner"},[i("svg",{staticClass:"circular",attrs:{viewBox:"25 25 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"50",cy:"50",r:"20",fill:"none"}})]),e.text?i("p",{staticClass:"el-loading-text"},[e._v(e._s(e.text))]):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(845),r=n(a),l=i(593),u=n(l),c=o.default.extend(r.default),d={text:null,fullscreen:!0,body:!1,lock:!1,customClass:""},h=void 0;c.prototype.originalPosition="",c.prototype.originalOverflow="",c.prototype.close=function(){var e=this;this.fullscreen&&"hidden"!==this.originalOverflow&&(document.body.style.overflow=this.originalOverflow),this.fullscreen||this.body?document.body.style.position=this.originalPosition:this.target.style.position=this.originalPosition,this.fullscreen&&(h=void 0),this.$on("after-leave",function(t){e.$el&&e.$el.parentNode&&e.$el.parentNode.removeChild(e.$el),e.$destroy()}),this.visible=!1};var f=function(e,t,i){var n={};e.fullscreen?(i.originalPosition=document.body.style.position,i.originalOverflow=document.body.style.overflow):e.body?(i.originalPosition=document.body.style.position,["top","left"].forEach(function(t){var i="top"===t?"scrollTop":"scrollLeft";n[t]=e.target.getBoundingClientRect()[t]+document.body[i]+document.documentElement[i]+"px"}),["height","width"].forEach(function(t){n[t]=e.target.getBoundingClientRect()[t]+"px"})):i.originalPosition=t.style.position,Object.keys(n).forEach(function(e){i.$el.style[e]=n[e]})},p=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(!o.default.prototype.$isServer){if(e=(0,u.default)({},d,e),"string"==typeof e.target&&(e.target=document.querySelector(e.target)),e.target=e.target||document.body,e.target!==document.body?e.fullscreen=!1:e.body=!0,e.fullscreen&&h)return h;var t=e.body?document.body:e.target,i=new c({el:document.createElement("div"),data:e});return f(e,t,i),"absolute"!==i.originalPosition&&(t.style.position="relative"),e.fullscreen&&e.lock&&(t.style.overflow="hidden"),t.appendChild(i.$el),o.default.nextTick(function(){i.visible=!0}),e.fullscreen&&(h=i),i}};t.default=p},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(850),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(851),i(852),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElIcon",props:{name:String}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("i",{class:"el-icon-"+e.name})},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(854),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(855),i(856),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElRow",props:{gutter:Number,type:String,justify:{type:String,default:"start"},align:{type:String,default:"top"}},computed:{style:function(){var e={};return this.gutter&&(e.marginLeft="-"+this.gutter/2+"px",e.marginRight=e.marginLeft),e}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-row",class:["start"!==e.justify?"is-justify-"+e.justify:"","top"!==e.align?"is-align-"+e.align:"",{"el-row--flex":"flex"===e.type}],style:e.style},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(858),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t){"use strict";t.__esModule=!0;var i="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e};t.default={name:"ElCol",props:{span:{type:Number,default:24},offset:Number,pull:Number,push:Number,xs:[Number,Object],sm:[Number,Object],md:[Number,Object],lg:[Number,Object]},computed:{gutter:function(){return this.$parent.gutter},style:function(){var e={};return this.gutter&&(e.paddingLeft=this.gutter/2+"px",e.paddingRight=e.paddingLeft),e}},render:function(e){var t=this,n=this.style,s=[];return["span","offset","pull","push"].forEach(function(e){t[e]&&s.push("span"!==e?"el-col-"+e+"-"+t[e]:"el-col-"+t[e])}),["xs","sm","md","lg"].forEach(function(e){"number"==typeof t[e]?s.push("el-col-"+e+"-"+t[e]):"object"===i(t[e])&&!function(){var i=t[e];Object.keys(i).forEach(function(t){s.push("span"!==t?"el-col-"+e+"-"+t+"-"+i[t]:"el-col-"+e+"-"+i[t])})}()}),e("div",{class:["el-col",s],style:n},[this.$slots.default])}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(860),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(861),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function s(){}t.__esModule=!0;var o=i(862),a=n(o),r=i(869),l=n(r),u=i(875),c=n(u),d=i(864),h=n(d),f=i(877),p=n(f);t.default={name:"ElUpload",mixins:[p.default],components:{ElProgress:h.default,UploadList:a.default,Upload:l.default,IframeUpload:c.default},props:{action:{type:String,required:!0},headers:{type:Object,default:function(){return{}}},data:Object,multiple:Boolean,name:{type:String,default:"file"},drag:Boolean,dragger:Boolean,withCredentials:Boolean,showFileList:{type:Boolean,default:!0},accept:String,type:{type:String,default:"select"},beforeUpload:Function,onRemove:{type:Function,default:s},onChange:{type:Function,default:s},onPreview:{type:Function},onSuccess:{type:Function,default:s},onProgress:{type:Function,default:s},onError:{type:Function,default:s},fileList:{type:Array,default:function(){return[]}},autoUpload:{type:Boolean,default:!0},listType:{type:String,default:"text"},httpRequest:Function},data:function(){return{uploadFiles:[],dragOver:!1,draging:!1,tempIndex:1}},watch:{fileList:{immediate:!0,handler:function(e){var t=this;this.uploadFiles=e.map(function(e){return e.uid=e.uid||Date.now()+t.tempIndex++,e.status="success",e})}}},methods:{handleStart:function(e){e.uid=Date.now()+this.tempIndex++;var t={status:"ready",name:e.name,size:e.size,percentage:0,uid:e.uid,raw:e};try{t.url=URL.createObjectURL(e)}catch(e){return void console.error(e)}this.uploadFiles.push(t)},handleProgress:function(e,t){var i=this.getFile(t);this.onProgress(e,i,this.uploadFiles),i.status="uploading",i.percentage=e.percent||0},handleSuccess:function(e,t){var i=this.getFile(t);i&&(i.status="success",i.response=e,this.onSuccess(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles))},handleError:function(e,t){var i=this.getFile(t),n=this.uploadFiles;i.status="fail",n.splice(n.indexOf(i),1),this.onError(e,i,this.uploadFiles),this.onChange(i,this.uploadFiles)},handleRemove:function(e,t){t&&(e=this.getFile(t));var i=this.uploadFiles;i.splice(i.indexOf(e),1),this.onRemove(e,i)},getFile:function(e){var t,i=this.uploadFiles;return i.every(function(i){return t=e.uid===i.uid?i:null,!t}),t},clearFiles:function(){this.uploadFiles=[]},submit:function(){var e=this;this.uploadFiles.filter(function(e){return"ready"===e.status}).forEach(function(t){e.$refs["upload-inner"].upload(t.raw)})},getMigratingConfig:function(){return{props:{"default-file-list":"default-file-list is renamed to file-list.","show-upload-list":"show-upload-list is renamed to show-file-list.","thumbnail-mode":"thumbnail-mode has been deprecated, you can implement the same effect according to this case: http://element.eleme.io/#/zh-CN/component/upload#yong-hu-tou-xiang-shang-chuan"}}}},render:function(e){var t;this.showFileList&&(t=e(a.default,{attrs:{listType:this.listType,files:this.uploadFiles,handlePreview:this.onPreview},on:{remove:this.handleRemove}},[]));var i={props:{type:this.type,drag:this.drag,action:this.action,multiple:this.multiple,"before-upload":this.beforeUpload,"with-credentials":this.withCredentials,headers:this.headers,name:this.name,data:this.data,accept:this.accept,fileList:this.uploadFiles,autoUpload:this.autoUpload,listType:this.listType,"on-start":this.handleStart,"on-progress":this.handleProgress,"on-success":this.handleSuccess,"on-error":this.handleError,"on-preview":this.onPreview,"on-remove":this.handleRemove,"http-request":this.httpRequest},ref:"upload-inner"},n=this.$slots.trigger||this.$slots.default,s="undefined"!=typeof FormData||this.$isServer?e("upload",i,[n]):e("iframeUpload",i,[n]);return e("div",null,["picture-card"===this.listType?t:"",this.$slots.trigger?[s,this.$slots.default]:s,this.$slots.tip,"picture-card"!==this.listType?t:""])}}},function(e,t,i){var n=i(13)(i(863),i(868),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(588),o=n(s),a=i(864),r=n(a);t.default={mixins:[o.default],components:{ElProgress:r.default},props:{files:{type:Array,default:function(){return[]}},handlePreview:Function,listType:String},methods:{parsePercentage:function(e){return parseInt(e,10)},handleClick:function(e){this.handlePreview&&this.handlePreview(e)}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(865),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(866),i(867),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElProgress",props:{type:{type:String,default:"line",validator:function(e){return["line","circle"].indexOf(e)>-1}},percentage:{type:Number,default:0,required:!0,validator:function(e){return e>=0&&e<=100}},status:{type:String},strokeWidth:{type:Number,default:6},textInside:{type:Boolean,default:!1},width:{type:Number,default:126},showText:{type:Boolean,default:!0}},computed:{barStyle:function(){var e={};return e.width=this.percentage+"%",e},relativeStrokeWidth:function(){return(this.strokeWidth/this.width*100).toFixed(1)},trackPath:function(){var e=parseInt(50-parseFloat(this.relativeStrokeWidth)/2,10);return"M 50 50 m 0 -"+e+" a "+e+" "+e+" 0 1 1 0 "+2*e+" a "+e+" "+e+" 0 1 1 0 -"+2*e},perimeter:function(){var e=50-parseFloat(this.relativeStrokeWidth)/2;return 2*Math.PI*e},circlePathStyle:function(){var e=this.perimeter;return{strokeDasharray:e+"px,"+e+"px",strokeDashoffset:(1-this.percentage/100)*e+"px",transition:"stroke-dashoffset 0.6s ease 0s, stroke 0.6s ease"}},stroke:function(){var e;switch(this.status){case"success":e="#13ce66";break;case"exception":e="#ff4949";break;default:e="#20a0ff"}return e},iconClass:function(){return"line"===this.type?"success"===this.status?"el-icon-circle-check":"el-icon-circle-cross":"success"===this.status?"el-icon-check":"el-icon-close"},progressTextSize:function(){return"line"===this.type?12+.4*this.strokeWidth:.111111*this.width+2}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-progress",class:["el-progress--"+e.type,e.status?"is-"+e.status:"",{"el-progress--without-text":!e.showText,"el-progress--text-inside":e.textInside}]},["line"===e.type?i("div",{staticClass:"el-progress-bar"},[i("div",{staticClass:"el-progress-bar__outer",style:{height:e.strokeWidth+"px"}},[i("div",{staticClass:"el-progress-bar__inner",style:e.barStyle},[e.showText&&e.textInside?i("div",{staticClass:"el-progress-bar__innerText"},[e._v(e._s(e.percentage)+"%")]):e._e()])])]):i("div",{staticClass:"el-progress-circle",style:{height:e.width+"px",width:e.width+"px"}},[i("svg",{attrs:{viewBox:"0 0 100 100"}},[i("path",{staticClass:"el-progress-circle__track",attrs:{d:e.trackPath,stroke:"#e5e9f2","stroke-width":e.relativeStrokeWidth,fill:"none"}}),i("path",{staticClass:"el-progress-circle__path",style:e.circlePathStyle,attrs:{d:e.trackPath,"stroke-linecap":"round",stroke:e.stroke,"stroke-width":e.relativeStrokeWidth,fill:"none"}})])]),e.showText&&!e.textInside?i("div",{staticClass:"el-progress__text",style:{fontSize:e.progressTextSize+"px"}},[e.status?i("i",{class:e.iconClass}):[e._v(e._s(e.percentage)+"%")]],2):e._e()])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition-group",{class:["el-upload-list","el-upload-list--"+e.listType],attrs:{tag:"ul",name:"list"}},e._l(e.files,function(t){return i("li",{key:t,class:["el-upload-list__item","is-"+t.status]},[["picture-card","picture"].indexOf(e.listType)>-1&&"success"===t.status?i("img",{staticClass:"el-upload-list__item-thumbnail",attrs:{src:t.url,alt:""}}):e._e(),i("a",{staticClass:"el-upload-list__item-name",on:{click:function(i){e.handleClick(t)}}},[i("i",{staticClass:"el-icon-document"}),e._v(e._s(t.name)+"\n    ")]),i("label",{staticClass:"el-upload-list__item-status-label"},["success"===t.status?i("i",{class:{"el-icon-circle-check":"text"===e.listType,"el-icon-check":["picture-card","picture"].indexOf(e.listType)>-1}}):e._e(),i("i",{staticClass:"el-icon-close",on:{click:function(i){e.$emit("remove",t)}}})]),"picture-card"===e.listType&&"success"===t.status?i("span",{staticClass:"el-upload-list__item-actions"},[e.handlePreview&&"picture-card"===e.listType?i("span",{staticClass:"el-upload-list__item-preview",on:{click:function(i){e.handlePreview(t)}}},[i("i",{staticClass:"el-icon-view"})]):e._e(),i("span",{staticClass:"el-upload-list__item-delete",on:{click:function(i){e.$emit("remove",t)}}},[i("i",{staticClass:"el-icon-delete2"})])]):e._e(),"uploading"===t.status?i("el-progress",{attrs:{type:"picture-card"===e.listType?"circle":"line","stroke-width":"picture-card"===e.listType?6:2,percentage:e.parsePercentage(t.percentage)}}):e._e()],1)}))},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(870),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(871),o=n(s),a=i(872),r=n(a);t.default={components:{UploadDragger:r.default},props:{type:String,action:{type:String,required:!0},name:{type:String,default:"file"},data:Object,headers:Object,withCredentials:Boolean,multiple:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,drag:Boolean,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},fileList:Array,autoUpload:Boolean,listType:String,httpRequest:{type:Function,default:o.default}},data:function(){return{mouseover:!1}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleChange:function(e){var t=e.target.files;t&&this.uploadFiles(t)},uploadFiles:function(e){var t=this,i=Array.prototype.slice.call(e);this.multiple||(i=i.slice(0,1)),0!==i.length&&i.forEach(function(e){t.onStart(e),t.autoUpload&&t.upload(e)})},upload:function(e,t){var i=this;if(!this.beforeUpload)return this.post(e);var n=this.beforeUpload(e);n&&n.then?n.then(function(t){"[object File]"===Object.prototype.toString.call(t)?i.post(t):i.post(e)},function(){i.onRemove(e,!0)}):n!==!1?this.post(e):this.onRemove(e,!0)},post:function(e){var t=this,i={headers:this.headers,withCredentials:this.withCredentials,file:e,data:this.data,filename:this.name,action:this.action,onProgress:function(i){t.onProgress(i,e)},onSuccess:function(i){t.onSuccess(i,e)},onError:function(i){t.onError(i,e)}},n=this.httpRequest(i);n&&n.then&&n.then(i.onSuccess,i.onError)},handleClick:function(){this.$refs.input.click()}},render:function(e){var t=this.handleClick,i=this.drag,n=this.name,s=this.handleChange,o=this.multiple,a=this.accept,r=this.listType,l=this.uploadFiles,u={class:{"el-upload":!0},on:{click:t}};return u.class["el-upload--"+r]=!0,e("div",u,[i?e("upload-dragger",{on:{file:l}},[this.$slots.default]):this.$slots.default,e("input",{class:"el-upload__input",attrs:{type:"file",name:n,multiple:o,accept:a},ref:"input",on:{change:s}},[])])}}},function(e,t){"use strict";function i(e,t,i){var n=void 0;n=i.response?i.status+" "+(i.response.error||i.response):i.responseText?i.status+" "+i.responseText:"fail to post "+e+" "+i.status+"'";var s=new Error(n);return s.status=i.status,s.method="post",s.url=e,s}function n(e){var t=e.responseText||e.response;if(!t)return t;try{return JSON.parse(t)}catch(e){return t}}function s(e){if("undefined"!=typeof XMLHttpRequest){var t=new XMLHttpRequest,s=e.action;t.upload&&(t.upload.onprogress=function(t){t.total>0&&(t.percent=t.loaded/t.total*100),e.onProgress(t)});var o=new FormData;e.data&&Object.keys(e.data).map(function(t){o.append(t,e.data[t])}),o.append(e.filename,e.file),t.onerror=function(t){e.onError(t)},t.onload=function(){return t.status<200||t.status>=300?e.onError(i(s,e,t)):void e.onSuccess(n(t))},t.open("post",s,!0),e.withCredentials&&"withCredentials"in t&&(t.withCredentials=!0);var a=e.headers||{};for(var r in a)a.hasOwnProperty(r)&&null!==a[r]&&t.setRequestHeader(r,a[r]);return t.send(o),t}}t.__esModule=!0,t.default=s},function(e,t,i){var n=i(13)(i(873),i(874),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElUploadDrag",data:function(){return{dragover:!1}},methods:{onDrop:function(e){this.dragover=!1,this.$emit("file",e.dataTransfer.files)}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-upload-dragger",class:{"is-dragover":e.dragover},on:{drop:function(t){t.preventDefault(),e.onDrop(t)},dragover:function(t){t.preventDefault(),e.dragover=!0},dragleave:function(t){t.preventDefault(),e.dragover=!1}}},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(876),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(872),o=n(s);t.default={components:{UploadDragger:o.default},props:{type:String,data:{},action:{type:String,required:!0},name:{type:String,default:"file"},withCredentials:Boolean,accept:String,onStart:Function,onProgress:Function,onSuccess:Function,onError:Function,beforeUpload:Function,onPreview:{type:Function,default:function(){}},onRemove:{type:Function,default:function(){}},drag:Boolean,listType:String},data:function(){return{mouseover:!1,domain:"",file:null,disabled:!1}},methods:{isImage:function(e){return e.indexOf("image")!==-1},handleClick:function(){this.$refs.input.click()},handleChange:function(e){var t=e.target.value;t&&this.uploadFiles(t)},uploadFiles:function(e){if(!this.disabled){this.disabled=!0,this.file=e,this.onStart(e);var t=this.getFormNode(),i=this.getFormDataNode(),n=this.data;"function"==typeof n&&(n=n(e));var s=[];for(var o in n)n.hasOwnProperty(o)&&s.push('<input name="'+o+'" value="'+n[o]+'"/>');i.innerHTML=s.join(""),t.submit(),i.innerHTML=""}},getFormNode:function(){return this.$refs.form},getFormDataNode:function(){return this.$refs.data}},created:function(){this.frameName="frame-"+Date.now()},mounted:function(){var e=this;!this.$isServer&&window.addEventListener("message",function(t){if(e.file){var i=new URL(e.action).origin;if(t.origin===i){var n=t.data;"success"===n.result?e.onSuccess(n,e.file):"failed"===n.result&&e.onError(n,e.file),e.disabled=!1,e.file=null}}},!1)},render:function(e){var t=this.drag,i=this.uploadFiles,n=this.listType,s=this.frameName,o={"el-upload":!0};return o["el-upload--"+n]=!0,e("div",{class:o,on:{click:this.handleClick},nativeOn:{drop:this.onDrop,dragover:this.handleDragover,dragleave:this.handleDragleave
-}},[e("iframe",{on:{load:this.onload},ref:"iframe",attrs:{name:s}},[]),e("form",{ref:"form",attrs:{action:this.action,target:s,enctype:"multipart/form-data",method:"POST"}},[e("input",{class:"el-upload__input",attrs:{type:"file",name:"file",accept:this.accept},ref:"input",on:{change:this.handleChange}},[]),e("input",{attrs:{type:"hidden",name:"documentDomain",value:this.$isServer?"":document.domain}},[]),e("span",{ref:"data"},[])]),t?e("upload-dragger",{on:{file:i}},[this.$slots.default]):this.$slots.default])}}},function(e,t,i){"use strict";t.__esModule=!0,t.default={mounted:function(){return},methods:{getMigratingConfig:function(){return{props:{},events:{}}}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(879),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(880),i(881),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSpinner",props:{type:String,radius:{type:Number,default:100},strokeWidth:{type:Number,default:5},strokeColor:{type:String,default:"#efefef"}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{staticClass:"el-spinner"},[i("svg",{staticClass:"el-spinner-inner",style:{width:e.radius/2+"px",height:e.radius/2+"px"},attrs:{viewBox:"0 0 50 50"}},[i("circle",{staticClass:"path",attrs:{cx:"25",cy:"25",r:"20",fill:"none",stroke:e.strokeColor,"stroke-width":e.strokeWidth}})])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(883),o=n(s);t.default=o.default},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(598),r=o.default.extend(i(884)),l=void 0,u=[],c=1,d=function e(t){if(!o.default.prototype.$isServer){t=t||{},"string"==typeof t&&(t={message:t});var i=t.onClose,n="message_"+c++;return t.onClose=function(){e.close(n,i)},l=new r({data:t}),l.id=n,l.vm=l.$mount(),document.body.appendChild(l.vm.$el),l.vm.visible=!0,l.dom=l.vm.$el,l.dom.style.zIndex=a.PopupManager.nextZIndex(),u.push(l),l.vm}};["success","warning","info","error"].forEach(function(e){d[e]=function(t){return"string"==typeof t&&(t={message:t}),t.type=e,d(t)}}),d.close=function(e,t){for(var i=0,n=u.length;i<n;i++)if(e===u[i].id){"function"==typeof t&&t(u[i]),u.splice(i,1);break}},d.closeAll=function(){for(var e=u.length-1;e>=0;e--)u[e].close()},t.default=d},function(e,t,i){var n=i(13)(i(885),i(891),null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0,t.default={data:function(){return{visible:!1,message:"",duration:3e3,type:"info",iconClass:"",customClass:"",onClose:null,showClose:!1,closed:!1,timer:null}},computed:{typeImg:function(){return i(886)("./"+this.type+".svg")}},watch:{closed:function(e){e&&(this.visible=!1,this.$el.addEventListener("transitionend",this.destroyElement))}},methods:{destroyElement:function(){this.$el.removeEventListener("transitionend",this.destroyElement),this.$destroy(!0),this.$el.parentNode.removeChild(this.$el)},close:function(){this.closed=!0,"function"==typeof this.onClose&&this.onClose(this)},clearTimer:function(){clearTimeout(this.timer)},startTimer:function(){var e=this;this.duration>0&&(this.timer=setTimeout(function(){e.closed||e.close()},this.duration))}},mounted:function(){this.startTimer()}}},function(e,t,i){function n(e){return i(s(e))}function s(e){return o[e]||function(){throw new Error("Cannot find module '"+e+"'.")}()}var o={"./error.svg":887,"./info.svg":888,"./success.svg":889,"./warning.svg":890};n.keys=function(){return Object.keys(o)},n.resolve=s,e.exports=n,n.id=886},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9kYW5nZXI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZGVmcz48L2RlZnM+CiAgICA8ZyBpZD0iRWxlbWVudC1ndWlkZWxpbmUtdjAuMi40IiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8ZyBpZD0iTWVzc2FnZSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYwLjAwMDAwMCwgLTMzMi4wMDAwMDApIj4KICAgICAgICAgICAgPGcgaWQ9IuW4puWAvuWQkV/kv6Hmga8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMzMyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl9kYW5nZXIiPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLTIiIGZpbGw9IiNGRjQ5NDkiIHg9IjAiIHk9IjAiIHdpZHRoPSI0MCIgaGVpZ2h0PSI0MCI+PC9yZWN0PgogICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMjUuODE3MjYyNywxNi4zNDUxNzk2IEMyNS45MzkwOTAyLDE2LjIyMzM0ODMgMjYsMTYuMDc2MTQxOCAyNiwxNS45MDM1NTIzIEMyNiwxNS43MzA5NjI4IDI1LjkzOTA5MDIsMTUuNTgzNzU2MyAyNS44MTcyNjI3LDE1LjQ2MTkyODkgTDI0LjUwNzYxNTcsMTQuMTgyNzQxMSBDMjQuMzg1Nzg4MiwxNC4wNjA5MTM3IDI0LjI0MzY1NzUsMTQgMjQuMDgxMjE5NiwxNCBDMjMuOTE4NzgxNywxNCAyMy43NzY2NTEsMTQuMDYwOTEzNyAyMy42NTQ4MjM1LDE0LjE4Mjc0MTEgTDIwLDE3LjgzNzU2MzUgTDE2LjMxNDcyMTYsMTQuMTgyNzQxMSBDMTYuMTkyODkwMiwxNC4wNjA5MTM3IDE2LjA1MDc1OTUsMTQgMTUuODg4MzIxNiwxNCBDMTUuNzI1ODg3NiwxNCAxNS41ODM3NTY5LDE0LjA2MDkxMzcgMTUuNDYxOTI5NCwxNC4xODI3NDExIEwxNC4xNTIyODI0LDE1LjQ2MTkyODkgQzE0LjA1MDc1ODIsMTUuNTgzNzU2MyAxNCwxNS43MzA5NjI4IDE0LDE1LjkwMzU1MjMgQzE0LDE2LjA3NjE0MTggMTQuMDUwNzU4MiwxNi4yMjMzNDgzIDE0LjE1MjI4MjQsMTYuMzQ1MTc5NiBMMTcuODM3NTYwOCwyMC4wMDAwMDE5IEwxNC4xNTIyODI0LDIzLjY1NDgyNDMgQzE0LjA1MDc1ODIsMjMuNzc2NjUxNyAxNCwyMy45MjM4NTgyIDE0LDI0LjA5NjQ0NzcgQzE0LDI0LjI2OTAzNzIgMTQuMDUwNzU4MiwyNC40MTYyNDM3IDE0LjE1MjI4MjQsMjQuNTM4MDcxMSBMMTUuNDYxOTI5NCwyNS44MTcyNTg5IEMxNS41ODM3NTY5LDI1LjkzOTA4NjMgMTUuNzI1ODg3NiwyNiAxNS44ODgzMjE2LDI2IEMxNi4wNTA3NTk1LDI2IDE2LjE5Mjg5MDIsMjUuOTM5MDg2MyAxNi4zMTQ3MjE2LDI1LjgxNzI1ODkgTDIwLDIyLjE2MjQzNjUgTDIzLjY1NDgyMzUsMjUuODE3MjU4OSBDMjMuNzc2NjUxLDI1LjkzOTA4NjMgMjMuOTE4NzgxNywyNiAyNC4wODEyMTk2LDI2IEMyNC4yNDM2NTc1LDI2IDI0LjM4NTc4ODIsMjUuOTM5MDg2MyAyNC41MDc2MTU3LDI1LjgxNzI1ODkgTDI1LjgxNzI2MjcsMjQuNTM4MDcxMSBDMjUuOTM5MDkwMiwyNC40MTYyNDM3IDI2LDI0LjI2OTAzNzIgMjYsMjQuMDk2NDQ3NyBDMjYsMjMuOTIzODU4MiAyNS45MzkwOTAyLDIzLjc3NjY1MTcgMjUuODE3MjYyNywyMy42NTQ4MjQzIEwyMi4xMzE5ODA0LDIwLjAwMDAwMTkgTDI1LjgxNzI2MjcsMTYuMzQ1MTc5NiBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9pbmZvPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0xNTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDE1Mi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25faW5mbyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzUwQkZGRiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMS42MTUzODQ2LDI2LjU0MzIwOTkgQzIxLjYxNTM4NDYsMjYuOTQ3ODc1MSAyMS40NTgzMzQ4LDI3LjI5MTgzNjggMjEuMTQ0MjMwOCwyNy41NzUxMDI5IEMyMC44MzAxMjY4LDI3Ljg1ODM2ODkgMjAuNDQ4NzE5NCwyOCAyMCwyOCBDMTkuNTUxMjgwNiwyOCAxOS4xNjk4NzMyLDI3Ljg1ODM2ODkgMTguODU1NzY5MiwyNy41NzUxMDI5IEMxOC41NDE2NjUyLDI3LjI5MTgzNjggMTguMzg0NjE1NCwyNi45NDc4NzUxIDE4LjM4NDYxNTQsMjYuNTQzMjA5OSBMMTguMzg0NjE1NCwxOS43NDQ4NTYgQzE4LjM4NDYxNTQsMTkuMzQwMTkwNyAxOC41NDE2NjUyLDE4Ljk5NjIyOSAxOC44NTU3NjkyLDE4LjcxMjk2MyBDMTkuMTY5ODczMiwxOC40Mjk2OTY5IDE5LjU1MTI4MDYsMTguMjg4MDY1OCAyMCwxOC4yODgwNjU4IEMyMC40NDg3MTk0LDE4LjI4ODA2NTggMjAuODMwMTI2OCwxOC40Mjk2OTY5IDIxLjE0NDIzMDgsMTguNzEyOTYzIEMyMS40NTgzMzQ4LDE4Ljk5NjIyOSAyMS42MTUzODQ2LDE5LjM0MDE5MDcgMjEuNjE1Mzg0NiwxOS43NDQ4NTYgTDIxLjYxNTM4NDYsMjYuNTQzMjA5OSBaIE0yMCwxNS44MDQyOTgxIEMxOS40NDQ0NDI3LDE1LjgwNDI5ODEgMTguOTcyMjI0LDE1LjYxOTM2ODcgMTguNTgzMzMzMywxNS4yNDk1MDQ2IEMxOC4xOTQ0NDI3LDE0Ljg3OTY0MDYgMTgsMTQuNDMwNTI1NSAxOCwxMy45MDIxNDkxIEMxOCwxMy4zNzM3NzI2IDE4LjE5NDQ0MjcsMTIuOTI0NjU3NSAxOC41ODMzMzMzLDEyLjU1NDc5MzUgQzE4Ljk3MjIyNCwxMi4xODQ5Mjk1IDE5LjQ0NDQ0MjcsMTIgMjAsMTIgQzIwLjU1NTU1NzMsMTIgMjEuMDI3Nzc2LDEyLjE4NDkyOTUgMjEuNDE2NjY2NywxMi41NTQ3OTM1IEMyMS44MDU1NTczLDEyLjkyNDY1NzUgMjIsMTMuMzczNzcyNiAyMiwxMy45MDIxNDkxIEMyMiwxNC40MzA1MjU1IDIxLjgwNTU1NzMsMTQuODc5NjQwNiAyMS40MTY2NjY3LDE1LjI0OTUwNDYgQzIxLjAyNzc3NiwxNS42MTkzNjg3IDIwLjU1NTU1NzMsMTUuODA0Mjk4MSAyMCwxNS44MDQyOTgxIFoiIGlkPSJDb21iaW5lZC1TaGFwZSIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl9zdWNjZXNzPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IkVsZW1lbnQtZ3VpZGVsaW5lLXYwLjIuNCIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yMTIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2MC4wMDAwMDAsIDIxMi4wMDAwMDApIj4KICAgICAgICAgICAgICAgIDxnIGlkPSJSZWN0YW5nbGUtMiI+CiAgICAgICAgICAgICAgICAgICAgPGcgaWQ9Imljb25fc3VjY2VzcyI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUtMiIgZmlsbD0iIzEzQ0U2NiIgeD0iMCIgeT0iMCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIj48L3JlY3Q+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0yNy44MjU1ODE0LDE3LjE0ODQzNTcgTDE5LjAxNzQ0LDI1LjgyODEyMTMgQzE4LjkwMTE2MDksMjUuOTQyNzA4MyAxOC43NjU1MDMzLDI2IDE4LjYxMDQ2NywyNiBDMTguNDU1NDI3LDI2IDE4LjMxOTc2OTMsMjUuOTQyNzA4MyAxOC4yMDM0ODY1LDI1LjgyODEyMTMgTDE4LjAyOTA3MTYsMjUuNjU2MjUgTDEzLjE3NDQxODYsMjAuODQzNzUgQzEzLjA1ODEzOTUsMjAuNzI5MTYzIDEzLDIwLjU5NTQ4MzcgMTMsMjAuNDQyNzA0NyBDMTMsMjAuMjg5OTI5MyAxMy4wNTgxMzk1LDIwLjE1NjI1IDEzLjE3NDQxODYsMjAuMDQxNjY2NyBMMTQuMzY2Mjc3MiwxOC44NjcxODU3IEMxNC40ODI1NiwxOC43NTI2MDIzIDE0LjYxODIxNzcsMTguNjk1MzEwNyAxNC43NzMyNTc3LDE4LjY5NTMxMDcgQzE0LjkyODI5NCwxOC42OTUzMTA3IDE1LjA2Mzk1MTYsMTguNzUyNjAyMyAxNS4xODAyMzA3LDE4Ljg2NzE4NTcgTDE4LjYxMDQ2NywyMi4yNzYwMzggTDI1LjgxOTc2OTMsMTUuMTcxODcxMyBDMjUuOTM2MDQ4NCwxNS4wNTcyODggMjYuMDcxNzA2LDE1IDI2LjIyNjc0MjMsMTUgQzI2LjM4MTc4MjMsMTUgMjYuNTE3NDQsMTUuMDU3Mjg4IDI2LjYzMzcyMjgsMTUuMTcxODcxMyBMMjcuODI1NTgxNCwxNi4zNDYzNTIzIEMyNy45NDE4NjA1LDE2LjQ2MDkzNTcgMjgsMTYuNTk0NjE1IDI4LDE2Ljc0NzM5NCBDMjgsMTYuOTAwMTczIDI3Ljk0MTg2MDUsMTcuMDMzODUyMyAyNy44MjU1ODE0LDE3LjE0ODQzNTcgTDI3LjgyNTU4MTQsMTcuMTQ4NDM1NyBaIiBpZD0iUGF0aCIgZmlsbD0iI0ZGRkZGRiI+PC9wYXRoPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+"},function(e,t){e.exports="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+Cjxzdmcgd2lkdGg9IjQwcHgiIGhlaWdodD0iNDBweCIgdmlld0JveD0iMCAwIDQwIDQwIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCAzOS4xICgzMTcyMCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+aWNvbl93YXJuaW5nPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGRlZnM+PC9kZWZzPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9Ik1lc3NhZ2UiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MC4wMDAwMDAsIC0yNzIuMDAwMDAwKSI+CiAgICAgICAgICAgIDxnIGlkPSLluKblgL7lkJFf5L+h5oGvLWNvcHkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYwLjAwMDAwMCwgMjcyLjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9IlJlY3RhbmdsZS0yIj4KICAgICAgICAgICAgICAgICAgICA8ZyBpZD0iaWNvbl93YXJuaW5nIj4KICAgICAgICAgICAgICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0yIiBmaWxsPSIjRjdCQTJBIiB4PSIwIiB5PSIwIiB3aWR0aD0iNDAiIGhlaWdodD0iNDAiPjwvcmVjdD4KICAgICAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTIxLjYxNTM4NDYsMjYuNTQzMjA5OSBDMjEuNjE1Mzg0NiwyNi45NDc4NzUxIDIxLjQ1ODMzNDgsMjcuMjkxODM2OCAyMS4xNDQyMzA4LDI3LjU3NTEwMjkgQzIwLjgzMDEyNjgsMjcuODU4MzY4OSAyMC40NDg3MTk0LDI4IDIwLDI4IEMxOS41NTEyODA2LDI4IDE5LjE2OTg3MzIsMjcuODU4MzY4OSAxOC44NTU3NjkyLDI3LjU3NTEwMjkgQzE4LjU0MTY2NTIsMjcuMjkxODM2OCAxOC4zODQ2MTU0LDI2Ljk0Nzg3NTEgMTguMzg0NjE1NCwyNi41NDMyMDk5IEwxOC4zODQ2MTU0LDE5Ljc0NDg1NiBDMTguMzg0NjE1NCwxOS4zNDAxOTA3IDE4LjU0MTY2NTIsMTguOTk2MjI5IDE4Ljg1NTc2OTIsMTguNzEyOTYzIEMxOS4xNjk4NzMyLDE4LjQyOTY5NjkgMTkuNTUxMjgwNiwxOC4yODgwNjU4IDIwLDE4LjI4ODA2NTggQzIwLjQ0ODcxOTQsMTguMjg4MDY1OCAyMC44MzAxMjY4LDE4LjQyOTY5NjkgMjEuMTQ0MjMwOCwxOC43MTI5NjMgQzIxLjQ1ODMzNDgsMTguOTk2MjI5IDIxLjYxNTM4NDYsMTkuMzQwMTkwNyAyMS42MTUzODQ2LDE5Ljc0NDg1NiBMMjEuNjE1Mzg0NiwyNi41NDMyMDk5IFogTTIwLDE1LjgwNDI5ODEgQzE5LjQ0NDQ0MjcsMTUuODA0Mjk4MSAxOC45NzIyMjQsMTUuNjE5MzY4NyAxOC41ODMzMzMzLDE1LjI0OTUwNDYgQzE4LjE5NDQ0MjcsMTQuODc5NjQwNiAxOCwxNC40MzA1MjU1IDE4LDEzLjkwMjE0OTEgQzE4LDEzLjM3Mzc3MjYgMTguMTk0NDQyNywxMi45MjQ2NTc1IDE4LjU4MzMzMzMsMTIuNTU0NzkzNSBDMTguOTcyMjI0LDEyLjE4NDkyOTUgMTkuNDQ0NDQyNywxMiAyMCwxMiBDMjAuNTU1NTU3MywxMiAyMS4wMjc3NzYsMTIuMTg0OTI5NSAyMS40MTY2NjY3LDEyLjU1NDc5MzUgQzIxLjgwNTU1NzMsMTIuOTI0NjU3NSAyMiwxMy4zNzM3NzI2IDIyLDEzLjkwMjE0OTEgQzIyLDE0LjQzMDUyNTUgMjEuODA1NTU3MywxNC44Nzk2NDA2IDIxLjQxNjY2NjcsMTUuMjQ5NTA0NiBDMjEuMDI3Nzc2LDE1LjYxOTM2ODcgMjAuNTU1NTU3MywxNS44MDQyOTgxIDIwLDE1LjgwNDI5ODEgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIiBmaWxsPSIjRkZGRkZGIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyMC4wMDAwMDAsIDIwLjAwMDAwMCkgc2NhbGUoMSwgLTEpIHRyYW5zbGF0ZSgtMjAuMDAwMDAwLCAtMjAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg=="},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-message-fade"}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.visible,expression:"visible"}],staticClass:"el-message",class:e.customClass,on:{mouseenter:e.clearTimer,mouseleave:e.startTimer}},[e.iconClass?e._e():i("img",{staticClass:"el-message__img",attrs:{src:e.typeImg,alt:""}}),i("div",{staticClass:"el-message__group",class:{"is-with-icon":e.iconClass}},[i("p",[e.iconClass?i("i",{staticClass:"el-message__icon",class:e.iconClass}):e._e(),e._v(e._s(e.message))]),e.showClose?i("div",{staticClass:"el-message__closeBtn el-icon-close",on:{click:e.close}}):e._e()])])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(893),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(894),i(895),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElBadge",props:{value:{},max:Number,isDot:Boolean,hidden:Boolean},computed:{content:function(){if(!this.isDot){var e=this.value,t=this.max;return"number"==typeof e&&"number"==typeof t&&t<e?t+"+":e}}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-badge"},[e._t("default"),i("transition",{attrs:{name:"el-zoom-in-center"}},[i("sup",{directives:[{name:"show",rawName:"v-show",value:!e.hidden&&(e.content||e.isDot),expression:"!hidden && ( content || isDot )"}],staticClass:"el-badge__content",class:{"is-fixed":e.$slots.default,"is-dot":e.isDot},domProps:{textContent:e._s(e.content)}})])],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(897),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(898),i(899),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElCard",props:["header","bodyStyle"]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-card"},[e.$slots.header||e.header?i("div",{staticClass:"el-card__header"},[e._t("header",[e._v(e._s(e.header))])],2):e._e(),i("div",{staticClass:"el-card__body",style:e.bodyStyle},[e._t("default")],2)])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(901),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(902),i(903),null,null);e.exports=n.exports},function(e,t,i){"use strict";t.__esModule=!0;var n=i(71);t.default={name:"ElRate",data:function(){return{classMap:{},colorMap:{},pointerAtLeftHalf:!1,currentValue:this.value,hoverIndex:-1}},props:{value:{type:Number,default:0},lowThreshold:{type:Number,default:2},highThreshold:{type:Number,default:4},max:{type:Number,default:5},colors:{type:Array,default:function(){return["#F7BA2A","#F7BA2A","#F7BA2A"]}},voidColor:{type:String,default:"#C6D1DE"},disabledVoidColor:{type:String,default:"#EFF2F7"},iconClasses:{type:Array,default:function(){return["el-icon-star-on","el-icon-star-on","el-icon-star-on"]}},voidIconClass:{type:String,default:"el-icon-star-off"},disabledVoidIconClass:{type:String,default:"el-icon-star-on"},disabled:{type:Boolean,default:!1},allowHalf:{type:Boolean,default:!1},showText:{type:Boolean,default:!1},textColor:{type:String,default:"#1f2d3d"},texts:{type:Array,default:function(){return["极差","失望","一般","满意","惊喜"]}},textTemplate:{type:String,default:"{value}"}},computed:{text:function(){var e="";return e=this.disabled?this.textTemplate.replace(/\{\s*value\s*\}/,this.value):this.texts[Math.ceil(this.currentValue)-1]},decimalStyle:function(){var e="";return this.disabled&&(e=(this.valueDecimal<50?0:50)+"%"),this.allowHalf&&(e="50%"),{color:this.activeColor,width:e}},valueDecimal:function(){return 100*this.value-100*Math.floor(this.value)},decimalIconClass:function(){return this.getValueFromMap(this.value,this.classMap)},voidClass:function(){return this.disabled?this.classMap.disabledVoidClass:this.classMap.voidClass},activeClass:function(){return this.getValueFromMap(this.currentValue,this.classMap)},activeColor:function(){return this.getValueFromMap(this.currentValue,this.colorMap)},classes:function(){var e=[],t=0,i=this.currentValue;for(this.allowHalf&&this.currentValue!==Math.floor(this.currentValue)&&i--;t<i;t++)e.push(this.activeClass);for(;t<this.max;t++)e.push(this.voidClass);return e}},watch:{value:function(e){this.$emit("change",e),this.currentValue=e}},methods:{getValueFromMap:function(e,t){var i="";return i=e<=this.lowThreshold?t.lowColor||t.lowClass:e>=this.highThreshold?t.highColor||t.highClass:t.mediumColor||t.mediumClass},showDecimalIcon:function(e){var t=this.disabled&&this.valueDecimal>0&&e-1<this.value&&e>this.value,i=this.allowHalf&&this.pointerAtLeftHalf&&(e-.5).toFixed(1)===this.currentValue.toFixed(1);return t||i},getIconStyle:function(e){var t=this.disabled?this.colorMap.disabledVoidColor:this.colorMap.voidColor;return{color:e<=this.currentValue?this.activeColor:t}},selectValue:function(e){this.disabled||(this.allowHalf&&this.pointerAtLeftHalf?this.$emit("input",this.currentValue):this.$emit("input",e))},setCurrentValue:function(e,t){if(!this.disabled){if(this.allowHalf){var i=t.target;(0,n.hasClass)(i,"el-rate__item")&&(i=i.querySelector(".el-rate__icon")),(0,n.hasClass)(i,"el-rate__decimal")&&(i=i.parentNode),this.pointerAtLeftHalf=2*t.offsetX<=i.clientWidth,this.currentValue=this.pointerAtLeftHalf?e-.5:e}else this.currentValue=e;this.hoverIndex=e}},resetCurrentValue:function(){this.disabled||(this.allowHalf&&(this.pointerAtLeftHalf=this.value!==Math.floor(this.value)),this.currentValue=this.value,this.hoverIndex=-1)}},created:function(){this.value||this.$emit("input",0),this.classMap={lowClass:this.iconClasses[0],mediumClass:this.iconClasses[1],highClass:this.iconClasses[2],voidClass:this.voidIconClass,disabledVoidClass:this.disabledVoidIconClass},this.colorMap={lowColor:this.colors[0],mediumColor:this.colors[1],highColor:this.colors[2],voidColor:this.voidColor,disabledVoidColor:this.disabledVoidColor}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-rate"},[e._l(e.max,function(t){return i("span",{staticClass:"el-rate__item",style:{cursor:e.disabled?"auto":"pointer"},on:{mousemove:function(i){e.setCurrentValue(t,i)},mouseleave:e.resetCurrentValue,click:function(i){e.selectValue(t)}}},[i("i",{staticClass:"el-rate__icon",class:[e.classes[t-1],{hover:e.hoverIndex===t}],style:e.getIconStyle(t)},[e.showDecimalIcon(t)?i("i",{staticClass:"el-rate__decimal",class:e.decimalIconClass,style:e.decimalStyle}):e._e()])])}),e.showText?i("span",{staticClass:"el-rate__text",style:{color:e.textColor}},[e._v(e._s(e.text))]):e._e()],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(905),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(906),i(907),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElSteps",props:{space:[Number,String],active:Number,direction:{type:String,default:"horizontal"},alignCenter:Boolean,center:Boolean,finishStatus:{type:String,default:"finish"},processStatus:{type:String,default:"process"}},data:function(){return{steps:[],stepOffset:0}},watch:{active:function(e,t){this.$emit("change",e,t)},steps:function(e){e.forEach(function(e,t){e.index=t})}}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-steps",class:["is-"+e.direction,e.center?"is-center":""]},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(909),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(910),i(911),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElStep",props:{title:String,icon:String,description:String,status:String},data:function(){return{index:-1,style:{},lineStyle:{},mainOffset:0,isLast:!1,internalStatus:""}},beforeCreate:function(){this.$parent.steps.push(this)},computed:{currentStatus:function(){return this.status||this.internalStatus}},methods:{updateStatus:function(e){var t=this.$parent.$children[this.index-1];e>this.index?this.internalStatus=this.$parent.finishStatus:e===this.index?this.internalStatus=this.$parent.processStatus:this.internalStatus="wait",t&&t.calcProgress(this.internalStatus)},calcProgress:function(e){var t=100,i={};i.transitionDelay=150*this.index+"ms",e===this.$parent.processStatus?t=50:"wait"===e&&(t=0,i.transitionDelay=-150*this.index+"ms"),i.borderWidth=t?"1px":0,"vertical"===this.$parent.direction?i.height=t+"%":i.width=t+"%",this.lineStyle=i},adjustPosition:function(){this.style={},this.$parent.stepOffset=this.$el.getBoundingClientRect().width/(this.$parent.steps.length-1)}},mounted:function(){var e=this,t=this.$parent,i=t.center,n=t.steps.length,s=this.isLast=t.steps[t.steps.length-1]===this,o="number"==typeof t.space?t.space+"px":t.space?t.space:100/(i?n-1:n)+"%";"horizontal"===t.direction?(this.style={width:o},t.alignCenter&&(this.mainOffset=-this.$refs.title.getBoundingClientRect().width/2+16+"px"),i&&s&&this.adjustPosition()):s||(this.style={height:o});var a=this.$watch("index",function(t){e.$watch("$parent.active",e.updateStatus,{immediate:!0}),a()})}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-step",class:["is-"+e.$parent.direction],style:[e.style,e.isLast?"":{marginRight:-e.$parent.stepOffset+"px"}]},[i("div",{staticClass:"el-step__head",class:["is-"+e.currentStatus,{"is-text":!e.icon}]},[i("div",{staticClass:"el-step__line",class:["is-"+e.$parent.direction,{"is-icon":e.icon}],style:e.isLast?"":{marginRight:e.$parent.stepOffset+"px"}},[i("i",{staticClass:"el-step__line-inner",style:e.lineStyle})]),i("span",{staticClass:"el-step__icon"},["success"!==e.currentStatus&&"error"!==e.currentStatus?e._t("icon",[e.icon?i("i",{class:["el-icon-"+e.icon]}):i("div",[e._v(e._s(e.index+1))])]):i("i",{class:["el-icon-"+("success"===e.currentStatus?"check":"close")]})],2)]),i("div",{staticClass:"el-step__main",style:{marginLeft:e.mainOffset}},[i("div",{ref:"title",staticClass:"el-step__title",class:["is-"+e.currentStatus]},[e._t("title",[e._v(e._s(e.title))])],2),i("div",{staticClass:"el-step__description",class:["is-"+e.currentStatus]},[e._t("description",[e._v(e._s(e.description))])],2)])])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(913),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(914),i(915),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(31),o=n(s),a=i(615),r=n(a),l=i(612);t.default={name:"ElCarousel",props:{initialIndex:{type:Number,default:0},height:String,trigger:{type:String,default:"hover"},autoplay:{type:Boolean,default:!0},interval:{type:Number,default:3e3},indicatorPosition:String,indicator:{type:Boolean,default:!0},arrow:{type:String,default:"hover"},type:String},data:function(){return{items:[],activeIndex:-1,containerWidth:0,timer:null,hover:!1}},watch:{items:function(e){e.length>0&&this.setActiveItem(0)},activeIndex:function(e,t){this.resetItemPosition(),this.$emit("change",e,t)}},methods:{handleMouseEnter:function(){this.hover=!0,this.pauseTimer()},handleMouseLeave:function(){this.hover=!1,this.startTimer()},itemInStage:function(e,t){var i=this.items.length;return t===i-1&&e.inStage&&this.items[0].active||e.inStage&&this.items[t+1]&&this.items[t+1].active?"left":!!(0===t&&e.inStage&&this.items[i-1].active||e.inStage&&this.items[t-1]&&this.items[t-1].active)&&"right"},handleButtonEnter:function(e){var t=this;this.items.forEach(function(i,n){e===t.itemInStage(i,n)&&(i.hover=!0)})},handleButtonLeave:function(){this.items.forEach(function(e){e.hover=!1})},updateItems:function(){this.items=this.$children.filter(function(e){return"ElCarouselItem"===e.$options.name})},resetItemPosition:function(){var e=this;this.items.forEach(function(t,i){t.translateItem(i,e.activeIndex)})},playSlides:function(){this.activeIndex<this.items.length-1?this.activeIndex++:this.activeIndex=0},pauseTimer:function(){clearInterval(this.timer)},startTimer:function(){this.interval<=0||!this.autoplay||(this.timer=setInterval(this.playSlides,this.interval))},setActiveItem:function(e){if("string"==typeof e){var t=this.items.filter(function(t){return t.name===e});t.length>0&&(e=this.items.indexOf(t[0]))}if(e=Number(e),!isNaN(e)&&e===Math.floor(e)){var i=this.items.length;e<0?this.activeIndex=i-1:e>=i?this.activeIndex=0:this.activeIndex=e}},prev:function(){this.setActiveItem(this.activeIndex-1)},next:function(){this.setActiveItem(this.activeIndex+1)},handleIndicatorClick:function(e){this.activeIndex=e},handleIndicatorHover:function(e){"hover"===this.trigger&&e!==this.activeIndex&&(this.activeIndex=e)}},created:function(){var e=this;this.handleItemChange=(0,r.default)(100,this.updateItems),this.throttledArrowClick=(0,o.default)(300,!0,function(t){e.setActiveItem(t)}),this.throttledIndicatorHover=(0,o.default)(300,function(t){e.handleIndicatorHover(t)})},mounted:function(){var e=this;this.updateItems(),this.$nextTick(function(){(0,l.addResizeListener)(e.$el,e.resetItemPosition),e.initialIndex<e.items.length&&e.initialIndex>=0&&(e.activeIndex=e.initialIndex),e.startTimer()})},beforeDestroy:function(){this.$el&&(0,l.removeResizeListener)(this.$el,this.resetItemPosition)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-carousel",class:{"el-carousel--card":"card"===e.type},on:{mouseenter:function(t){t.stopPropagation(),e.handleMouseEnter(t)},mouseleave:function(t){t.stopPropagation(),e.handleMouseLeave(t)}}},[i("div",{staticClass:"el-carousel__container",style:{height:e.height}},[i("transition",{attrs:{name:"carousel-arrow-left"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--left",on:{mouseenter:function(t){e.handleButtonEnter("left")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex-1)}}},[i("i",{staticClass:"el-icon-arrow-left"})]):e._e()]),i("transition",{attrs:{name:"carousel-arrow-right"}},["never"!==e.arrow?i("button",{directives:[{name:"show",rawName:"v-show",value:"always"===e.arrow||e.hover,expression:"arrow === 'always' || hover"}],staticClass:"el-carousel__arrow el-carousel__arrow--right",on:{mouseenter:function(t){e.handleButtonEnter("right")},mouseleave:e.handleButtonLeave,click:function(t){t.stopPropagation(),e.throttledArrowClick(e.activeIndex+1)}}},[i("i",{staticClass:"el-icon-arrow-right"})]):e._e()]),e._t("default")],2),"none"!==e.indicatorPosition?i("ul",{staticClass:"el-carousel__indicators",class:{"el-carousel__indicators--outside":"outside"===e.indicatorPosition||"card"===e.type}},e._l(e.items,function(t,n){return i("li",{staticClass:"el-carousel__indicator",class:{"is-active":n===e.activeIndex},on:{mouseenter:function(t){e.throttledIndicatorHover(n)},click:function(t){t.stopPropagation(),e.handleIndicatorClick(n)}}},[i("button",{staticClass:"el-carousel__button"})])})):e._e()])},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(917),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(918),i(919),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0;var i=.83;t.default={name:"ElCarouselItem",props:{name:String},data:function(){return{hover:!1,translate:0,scale:1,active:!1,ready:!1,inStage:!1}},methods:{processIndex:function(e,t,i){return 0===t&&e===i-1?-1:t===i-1&&0===e?i:e<t-1&&t-e>=i/2?i+1:e>t+1&&e-t>=i/2?-2:e},calculateTranslate:function(e,t,n){return this.inStage?n*((2-i)*(e-t)+1)/4:e<t?-(1+i)*n/4:(3+i)*n/4},translateItem:function(e,t){var n=this.$parent.$el.offsetWidth,s=this.$parent.items.length;e!==t&&s>2&&(e=this.processIndex(e,t,s)),"card"===this.$parent.type?(this.inStage=Math.round(Math.abs(e-t))<=1,this.active=e===t,this.translate=this.calculateTranslate(e,t,n),this.scale=this.active?1:i):(this.active=e===t,this.translate=n*(e-t)),this.ready=!0},handleItemClick:function(){var e=this.$parent;if(e&&"card"===e.type){var t=e.items.indexOf(this);e.setActiveItem(t)}}},created:function(){this.$parent&&this.$parent.handleItemChange()},destroyed:function(){this.$parent&&this.$parent.handleItemChange()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"show",rawName:"v-show",
-value:e.ready,expression:"ready"}],staticClass:"el-carousel__item",class:{"is-active":e.active,"el-carousel__item--card":"card"===e.$parent.type,"is-in-stage":e.inStage,"is-hover":e.hover},style:{msTransform:"translateX("+e.translate+"px) scale("+e.scale+")",webkitTransform:"translateX("+e.translate+"px) scale("+e.scale+")",transform:"translateX("+e.translate+"px) scale("+e.scale+")"},on:{click:e.handleItemClick}},["card"===e.$parent.type?i("div",{directives:[{name:"show",rawName:"v-show",value:!e.active,expression:"!active"}],staticClass:"el-carousel__mask"}):e._e(),e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(921),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(922),i(923),null,null);e.exports=n.exports},function(e,t){"use strict";t.__esModule=!0,t.default={name:"ElCollapse",componentName:"ElCollapse",props:{accordion:Boolean,value:{type:[Array,String,Number],default:function(){return[]}}},data:function(){return{activeNames:[].concat(this.value)}},watch:{value:function(e){this.activeNames=[].concat(e)}},methods:{setActiveNames:function(e){e=[].concat(e);var t=this.accordion?e[0]:e;this.activeNames=e,this.$emit("input",t),this.$emit("change",t)},handleItemClick:function(e){if(this.accordion)this.setActiveNames(!this.activeNames[0]&&0!==this.activeNames[0]||this.activeNames[0]!==e.name?e.name:"");else{var t=this.activeNames.slice(0),i=t.indexOf(e.name);i>-1?t.splice(i,1):t.push(e.name),this.setActiveNames(t)}}},created:function(){this.$on("item-click",this.handleItemClick)}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse"},[e._t("default")],2)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(925),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(926),i(927),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(587),o=n(s),a=i(657),r=n(a);t.default={name:"ElCollapseItem",componentName:"ElCollapseItem",mixins:[o.default],components:{CollapseTransition:r.default},data:function(){return{contentWrapStyle:{height:"auto",display:"block"},contentHeight:0}},props:{title:String,name:{type:[String,Number],default:function(){return this._uid}}},computed:{isActive:function(){return this.$parent.activeNames.indexOf(this.name)>-1}},watch:{isActive:function(e){}},methods:{handleHeaderClick:function(){this.dispatch("ElCollapse","item-click",this)}},mounted:function(){}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-collapse-item",class:{"is-active":e.isActive}},[i("div",{staticClass:"el-collapse-item__header",on:{click:e.handleHeaderClick}},[i("i",{staticClass:"el-collapse-item__header__arrow el-icon-arrow-right"}),e._t("title",[e._v(e._s(e.title))])],2),i("collapse-transition",[i("div",{directives:[{name:"show",rawName:"v-show",value:e.isActive,expression:"isActive"}],staticClass:"el-collapse-item__wrap"},[i("div",{staticClass:"el-collapse-item__content"},[e._t("default")],2)])])],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(929),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(930),i(934),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(2),o=n(s),a=i(931),r=n(a),l=i(589),u=n(l),c=i(597),d=n(c),h=i(616),f=n(h),p=i(587),m=n(p),v=i(588),g=n(v),y=i(15),b=i(615),_=n(b),C={props:{placement:{type:String,default:"bottom-start"},appendToBody:d.default.props.appendToBody,offset:d.default.props.offset,boundariesPadding:d.default.props.boundariesPadding,popperOptions:d.default.props.popperOptions},methods:d.default.methods,data:d.default.data,beforeDestroy:d.default.beforeDestroy};t.default={name:"ElCascader",directives:{Clickoutside:f.default},mixins:[C,m.default,g.default],components:{ElInput:u.default},props:{options:{type:Array,required:!0},props:{type:Object,default:function(){return{children:"children",label:"label",value:"value",disabled:"disabled"}}},value:{type:Array,default:function(){return[]}},placeholder:{type:String,default:function(){return(0,y.t)("el.cascader.placeholder")}},disabled:Boolean,clearable:{type:Boolean,default:!1},changeOnSelect:Boolean,popperClass:String,expandTrigger:{type:String,default:"click"},filterable:Boolean,size:String,showAllLevels:{type:Boolean,default:!0},debounce:{type:Number,default:300}},data:function(){return{currentValue:this.value,menu:null,debouncedInputChange:function(){},menuVisible:!1,inputHover:!1,inputValue:"",flatOptions:null}},computed:{labelKey:function(){return this.props.label||"label"},valueKey:function(){return this.props.value||"value"},childrenKey:function(){return this.props.children||"children"},currentLabels:function(){var e=this,t=this.options,i=[];return this.currentValue.forEach(function(n){var s=t&&t.filter(function(t){return t[e.valueKey]===n})[0];s&&(i.push(s[e.labelKey]),t=s[e.childrenKey])}),i}},watch:{menuVisible:function(e){e?this.showMenu():this.hideMenu()},value:function(e){this.currentValue=e},currentValue:function(e){this.dispatch("ElFormItem","el.form.change",[e])},options:{deep:!0,handler:function(e){this.menu||this.initMenu(),this.flatOptions=this.flattenOptions(this.options),this.menu.options=e}}},methods:{initMenu:function(){this.menu=new o.default(r.default).$mount(),this.menu.options=this.options,this.menu.props=this.props,this.menu.expandTrigger=this.expandTrigger,this.menu.changeOnSelect=this.changeOnSelect,this.menu.popperClass=this.popperClass,this.popperElm=this.menu.$el,this.menu.$on("pick",this.handlePick),this.menu.$on("activeItemChange",this.handleActiveItemChange),this.menu.$on("menuLeave",this.doDestroy)},showMenu:function(){var e=this;this.menu||this.initMenu(),this.menu.value=this.currentValue.slice(0),this.menu.visible=!0,this.menu.options=this.options,this.$nextTick(function(t){e.updatePopper(),e.menu.inputWidth=e.$refs.input.$el.offsetWidth-2})},hideMenu:function(){this.inputValue="",this.menu.visible=!1},handleActiveItemChange:function(e){var t=this;this.$nextTick(function(e){t.updatePopper()}),this.$emit("active-item-change",e)},handlePick:function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1];this.currentValue=e,this.$emit("input",e),this.$emit("change",e),t&&(this.menuVisible=!1)},handleInputChange:function(e){var t=this;if(this.menuVisible){var i=this.flatOptions;if(!e)return void(this.menu.options=this.options);var n=i.filter(function(i){return i.some(function(i){return new RegExp(e,"i").test(i[t.labelKey])})});n=n.length>0?n.map(function(i){return{__IS__FLAT__OPTIONS:!0,value:i.map(function(e){return e[t.valueKey]}),label:t.renderFilteredOptionLabel(e,i)}}):[{__IS__FLAT__OPTIONS:!0,label:this.t("el.cascader.noMatch"),value:"",disabled:!0}],this.menu.options=n}},renderFilteredOptionLabel:function(e,t){var i=this;return t.map(function(t,n){var s=t[i.labelKey],o=s.toLowerCase().indexOf(e.toLowerCase()),a=s.slice(o,e.length+o),r=o>-1?i.highlightKeyword(s,a):s;return 0===n?r:[" / ",r]})},highlightKeyword:function(e,t){var i=this,n=this._c;return e.split(t).map(function(e,s){return 0===s?e:[n("span",{class:{"el-cascader-menu__item__keyword":!0}},[i._v(t)]),e]})},flattenOptions:function(e){var t=this,i=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],n=[];return e.forEach(function(e){var s=i.concat(e);e[t.childrenKey]?(t.changeOnSelect&&n.push(s),n=n.concat(t.flattenOptions(e[t.childrenKey],s))):n.push(s)}),n},clearValue:function(e){e.stopPropagation(),this.handlePick([],!0)},handleClickoutside:function(){this.menuVisible=!1},handleClick:function(){if(!this.disabled)return this.filterable?(this.menuVisible=!0,void this.$refs.input.$refs.input.focus()):void(this.menuVisible=!this.menuVisible)}},created:function(){var e=this;this.debouncedInputChange=(0,_.default)(this.debounce,function(t){e.handleInputChange(t)})},mounted:function(){this.flatOptions=this.flattenOptions(this.options)}}},function(e,t,i){var n=i(13)(i(932),null,null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(933),o=n(s);t.default={name:"ElCascaderMenu",data:function(){return{inputWidth:0,options:[],props:{},visible:!1,activeValue:[],value:[],expandTrigger:"click",changeOnSelect:!1,popperClass:""}},watch:{visible:function(e){e&&(this.activeValue=this.value)},value:{immediate:!0,handler:function(e){this.activeValue=e}}},computed:{activeOptions:{cache:!1,get:function(){var e=this,t=this.activeValue,i=["label","value","children","disabled"],n=function t(n){n.forEach(function(n){n.__IS__FLAT__OPTIONS||(i.forEach(function(t){var i=n[e.props[t]||t];i&&(n[t]=i)}),Array.isArray(n.children)&&t(n.children))})},s=function e(i){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:[],s=n.length;n[s]=i;var o=t[s];return o&&(i=i.filter(function(e){return e.value===o})[0],i&&i.children&&e(i.children,n)),n};return n(this.options),s(this.options)}}},methods:{select:function(e,t){e.__IS__FLAT__OPTIONS?this.activeValue=e.value:t?this.activeValue.splice(t,this.activeValue.length-1,e.value):this.activeValue=[e.value],this.$emit("pick",this.activeValue)},handleMenuLeave:function(){this.$emit("menuLeave")},activeItem:function(e,t){var i=this.activeOptions.length;this.activeValue.splice(t,i,e.value),this.activeOptions.splice(t+1,i,e.children),this.changeOnSelect?this.$emit("pick",this.activeValue,!1):this.$emit("activeItemChange",this.activeValue)}},render:function(e){var t=this,i=this.activeValue,n=this.activeOptions,s=this.visible,a=this.expandTrigger,r=this.popperClass,l=this._l(n,function(n,s){var r=!1,l=t._l(n,function(n){var l={on:{}};if(n.__IS__FLAT__OPTIONS&&(r=!0),!n.disabled)if(n.children){var u={click:"click",hover:"mouseenter"}[a];l.on[u]=function(){t.activeItem(n,s)}}else l.on.click=function(){t.select(n,s)};return e("li",(0,o.default)([{class:{"el-cascader-menu__item":!0,"el-cascader-menu__item--extensible":n.children,"is-active":n.value===i[s],"is-disabled":n.disabled}},l]),[n.label])}),u={};return r&&(u.minWidth=t.inputWidth+"px"),e("ul",{class:{"el-cascader-menu":!0,"el-cascader-menu--flexible":r},style:u},[l])});return e("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":this.handleMenuLeave}},[e("div",{directives:[{name:"show",value:s}],class:["el-cascader-menus",r]},[l])])}}},function(e,t){function i(e,t){return function(){e.apply(this,arguments),t.apply(this,arguments)}}var n=/^(attrs|props|on|nativeOn|class|style|hook)$/;e.exports=function(e){return e.reduce(function(e,t){var s,o,a,r,l;for(a in t)if(s=e[a],o=t[a],s&&n.test(a))if("class"===a&&("string"==typeof s&&(l=s,e[a]=s={},s[l]=!0),"string"==typeof o&&(l=o,t[a]=o={},o[l]=!0)),"on"===a||"nativeOn"===a||"hook"===a)for(r in o)s[r]=i(s[r],o[r]);else if(Array.isArray(s))e[a]=s.concat(o);else if(Array.isArray(o))e[a]=[s].concat(o);else for(r in o)s[r]=o[r];else e[a]=t[a];return e},{})}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("span",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.handleClickoutside,expression:"handleClickoutside"}],ref:"reference",staticClass:"el-cascader",class:[{"is-opened":e.menuVisible,"is-disabled":e.disabled},e.size?"el-cascader--"+e.size:""],on:{click:e.handleClick,mouseenter:function(t){e.inputHover=!0},mouseleave:function(t){e.inputHover=!1}}},[i("el-input",{directives:[{name:"model",rawName:"v-model",value:e.inputValue,expression:"inputValue"}],ref:"input",attrs:{readonly:!e.filterable,placeholder:e.currentLabels.length?void 0:e.placeholder,"validate-event":!1,size:e.size,disabled:e.disabled},domProps:{value:e.inputValue},on:{change:e.debouncedInputChange,input:function(t){e.inputValue=t}}},[i("template",{slot:"icon"},[e.clearable&&e.inputHover&&e.currentLabels.length?i("i",{key:"1",staticClass:"el-input__icon el-icon-circle-close el-cascader__clearIcon",on:{click:e.clearValue}}):i("i",{key:"2",staticClass:"el-input__icon el-icon-caret-bottom",class:{"is-reverse":e.menuVisible}})])],2),i("span",{directives:[{name:"show",rawName:"v-show",value:""===e.inputValue,expression:"inputValue === ''"}],staticClass:"el-cascader__label"},[e.showAllLevels?[e._l(e.currentLabels,function(t,n){return[e._v("\n        "+e._s(t)+"\n        "),n<e.currentLabels.length-1?i("span",[e._v(" / ")]):e._e()]})]:[e._v("\n      "+e._s(e.currentLabels[e.currentLabels.length-1])+"\n    ")]],2)],1)},staticRenderFns:[]}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(936),o=n(s);o.default.install=function(e){e.component(o.default.name,o.default)},t.default=o.default},function(e,t,i){var n=i(13)(i(937),i(952),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(938),o=n(s),a=i(939),r=n(a),l=i(616),u=n(l);t.default={name:"ElColorPicker",props:{value:{type:String},showAlpha:{type:Boolean},colorFormat:{type:String}},directives:{Clickoutside:u.default},computed:{displayedColor:function(){if(this.value||this.showPanelColor){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return this.showAlpha?"rgba("+t+", "+i+", "+n+", "+this.color.get("alpha")/100+")":"rgb("+t+", "+i+", "+n+")"}return"transparent"}},watch:{value:function(e){e&&e!==this.color.value&&this.color.fromString(e)},color:{deep:!0,handler:function(){this.showPanelColor=!0}}},methods:{confirmValue:function(e){this.$emit("input",this.color.value),this.$emit("change",this.color.value),this.showPicker=!1},clearValue:function(){this.$emit("input",null),this.$emit("change",null),this.showPanelColor=!1,this.showPicker=!1,this.resetColor()},hide:function(){this.showPicker=!1,this.resetColor()},resetColor:function(){var e=this;this.$nextTick(function(t){e.value?e.color.fromString(e.value):e.showPanelColor=!1})}},mounted:function(){var e=this.value;e&&this.color.fromString(e),this.popperElm=this.$refs.dropdown.$el},data:function(){var e=new o.default({enableAlpha:this.showAlpha,format:this.colorFormat});return{color:e,showPicker:!1,showPanelColor:!1}},components:{PickerDropdown:r.default}}},function(e,t){"use strict";function i(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}t.__esModule=!0;var n="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},s=function(e,t,i){return[e,t*i/((e=(2-t)*i)<1?e:2-e)||0,e/2]},o=function(e){return"string"==typeof e&&e.indexOf(".")!==-1&&1===parseFloat(e)},a=function(e){return"string"==typeof e&&e.indexOf("%")!==-1},r=function(e,t){o(e)&&(e="100%");var i=a(e);return e=Math.min(t,Math.max(0,parseFloat(e))),i&&(e=parseInt(e*t,10)/100),Math.abs(e-t)<1e-6?1:e%t/parseFloat(t)},l={10:"A",11:"B",12:"C",13:"D",14:"E",15:"F"},u=function(e){var t=e.r,i=e.g,n=e.b,s=function(e){e=Math.min(Math.round(e),255);var t=Math.floor(e/16),i=e%16;return""+(l[t]||t)+(l[i]||i)};return isNaN(t)||isNaN(i)||isNaN(n)?"":"#"+s(t)+s(i)+s(n)},c={A:10,B:11,C:12,D:13,E:14,F:15},d=function(e){return 2===e.length?16*(c[e[0].toUpperCase()]||+e[0])+(c[e[1].toUpperCase()]||+e[1]):c[e[1].toUpperCase()]||+e[1]},h=function(e,t,i){t/=100,i/=100;var n=t,s=Math.max(i,.01),o=void 0,a=void 0;return i*=2,t*=i<=1?i:2-i,n*=s<=1?s:2-s,a=(i+t)/2,o=0===i?2*n/(s+n):2*t/(i+t),{h:e,s:100*o,v:100*a}},f=function(e,t,i){e=r(e,255),t=r(t,255),i=r(i,255);var n=Math.max(e,t,i),s=Math.min(e,t,i),o=void 0,a=void 0,l=n,u=n-s;if(a=0===n?0:u/n,n===s)o=0;else{switch(n){case e:o=(t-i)/u+(t<i?6:0);break;case t:o=(i-e)/u+2;break;case i:o=(e-t)/u+4}o/=6}return{h:Math.round(360*o),s:Math.round(100*a),v:Math.round(100*l)}},p=function(e,t,i){e=6*r(e,360),t=r(t,100),i=r(i,100);var n=Math.floor(e),s=e-n,o=i*(1-t),a=i*(1-s*t),l=i*(1-(1-s)*t),u=n%6,c=[i,a,o,o,l,i][u],d=[l,i,i,a,o,o][u],h=[o,o,l,i,i,a][u];return{r:Math.round(255*c),g:Math.round(255*d),b:Math.round(255*h)}},m=function(){function e(t){i(this,e),this._hue=0,this._saturation=100,this._value=100,this._alpha=100,this.enableAlpha=!1,this.format="hex",this.value="",t=t||{};for(var n in t)t.hasOwnProperty(n)&&(this[n]=t[n]);this.doOnChange()}return e.prototype.set=function(e,t){if(1!==arguments.length||"object"!==("undefined"==typeof e?"undefined":n(e)))this["_"+e]=t,this.doOnChange();else for(var i in e)e.hasOwnProperty(i)&&this.set(i,e[i])},e.prototype.get=function(e){return this["_"+e]},e.prototype.toRgb=function(){return p(this._hue,this._saturation,this._value)},e.prototype.fromString=function(e){var t=this;if(!e)return this._hue=0,this._saturation=100,this._value=100,void this.doOnChange();var i=function(e,i,n){t._hue=e,t._saturation=i,t._value=n,t.doOnChange()};if(e.indexOf("hsl")!==-1){var n=e.replace(/hsla|hsl|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===n.length&&(this._alpha=Math.floor(100*parseFloat(n[3]))),n.length>=3){var s=h(n[0],n[1],n[2]),o=s.h,a=s.s,r=s.v;i(o,a,r)}}else if(e.indexOf("hsv")!==-1){var l=e.replace(/hsva|hsv|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});4===l.length&&(this._alpha=Math.floor(100*parseFloat(l[3]))),l.length>=3&&i(l[0],l[1],l[2])}else if(e.indexOf("rgb")!==-1){var u=e.replace(/rgba|rgb|\(|\)/gm,"").split(/\s|,/g).filter(function(e){return""!==e}).map(function(e,t){return t>2?parseFloat(e):parseInt(e,10)});if(4===u.length&&(this._alpha=Math.floor(100*parseFloat(u[3]))),u.length>=3){var c=f(u[0],u[1],u[2]),p=c.h,m=c.s,v=c.v;i(p,m,v)}}else if(e.indexOf("#")!==-1){var g=e.replace("#","").trim(),y=void 0,b=void 0,_=void 0;3===g.length?(y=d(g[0]+g[0]),b=d(g[1]+g[1]),_=d(g[2]+g[2])):6===g.length&&(y=d(g.substring(0,2)),b=d(g.substring(2,4)),_=d(g.substring(4)));var C=f(y,b,_),x=C.h,w=C.s,M=C.v;i(x,w,M)}},e.prototype.doOnChange=function(){var e=this._hue,t=this._saturation,i=this._value,n=this._alpha,o=this.format;if(this.enableAlpha)switch(o){case"hsl":var a=s(e,t/100,i/100);this.value="hsla("+e+", "+Math.round(100*a[1])+"%, "+Math.round(100*a[2])+"%, "+n/100+")";break;case"hsv":this.value="hsva("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%, "+n/100+")";break;default:var r=p(e,t,i),l=r.r,c=r.g,d=r.b;this.value="rgba("+l+", "+c+", "+d+", "+n/100+")"}else switch(o){case"hsl":var h=s(e,t/100,i/100);this.value="hsl("+e+", "+Math.round(100*h[1])+"%, "+Math.round(100*h[2])+"%)";break;case"hsv":this.value="hsv("+e+", "+Math.round(t)+"%, "+Math.round(i)+"%)";break;case"rgb":var f=p(e,t,i),m=f.r,v=f.g,g=f.b;this.value="rgb("+m+", "+v+", "+g+")";break;default:this.value=u(p(e,t,i))}},e}();t.default=m},function(e,t,i){var n=i(13)(i(940),i(951),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(941),o=n(s),a=i(945),r=n(a),l=i(948),u=n(l),c=i(597),d=n(c),h=i(588),f=n(h);t.default={name:"el-color-picker-dropdown",mixins:[d.default,f.default],components:{SvPanel:o.default,HueSlider:r.default,AlphaSlider:u.default},props:{color:{required:!0},showAlpha:Boolean},computed:{currentColor:function(){var e=this.$parent;return e.value||e.showPanelColor?e.color.value:""}},methods:{confirmValue:function(){this.$emit("pick")}},mounted:function(){this.$parent.popperElm=this.popperElm=this.$el,this.referenceElm=this.$parent.$el},watch:{showPopper:function(e){var t=this;e===!0&&this.$nextTick(function(){var e=t.$refs,i=e.sl,n=e.hue,s=e.alpha;i&&i.update(),n&&n.update(),s&&s.update()})}}}},function(e,t,i){var n=i(13)(i(942),i(944),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(943),o=n(s);t.default={name:"el-sl-panel",props:{color:{required:!0}},watch:{"color.value":function(){this.update()}},methods:{update:function(){var e=this.color.get("saturation"),t=this.color.get("value"),i=this.$el,n=i.getBoundingClientRect(),s=n.width,o=n.height;o||(o=3*s/4),this.cursorLeft=e*s/100,this.cursorTop=(100-t)*o/100,this.background="hsl("+this.color.get("hue")+", 100%, 50%)"},handleDrag:function(e){var t=this.$el,i=t.getBoundingClientRect(),n=e.clientX-i.left,s=e.clientY-i.top;n=Math.max(0,n),n=Math.min(n,i.width),s=Math.max(0,s),s=Math.min(s,i.height),this.cursorLeft=n,this.cursorTop=s,this.color.set({saturation:n/i.width*100,value:100-s/i.height*100})}},mounted:function(){var e=this;(0,o.default)(this.$el,{drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}}),this.update()},data:function(){return{cursorTop:0,cursorLeft:0,background:"hsl(0, 100%, 50%)"}}}},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0,t.default=function(e,t){if(!o.default.prototype.$isServer){var i=function(e){t.drag&&t.drag(e)},n=function e(n){document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",e),document.onselectstart=null,document.ondragstart=null,a=!1,t.end&&t.end(n)};e.addEventListener("mousedown",function(e){a||(document.onselectstart=function(){return!1},document.ondragstart=function(){return!1},document.addEventListener("mousemove",i),document.addEventListener("mouseup",n),a=!0,t.start&&t.start(e))})}};var s=i(2),o=n(s),a=!1},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-svpanel",style:{backgroundColor:e.background}},[i("div",{staticClass:"el-color-svpanel__white"}),i("div",{staticClass:"el-color-svpanel__black"}),i("div",{staticClass:"el-color-svpanel__cursor",style:{top:e.cursorTop+"px",left:e.cursorLeft+"px"}},[i("div")])])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(946),i(947),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(943),o=n(s);t.default={name:"el-color-hue-slider",props:{color:{required:!0},vertical:Boolean},data:function(){return{thumbLeft:0,thumbTop:0}},watch:{"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb,n=void 0;if(this.vertical){var s=e.clientY-t.top;s=Math.min(s,t.height-i.offsetHeight/2),s=Math.max(i.offsetHeight/2,s),n=Math.round((s-i.offsetHeight/2)/(t.height-i.offsetHeight)*360)}else{var o=e.clientX-t.left;o=Math.min(o,t.width-i.offsetWidth/2),o=Math.max(i.offsetWidth/2,o),n=Math.round((o-i.offsetWidth/2)/(t.width-i.offsetWidth)*360)}this.color.set("hue",n)},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/360)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color.get("hue");if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/360)},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop()}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-hue-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-hue-slider__bar",on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-hue-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t,i){var n=i(13)(i(949),i(950),null,null);e.exports=n.exports},function(e,t,i){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}t.__esModule=!0;var s=i(943),o=n(s);t.default={name:"el-color-alpha-slider",props:{color:{required:!0},vertical:Boolean},watch:{"color._alpha":function(){this.update()},"color.value":function(){this.update()}},methods:{handleClick:function(e){var t=this.$refs.thumb,i=e.target;i!==t&&this.handleDrag(e)},handleDrag:function(e){var t=this.$el.getBoundingClientRect(),i=this.$refs.thumb;if(this.vertical){var n=e.clientY-t.top;n=Math.max(i.offsetHeight/2,n),n=Math.min(n,t.height-i.offsetHeight/2),this.color.set("alpha",Math.round((n-i.offsetHeight/2)/(t.height-i.offsetHeight)*100))}else{var s=e.clientX-t.left;s=Math.max(i.offsetWidth/2,s),s=Math.min(s,t.width-i.offsetWidth/2),this.color.set("alpha",Math.round((s-i.offsetWidth/2)/(t.width-i.offsetWidth)*100))}},getThumbLeft:function(){if(this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetWidth-i.offsetWidth/2)/100)},getThumbTop:function(){if(!this.vertical)return 0;var e=this.$el,t=this.color._alpha;if(!e)return 0;var i=this.$refs.thumb;return Math.round(t*(e.offsetHeight-i.offsetHeight/2)/100)},getBackground:function(){if(this.color&&this.color.value){var e=this.color.toRgb(),t=e.r,i=e.g,n=e.b;return"linear-gradient(to right, rgba("+t+", "+i+", "+n+", 0) 0%, rgba("+t+", "+i+", "+n+", 1) 100%)"}return null},update:function(){this.thumbLeft=this.getThumbLeft(),this.thumbTop=this.getThumbTop(),this.background=this.getBackground()}},data:function(){return{thumbLeft:0,thumbTop:0,background:null}},mounted:function(){var e=this,t=this.$refs,i=t.bar,n=t.thumb,s={drag:function(t){e.handleDrag(t)},end:function(t){e.handleDrag(t)}};(0,o.default)(i,s),(0,o.default)(n,s),this.update()}}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{staticClass:"el-color-alpha-slider",class:{"is-vertical":e.vertical}},[i("div",{ref:"bar",staticClass:"el-color-alpha-slider__bar",style:{background:e.background},on:{click:e.handleClick}}),i("div",{ref:"thumb",staticClass:"el-color-alpha-slider__thumb",style:{left:e.thumbLeft+"px",top:e.thumbTop+"px"}})])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("transition",{attrs:{name:"el-zoom-in-top"},on:{"after-leave":e.doDestroy}},[i("div",{directives:[{name:"show",rawName:"v-show",value:e.showPopper,expression:"showPopper"}],staticClass:"el-color-dropdown"},[i("div",{staticClass:"el-color-dropdown__main-wrapper"},[i("hue-slider",{ref:"hue",staticStyle:{float:"right"},attrs:{color:e.color,vertical:""}}),i("sv-panel",{ref:"sl",attrs:{color:e.color}})],1),e.showAlpha?i("alpha-slider",{ref:"alpha",attrs:{color:e.color}}):e._e(),i("div",{staticClass:"el-color-dropdown__btns"},[i("span",{staticClass:"el-color-dropdown__value"},[e._v(e._s(e.currentColor))]),i("a",{staticClass:"el-color-dropdown__link-btn",attrs:{href:"JavaScript:"},on:{click:function(t){e.$emit("clear")}}},[e._v(e._s(e.t("el.colorpicker.clear")))]),i("button",{staticClass:"el-color-dropdown__btn",on:{click:e.confirmValue}},[e._v(e._s(e.t("el.colorpicker.confirm")))])])],1)])},staticRenderFns:[]}},function(e,t){e.exports={render:function(){var e=this,t=e.$createElement,i=e._self._c||t;return i("div",{directives:[{name:"clickoutside",rawName:"v-clickoutside",value:e.hide,expression:"hide"}],staticClass:"el-color-picker"},[i("div",{staticClass:"el-color-picker__trigger",on:{click:function(t){e.showPicker=!e.showPicker}}},[i("span",{staticClass:"el-color-picker__color",class:{"is-alpha":e.showAlpha}},[i("span",{staticClass:"el-color-picker__color-inner",style:{backgroundColor:e.displayedColor}}),e.value||e.showPanelColor?e._e():i("span",{staticClass:"el-color-picker__empty el-icon-close"})]),i("span",{staticClass:"el-color-picker__icon el-icon-caret-bottom"})]),i("picker-dropdown",{directives:[{name:"model",rawName:"v-model",value:e.showPicker,expression:"showPicker"}],ref:"dropdown",staticClass:"el-color-picker__panel",attrs:{color:e.color,"show-alpha":e.showAlpha},domProps:{value:e.showPicker},on:{pick:e.confirmValue,clear:e.clearValue,input:function(t){e.showPicker=t}}})],1)},staticRenderFns:[]}}]);
\ No newline at end of file
diff --git a/index.html b/index.html
index 6bff93c2a..82c95184a 100644
--- a/index.html
+++ b/index.html
@@ -6,12 +6,12 @@
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
     <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#20a0ff">
     <title>Element</title>
-  <link rel="shortcut icon" href="favicon.ico"><link href="docs.b00d8e3.css" rel="stylesheet"></head>
+  <link rel="shortcut icon" href="favicon.ico"><link href="docs.2dddc2b.css" rel="stylesheet"></head>
   <body>
     <div id="app"></div>
-    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.1.6/vue.runtime.min.js"></script>
+    <script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.3.0/vue.runtime.min.js"></script>
     <script src="//cdnjs.cloudflare.com/ajax/libs/vue-router/2.1.1/vue-router.min.js"></script>
-  <script type="text/javascript" src="manifest.2bfcfec.js"></script><script type="text/javascript" src="element-ui.b8cc43b.js"></script><script type="text/javascript" src="docs.597e34b.js"></script></body>
+  <script type="text/javascript" src="manifest.a242324.js"></script><script type="text/javascript" src="element-ui.44813ae.js"></script><script type="text/javascript" src="docs.130412a.js"></script></body>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/manifest.a242324.js b/manifest.a242324.js
new file mode 100644
index 000000000..a3ce483c3
--- /dev/null
+++ b/manifest.a242324.js
@@ -0,0 +1 @@
+!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,p){for(var l,c,s=0,i=[];s<o.length;s++)c=o[s],a[c]&&i.push.apply(i,a[c]),a[c]=0;for(l in p)e[l]=p[l];for(n&&n(o,p);i.length;)i.shift().call(null,t);if(p[0])return r[0]=0,t(0)};var r={},a={2:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+""+e+"."+{0:"130412a",1:"44813ae"}[e]+".js",r.appendChild(o)}},t.m=e,t.c=r,t.p=""}([]);
\ No newline at end of file
diff --git a/versions.json b/versions.json
index a1c2e0352..b7ee41de3 100644
--- a/versions.json
+++ b/versions.json
@@ -1 +1 @@
-{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2"}
\ No newline at end of file
+{"1.0.9":"1.0","1.1.6":"1.1","1.2.9":"1.2","1.3.0-beta.1":"1.3"}
\ No newline at end of file